@charset "utf-8";

/* **************************************** *
 * ALIGN
 * **************************************** */
.tleft{text-align:left !important}
.tcenter{text-align:center !important}
.tright{text-align:right !important}
.clearfix {display:block; clear:both; height:0}
.clearfix:after{content:""; display: block; clear:both}


/* **************************************** *
 * TEXT COLOR
 * **************************************** */
.color-blue1{color:#1e88e5 !important}
.color-purple1{color:#5629ee !important}
.color-purple2{color:#6878f5 !important}
.color-green1{color:#23cf3a !important}
.color-orange1{color:#ff6a00 !important}
.color-red1{color:#ff3532 !important}
.color-red2{color:#fa196d !important}
.color-black1{color:#101010 !important}
.color-black2{color:#303030 !important}
.color-gray1{color:#606060 !important}
.color-gray2{color:#909090 !important}
.color-gray3{color:#aaa !important}
.color-gray4{color:#bcbcbc !important}
.color-gray5{color:#e8e8e8 !important}
.color-accep{color:#0084f3 !important}
.color-fail{color:#f34444 !important}


/* **************************************** *
 * FONT SIZE
 * **************************************** */
.fs12{font-size:12px !important}
.fs13{font-size:13px !important}
.fs14{font-size:14px !important}
.fs15{font-size:15px !important}
.fs16{font-size:16px !important}
.fs17{font-size:17px !important}
.fs18{font-size:18px !important}
.fs19{font-size:19px !important}
.fs20{font-size:20px !important}
.fs22{font-size:22px !important}
.fs24{font-size:24px !important}
.fs26{font-size:26px !important}
.fs28{font-size:28px !important}

/* **************************************** *
 * FONT WEIGHT
 * **************************************** */
.fwnormal{font-weight:normal}
.fw300{font-weight:300 !important}
.fw600{font-weight:600}
.fwbold{font-weight:bold}

/* **************************************** *
 * BACKGROUND COLOR
 * **************************************** */
.bg-gray1{background-color:#f0f2f5 !important}
.bg-gray2{background-color:#606060 !important}
.bg-gray3{background-color:#f4f4f4 !important}
.bg-gray4{background-color:#00000080}
.bg-gray5{background-color:#fafafa !important}

/* **************************************** *
 * DEFAULT
 * **************************************** */
.fl{float:left}
.fr{float:right}
.cboth{display:block; content:""; clear:both}
.inblk{display:inline-block}
.blk{display:block !important}
.vgt{vertical-align:top}
.vgm{vertical-align:middle}
.ovh{overflow:hidden !important;}
.ova{overflow:auto}
.ovv{overflow:visible }
.blind,legend{display:block !important; position:absolute !important; top:-100000em !important; left:0 !important; overflow:hidden}

:root legend{margin-top:-1px; font-size:0; line-height:0}
.ellip{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis}
.hidden{display:none}
.fix{position:fixed !important}
.flex{display:flex; align-items:center}
.flex0{flex:0}
.flex1{flex:1}
.flex0-auto{flex:0 auto}

.flex-wrap{display:flex; flex-wrap:wrap;}
.flex-col{display:flex; flex-direction:column;}
.flex-row{display:flex; flex-direction:row;}
.flex-none{flex:none !important;}
.flex-auto{flex:auto !important;}
.justify-end{justify-content: end;}
.justify-start{justify-content:flex-start;}
.justify-center{justify-content:center;}
.justify-between{justify-content: space-between;}

.align-center{align-items:center}
.align-start{align-items:flex-start !important;}

.grid{display:grid; gap:4px}
.grid.grid-columns04{grid-template-columns: repeat(4, 1fr)}

/* **************************************** *
 * SCROLL
 * **************************************** */
::-webkit-scrollbar{width:10px; height:8px;}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-track
{
	/*background-color:#f2f2f2; background-image:-moz-linear-gradient(left, #f2f2f2 0%, #fff 100%);
 	background-image: linear-gradient(to left, #f2f2f2 0%, #fff 100%);
	background-image: -webkit-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	background-image: -o-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	background-image: -ms-linear-gradient(left, #f2f2f2 0%, #fff 100%);
	border: 1px solid #e6e6e6;*/
	
	background-color:#e8e8e8;
}
::-webkit-scrollbar-thumb{background:#8a8a8a; border-radius:1000px}
::-webkit-scrollbar-thumb:hover{background:#595959}

/* 팝업 전체 스크롤 */
.layerpop-box .dev-content.scroll{overflow-x:inherit; overflow-y:scroll}


/* **************************************** *
 * BORDER
 * **************************************** */
.bd{border:1px solid #dcdfe2}
.bd-top{border-top:1px solid #dcdfe2}
.bd-bottom{border-bottom:1px solid #dcdfe2}
.bd-left{border-left:1px solid #dcdfe2}
.bd-right{border-right:1px solid #dcdfe2}
.bd-right-gray{border-right:1px solid #eaeaea}

.bd-radius{border:1px solid #dcdfe2; border-radius: 8px;}
.bd-none{border:0 !important}

.grid-bd{border:1px solid #ebebeb}

/* **************************************** *
 * WIDTH
 * **************************************** */
/* width px */
.wid10 {width:10px !important}
.wid20 {width:20px !important}
.wid22 {width:22px !important}
.wid26 {width:26px !important}
.wid30 {width:30px !important}
.wid40 {width:40px !important}
.wid50 {width:50px !important}
.wid60 {width:60px !important}
.wid70 {width:70px !important}
.wid74 {width:74px !important}
.wid80 {width:80px !important}
.wid90 {width:90px !important}
.wid100 {width:100px !important}
.wid102 {width:102px !important}
.wid105 {width:105px !important}
.wid110 {width:110px !important}
.wid120 {width:120px !important}
.wid130 {width:130px !important}
.wid140 {width:140px !important}
.wid150 {width:150px !important}
.wid154 {width:154px !important}
.wid157 {width:157px !important}
.wid160 {width:160px !important}
.wid170 {width:170px !important}
.wid180 {width:180px !important}
.wid190 {width:190px !important}
.wid200 {width:200px !important}
.wid210 {width:210px !important}
.wid213 {width:213px !important}
.wid215 {width:213px !important}
.wid220 {width:220px !important}
.wid228 {width:228px !important}
.wid230 {width:230px !important}
.wid240 {width:240px !important}
.wid250 {width:250px !important}
.wid260 {width:260px !important}
.wid270 {width:270px !important}
.wid280 {width:280px !important}
.wid290 {width:290px !important}
.wid300 {width:300px !important}
.wid308 {width:308px !important}
.wid310 {width:310px !important}
.wid317 {width:317px !important}
.wid320 {width:320px !important}
.wid330 {width:330px !important}
.wid340 {width:340px !important}
.wid350 {width:350px !important}
.wid360 {width:360px !important}
.wid370 {width:370px !important}
.wid375 {width:375px !important}
.wid376 {width:376px !important}
.wid380 {width:380px !important}
.wid390 {width:390px !important}
.wid400 {width:400px !important}
.wid500 {width:500px !important}
.wid550 {width:550px !important}
.wid560 {width:560px !important}
.wid600 {width:600px !important}
.wid630 {width:630px !important}
.wid680 {width:680px !important}
.wid700 {width:700px !important}
.wid720 {width:720px !important}
.wid780 {width:780px !important}
.wid800 {width:800px !important}
.wid900 {width:900px !important}
.wid1000 {width:1000px !important}
.wid1100 {width:1100px !important}
.wid1200 {width:1200px !important}
.wid1300 {width:1300px !important}
.wid1400 {width:1400px !important}
.wid1500 {width:1500px !important}
.wid1600 {width:1600px !important}
.wid1700 {width:1700px !important}
.wid1800 {width:1800px !important}
.wid1900 {width:1900px !important}
.wid2000 {width:2000px !important}

/* min width px */
.mwid10 {min-width:10px !important}
.mwid20 {min-width:20px !important}
.mwid30 {min-width:30px !important}
.mwid40 {min-width:40px !important}
.mwid50 {min-width:50px !important}
.mwid60 {min-width:60px !important}
.mwid70 {min-width:70px !important}
.mwid80 {min-width:80px !important}
.mwid90 {min-width:90px !important}
.mwid100 {min-width:100px !important}
.mwid110 {min-width:110px !important}
.mwid120 {min-width:120px !important}
.mwid130 {min-width:130px !important}
.mwid140 {min-width:140px !important}
.mwid150 {min-width:150px !important}
.mwid160 {min-width:160px !important}
.mwid170 {min-width:170px !important}
.mwid180 {min-width:180px !important}
.mwid190 {min-width:190px !important}
.mwid200 {min-width:200px !important}
.mwid210 {min-width:210px !important}
.mwid220 {min-width:220px !important}
.mwid230 {min-width:230px !important}
.mwid240 {min-width:240px !important}
.mwid250 {min-width:250px !important}
.mwid260 {min-width:260px !important}
.mwid270 {min-width:270px !important}
.mwid280 {min-width:280px !important}
.mwid290 {min-width:290px !important}
.mwid300 {min-width:300px !important}
.mwid400 {min-width:400px !important}

/* max width px */
.mxwid120 {max-width:120px !important}
.mxwid140 {max-width:140px !important}
.mxwid150 {max-width:150px !important}
.mxwid160 {max-width:160px !important}
.mxwid200 {max-width:200px !important}
.mxwid300 {max-width:300px !important}


/* width % */
.wid10p {width:10% !important}
.wid15p {width:15% !important}
.wid20p {width:20% !important}
.wid25p {width:25% !important}
.wid30p {width:30% !important}
.wid33p {width:33% !important}
.wid35p {width:35% !important}
.wid40p {width:40% !important}
.wid45p {width:45% !important}
.wid50p {width:50% !important}
.wid55p {width:55% !important}
.wid60p {width:60% !important}
.wid65p {width:65% !important}
.wid68p {width:68% !important}
.wid70p {width:70% !important}
.wid75p {width:75% !important}
.wid80p {width:80% !important}
.wid85p {width:85% !important}
.wid90p {width:90% !important}
.wid95p {width:95% !important}
.wid100p {width:100% !important}

/* min width % */
.mwid10p {min-width:10% !important}
.mwid15p {min-width:15% !important}
.mwid20p {min-width:20% !important}
.mwid25p {min-width:25% !important}
.mwid30p {min-width:30% !important}
.mwid35p {min-width:35% !important}
.mwid40p {min-width:40% !important}
.mwid45p {min-width:45% !important}
.mwid50p {min-width:50% !important}
.mwid55p {min-width:55% !important}
.mwid60p {min-width:60% !important}
.mwid65p {min-width:65% !important}
.mwid70p {min-width:70% !important}
.mwid75p {min-width:75% !important}
.mwid80p {min-width:80% !important}
.mwid85p {min-width:85% !important}
.mwid90p {min-width:90% !important}
.mwid95p {min-width:95% !important}
.mwid100p {min-width:100% !important}


/* **************************************** *
 * height
 * **************************************** */
/* height px */
.hei20 {height:20px !important}
.hei30 {height:30px !important}
.hei35 {height:35px !important}
.hei40 {height:40px !important}
.hei45 {height:45px !important}
.hei50 {height:50px !important}
.hei100 {height:100px !important}
.hei120 {height:120px !important}
.hei126 {height:126px !important}
.hei130 {height:130px !important}
.hei150 {height:150px !important}
.hei200 {height:200px !important}
.hei210 {height:210px !important}
.hei230 {height:230px !important}
.hei240 {height:240px !important}
.hei250 {height:250px !important}
.hei280 {height:280px !important}
.hei300 {height:300px !important}
.hei350 {height:350px !important}
.hei400 {height:400px !important}
.hei420 {height:420px !important}
.hei450 {height:450px !important}
.hei460 {height:460px !important}
.hei500 {height:500px !important}
.hei550 {height:550px !important}
.hei580 {height:580px !important}
.hei600 {height:600px !important}
.hei650 {height:650px !important}
.hei700 {height:700px !important}
.hei750 {height:750px !important}
.hei800 {height:800px !important}
.hei850 {height:850px !important}
.hei900 {height:900px !important}
.hei950 {height:950px !important}
.hei1000 {height:1000px !important}

/* height % */
.hei10p {height:10% !important}
.hei15p {height:15% !important}
.hei20p {height:20% !important}
.hei25p {height:25% !important}
.hei30p {height:30% !important}
.hei35p {height:35% !important}
.hei40p {height:40% !important}
.hei45p {height:45% !important}
.hei50p {height:50% !important}
.hei55p {height:55% !important}
.hei60p {height:60% !important}
.hei65p {height:65% !important}
.hei70p {height:70% !important}
.hei75p {height:75% !important}
.hei80p {height:80% !important}
.hei85p {height:85% !important}
.hei90p {height:90% !important}
.hei95p {height:95% !important}
.hei100p {height:100% !important}

.hei-calc10{height:calc(100% - 10px)}


/* **************************************** *
 * margin
 * **************************************** */
/* margin px */
.mg00 {margin:0px !important}
.mg05 {margin:5px !important}
.mg10 {margin:10px !important}
.mg15 {margin:15px !important}
.mg20 {margin:20px !important}
.mg25 {margin:25px !important}
.mg30 {margin:30px !important}
.mg35 {margin:35px !important}
.mg40 {margin:40px !important}
.mg45 {margin:45px !important}
.mg50 {margin:50px !important}
.mg55 {margin:55px !important}
.mg60 {margin:60px !important}
.mg65 {margin:65px !important}
.mg70 {margin:70px !important}
.mg75 {margin:75px !important}
.mg80 {margin:80px !important}
.mg85 {margin:85px !important}
.mg90 {margin:90px !important}
.mg95 {margin:95px !important}
.mg100 {margin:100px !important}

.mgt-1 {margin-top:-1px !important}
.mgt00 {margin-top:0px !important}
.mgt05 {margin-top:5px !important}
.mgt07 {margin-top:7px !important}
.mgt08 {margin-top:8px !important}
.mgt10 {margin-top:10px !important}
.mgt13 {margin-top:13px !important}
.mgt15 {margin-top:15px !important}
.mgt20 {margin-top:20px !important}
.mgt24 {margin-top:24px !important}
.mgt25 {margin-top:25px !important}
.mgt30 {margin-top:30px !important}
.mgt35 {margin-top:35px !important}
.mgt40 {margin-top:40px !important}
.mgt45 {margin-top:45px !important}
.mgt50 {margin-top:50px !important}
.mgt55 {margin-top:55px !important}
.mgt60 {margin-top:60px !important}
.mgt65 {margin-top:65px !important}
.mgt70 {margin-top:70px !important}
.mgt75 {margin-top:75px !important}
.mgt80 {margin-top:80px !important}
.mgt85 {margin-top:85px !important}
.mgt90 {margin-top:90px !important}
.mgt95 {margin-top:95px !important}
.mgt100 {margin-top:100px !important}
.mgt180 {margin-top:180px !important}
.mgt215 {margin-top:215px !important}
.mgt240 {margin-top:240px !important}
.mgt465 {margin-top:465px !important}
.mgt515 {margin-top:515px !important}


.mgr00 {margin-right:0px !important}
.mgr02 {margin-right:2px !important}
.mgr03 {margin-right:3px !important}
.mgr05 {margin-right:5px !important}
.mgr10 {margin-right:10px !important}
.mgr15 {margin-right:15px !important}
.mgr20 {margin-right:20px !important}
.mgr25 {margin-right:25px !important}
.mgr30 {margin-right:30px !important}
.mgr35 {margin-right:35px !important}
.mgr40 {margin-right:40px !important}
.mgr45 {margin-right:45px !important}
.mgr50 {margin-right:50px !important}
.mgr55 {margin-right:55px !important}
.mgr60 {margin-right:60px !important}
.mgr65 {margin-right:65px !important}
.mgr70 {margin-right:70px !important}
.mgr75 {margin-right:75px !important}
.mgr80 {margin-right:80px !important}
.mgr85 {margin-right:85px !important}
.mgr90 {margin-right:90px !important}
.mgr95 {margin-right:95px !important}
.mgr100 {margin-right:100px !important}

.mgb00 {margin-bottom:0px !important}
.mgb05 {margin-bottom:5px !important}
.mgb10 {margin-bottom:10px !important}
.mgb15 {margin-bottom:15px !important}
.mgb20 {margin-bottom:20px !important}
.mgb25 {margin-bottom:25px !important}
.mgb30 {margin-bottom:30px !important}
.mgb35 {margin-bottom:35px !important}
.mgb40 {margin-bottom:40px !important}
.mgb45 {margin-bottom:45px !important}
.mgb50 {margin-bottom:50px !important}
.mgb55 {margin-bottom:55px !important}
.mgb60 {margin-bottom:60px !important}
.mgb65 {margin-bottom:65px !important}
.mgb70 {margin-bottom:70px !important}
.mgb75 {margin-bottom:75px !important}
.mgb80 {margin-bottom:80px !important}
.mgb85 {margin-bottom:85px !important}
.mgb90 {margin-bottom:90px !important}
.mgb95 {margin-bottom:95px !important}
.mgb100 {margin-bottom:100px !important}

.mgl00 {margin-left:0px !important}
.mgl02 {margin-left:2px !important}
.mgl05 {margin-left:5px !important}
.mgl10 {margin-left:10px !important}
.mgl15 {margin-left:15px !important}
.mgl20 {margin-left:20px !important}
.mgl25 {margin-left:25px !important}
.mgl30 {margin-left:30px !important}
.mgl35 {margin-left:35px !important}
.mgl40 {margin-left:40px !important}
.mgl45 {margin-left:45px !important}
.mgl50 {margin-left:50px !important}
.mgl55 {margin-left:55px !important}
.mgl60 {margin-left:60px !important}
.mgl65 {margin-left:65px !important}
.mgl70 {margin-left:70px !important}
.mgl75 {margin-left:75px !important}
.mgl80 {margin-left:80px !important}
.mgl85 {margin-left:85px !important}
.mgl90 {margin-left:90px !important}
.mgl95 {margin-left:95px !important}
.mgl100 {margin-left:100px !important}

.mgx01 {margin:0 1px !important}
.mgx05 {margin:0 5px !important}
.mgx10 {margin:0 10px !important}
.mgx20 {margin:0 20px !important}
.mgx28 {margin:0 28px !important}
.mgx30 {margin:0 30px !important}
.mgx40 {margin:0 40px !important}
.mgx50 {margin:0 50px !important}
.mgx60 {margin:0 60px !important}
.mgx70 {margin:0 70px !important}
.mgx80 {margin:0 80px !important}
.mgx90 {margin:0 90px !important}
.mgx100 {margin:0 100px !important}
.mgxauto {margin:0 auto !important}

.mgy01 {margin:1px 0 !important}
.mgy05 {margin:5px 0 !important}
.mgy10 {margin:10px 0 !important}
.mgy20 {margin:20px 0 !important}
.mgy30 {margin:30px 0 !important}
.mgy40 {margin:40px 0 !important}
.mgy50 {margin:50px 0 !important}
.mgy60 {margin:60px 0 !important}
.mgy70 {margin:70px 0 !important}
.mgy80 {margin:80px 0 !important}
.mgy90 {margin:90px 0 !important}
.mgy100 {margin:100px 0 !important}
.mgyauto {margin:auto 0 !important}


/* **************************************** *
 * padding
 * **************************************** */
/* padding px */
.pd00 {padding:0px !important}
.pd05 {padding:5px !important}
.pd10 {padding:10px !important}
.pd15 {padding:15px !important}
.pd16 {padding:16px !important}
.pd20 {padding:20px !important}
.pd25 {padding:25px !important}
.pd30 {padding:30px !important}
.pd35 {padding:35px !important}
.pd40 {padding:40px !important}
.pd45 {padding:45px !important}
.pd50 {padding:50px !important}
.pd55 {padding:55px !important}
.pd60 {padding:60px !important}
.pd65 {padding:65px !important}
.pd70 {padding:70px !important}
.pd75 {padding:75px !important}
.pd80 {padding:80px !important}
.pd85 {padding:85px !important}
.pd90 {padding:90px !important}
.pd95 {padding:95px !important}
.pd100 {padding:100px !important}

.pdt00 {padding-top:0px !important}
.pdt05 {padding-top:5px !important}
.pdt10 {padding-top:10px !important}
.pdt15 {padding-top:15px !important}
.pdt20 {padding-top:20px !important}
.pdt25 {padding-top:25px !important}
.pdt30 {padding-top:30px !important}
.pdt35 {padding-top:35px !important}
.pdt40 {padding-top:40px !important}
.pdt45 {padding-top:45px !important}
.pdt50 {padding-top:50px !important}
.pdt55 {padding-top:55px !important}
.pdt60 {padding-top:60px !important}
.pdt65 {padding-top:65px !important}
.pdt70 {padding-top:70px !important}
.pdt75 {padding-top:75px !important}
.pdt80 {padding-top:80px !important}
.pdt85 {padding-top:85px !important}
.pdt90 {padding-top:90px !important}
.pdt95 {padding-top:95px !important}
.pdt100 {padding-top:100px !important}

.pdr00 {padding-right:0px !important}
.pdr05 {padding-right:5px !important}
.pdr10 {padding-right:10px !important}
.pdr15 {padding-right:15px !important}
.pdr20 {padding-right:20px !important}
.pdr25 {padding-right:25px !important}
.pdr30 {padding-right:30px !important}
.pdr35 {padding-right:35px !important}
.pdr40 {padding-right:40px !important}
.pdr45 {padding-right:45px !important}
.pdr50 {padding-right:50px !important}
.pdr55 {padding-right:55px !important}
.pdr60 {padding-right:60px !important}
.pdr65 {padding-right:65px !important}
.pdr70 {padding-right:70px !important}
.pdr75 {padding-right:75px !important}
.pdr80 {padding-right:80px !important}
.pdr85 {padding-right:85px !important}
.pdr90 {padding-right:90px !important}
.pdr95 {padding-right:95px !important}
.pdr100 {padding-right:100px !important}

.pdb00 {padding-bottom:0px !important}
.pdb05 {padding-bottom:5px !important}
.pdb10 {padding-bottom:10px !important}
.pdb15 {padding-bottom:15px !important}
.pdb20 {padding-bottom:20px !important}
.pdb25 {padding-bottom:25px !important}
.pdb30 {padding-bottom:30px !important}
.pdb35 {padding-bottom:35px !important}
.pdb40 {padding-bottom:40px !important}
.pdb45 {padding-bottom:45px !important}
.pdb50 {padding-bottom:50px !important}
.pdb55 {padding-bottom:55px !important}
.pdb60 {padding-bottom:60px !important}
.pdb65 {padding-bottom:65px !important}
.pdb70 {padding-bottom:70px !important}
.pdb75 {padding-bottom:75px !important}
.pdb80 {padding-bottom:80px !important}
.pdb85 {padding-bottom:85px !important}
.pdb90 {padding-bottom:90px !important}
.pdb95 {padding-bottom:95px !important}
.pdb100 {padding-bottom:100px !important}

.pdl00 {padding-left:0px !important}
.pdl05 {padding-left:5px !important}
.pdl10 {padding-left:10px !important}
.pdl15 {padding-left:15px !important}
.pdl20 {padding-left:20px !important}
.pdl25 {padding-left:25px !important}
.pdl30 {padding-left:30px !important}
.pdl35 {padding-left:35px !important}
.pdl40 {padding-left:40px !important}
.pdl45 {padding-left:45px !important}
.pdl50 {padding-left:50px !important}
.pdl55 {padding-left:55px !important}
.pdl60 {padding-left:60px !important}
.pdl65 {padding-left:65px !important}
.pdl70 {padding-left:70px !important}
.pdl75 {padding-left:75px !important}
.pdl80 {padding-left:80px !important}
.pdl85 {padding-left:85px !important}
.pdl90 {padding-left:90px !important}
.pdl95 {padding-left:95px !important}
.pdl100 {padding-left:100px !important}

.pdx05 {padding:0 5px !important}
.pdx10 {padding:0 10px !important}
.pdx20 {padding:0 20px !important}
.pdx30 {padding:0 30px !important}
.pdx40 {padding:0 40px !important}
.pdx50 {padding:0 50px !important}
.pdx60 {padding:0 60px !important}
.pdx70 {padding:0 70px !important}
.pdx80 {padding:0 80px !important}
.pdx90 {padding:0 90px !important}
.pdx100 {padding:0 100px !important}


/* **************************************** *
 * TITLE
 * **************************************** */
.stitArea{display:flex; position:relative; align-items:center; margin-bottom:10px}
.stitArea:after{content:''; display:block; clear:both}

.stitArea.tgBox{padding:5px; padding-left:10px; border:1px solid #dadada; background:#f7f7f7}

.stitArea.box{padding:10px}
.stitArea.box.bd{border:1px solid #e9e9e9; border-radius:8px}

.stitArea .stitL,
.stitArea .stitC,
.stitArea .stitR{display:flex; align-items:center}

.stitArea .stitC{margin-left:auto}
.stitArea .stitR{margin-left:auto}

.stitArea .helpGuide{display:flex; align-items:center}
.stitArea .helpGuide .guideButton{margin-right:10px}

.stitArea .counter{margin-left:5px; padding-top:2px; font-size:15px; font-weight:300; color:#808080; vertical-align:middle}

/* 텍스트만 정렬할 시 */
.stitArea .stitL .info-list{display:flex}
.stitArea .stitL .info-list li{padding-left:20px; display:flex; align-items:center}
.stitArea .stitL .info-list li:first-child{padding-left:10px}
.stitArea .stitL .info-list li h4{position:relative}
.stitArea .stitL .info-list li h4:before{content:''; background:#a38af7db; position:absolute; top:50%; left:-8px; transform:translate(0, -50%); height:50%; width:3px}
.stitArea .stitL .info-list li > span{color:#5629ee}


h2.stit02{display:inline-block; position:relative; margin:0; padding:0; color:#202020; letter-spacing:-0.8px; line-height:155%; vertical-align:middle}
h3.stit03,
h4.stit04,
h5.stit05{display:inline-block; position:relative; margin:0; padding:0; color:#202020; letter-spacing:-0.8px; line-height:155%; vertical-align:middle}
h2.stit02{font-size:24px; font-weight:600}
h3.stit02{font-size:24px; font-weight:600}
h3.stit03{font-size:20px; font-weight:300}
h3.stit03.line:before{content:""; width:4px; height: 80%; background: #5629ee; position: absolute; left:0px; margin-top:4px}
h3.stit03.line{padding-left: 14px}

h4.stit04{font-size:17px; font-weight:300}
h5.stit05{font-size:16px; font-weight:normal}
h3.stit03 span{font-size:20px}
h4.stit04 span{font-size:17px}
h5.stit05 span{font-size:16px}
h3.stit03 > i,
h4.stit04 > i,
h5.stit05 > i{position:relative; font-size:18px; margin-right:5px; vertical-align:middle}
h3.stit03 > .axl-ico,
h4.stit04 > .axl-ico,
h5.stit05 > .axl-ico{margin-top:-2px; margin-right:3px}
h3.stit03 > .dfi,
h4.stit04 > .dfi,
h5.stit05 > .dfi{width:18px; margin-top:-3px; vertical-align:middle}
h4.stit04 + .signal_list{position:relative; top:3px}
h3.stit03 + .Button.trans-ico i,
h4.stit04 + .Button.trans-ico i,
h3.stit05 + .Button.trans-ico i{margin-top:-1px}
h3.stit03 > span.require{font-size:0px}
h3.stit03 > i.badge{font-size:12px; margin-left:8px}

.tit-bd-r{position:relative}
.tit-bd-r:after{content:""; position:absolute; top:50%; right:-11px; transform:translate(0, -50%); height:70%; width:1px; background:#ddd}

.wms-layout h3.stit02{font-size:22px; font-weight:600; letter-spacing: -0.8px;}
.wms-layout h3.stit03{font-size:18px; font-weight:300; letter-spacing: -0.8px;}
.wms-layout h4.stit04{font-size:16px; font-weight:normal}
.wms-layout h5.stit05{font-size:15px; font-weight:normal}
.wms-layout h3.stit03 span{font-size:18px}
.wms-layout h4.stit04 span{font-size:16px}
.wms-layout h5.stit05 span{font-size:15px}


/* **************************************** *
 * SWITCH
 * **************************************** */
.switch{display:inline-block; vertical-align:middle}
.switch input[type="checkbox"]{display:none}
.switch .switch-ground{display:inline-block; position:relative; width:32px; height:22px; background:#ccc; border-radius:120px; vertical-align:middle; cursor:pointer; transition:all .3s; overflow:hidden}
.switch .switch-ground > *{vertical-align:sub; transition: all .2s}
.switch .switch-ground .marble{display:block; position:absolute; top:2px; left:2px; width:18px; height:18px; background-color:#fff; border-radius:50%; box-shadow:0 0 10px rgba(0, 0, 0, .3)}
.switch .switch-ground .on,
.switch .switch-ground .off{display:inline-block; height:22px; margin:0; padding:0; line-height:23px; color:#fff; font-size:11px; font-weight: normal; letter-spacing:-0.2px; vertical-align:top}
.switch .switch-ground .on {display:none; padding-left:12px}
.switch .switch-ground .off {padding-left:26px}
.switch input[type="checkbox"]:checked + .switch-ground{background:#5629ee; background:linear-gradient(-43deg, #5629ee, #be52f2)}
.switch input[type="checkbox"]:checked + .switch-ground .on{display:inline-block}
.switch input[type="checkbox"]:checked + .switch-ground .off{display:none}
.switch input[type="checkbox"]:checked + .switch-ground .marble{left:12px}

.switch input[type="checkbox"].Disabled + .switch-ground{background:#e5e5e5; cursor:not-allowed}
.switch input[type="checkbox"].Disabled + .switch-ground .marble{background-color:rgba(255,255,255,.3)}
.switch input[type="checkbox"].Disabled:checked + .switch-ground .marble{background-color:rgba(255,255,255,.3)}

.switch .label{display:inline-block; line-height:155%; font-weight:normal; font-size:15px; color:#333; letter-spacing:-0.5px; vertical-align:middle}
.switch .label.unused{color:#999}

.switch.on input[type="checkbox"].Disabled + .switch-ground{background-color:rgba(86,41,238,.3) !important; cursor:not-allowed}
.switch.on input[type="checkbox"].Disabled + .switch-ground .marble{background-color:#fff}
.switch.on input[type="checkbox"].Disabled:checked + .switch-ground .marble{background-color:#fff}

.switch.txt .switch-ground{width:50px; height:27px; border-radius:5px; background:#efefef; color:#8d8a8a; font-size:13px; line-height:1.5; transition:auto; text-align:center}
.switch.txt .switch-ground.use_switch{width:40px}
.switch.txt input[type="checkbox"]:checked + .switch-ground{background:#dff5ff; color:#26a2dc}

/* 텍스트 스위치 버튼 */
.switch.slide{display:flex}
.btn_use{display:flex; border:1px solid #e5e5e5; background: #f4f4f4; box-sizing:border-box; border-radius:50px}
.btn_use > button{position:relative; display:inline-block; padding:0.1rem 0.75rem; line-height:1.8; box-sizing:border-box; border:0; background:none; cursor:pointer}
.btn_use > button span{color:#8d8a8a}
.btn_use button.use_on:before{content:''; position:absolute; left:-1px; top:-1px; display:inline-block; width:100%; height:100%; background: #dff5ff; border-radius:50px; border:1px solid #26a2dc}
.btn_use button.use_on span{position:relative; color:#26a2dc}

/* 다국어 tree switch 버튼 */
.fixConWrap .fixCtrl .buttonArea .buttonL .switch{display:flex; align-items:flex-start}
.fixConWrap .fixCtrl .buttonArea .buttonL .switch .switch-ground{flex:none; margin-top:2px}
.fixConWrap .fixCtrl .buttonArea .buttonL .switch .label{width:90%}


/* lock 스위치 버튼 */
.switch.lock .switch-ground{display:inline-block; position:relative; width:23px; height:22px; background:transparent; border-radius:120px; vertical-align:middle; cursor:pointer; transition:all .3s; overflow:hidden}

.switch.lock input[type="checkbox"]:checked + .switch-ground{background:transparent; }

.switch.lock input[type="checkbox"]:checked + .switch-ground:before{content:"\F033E";  color:transparent; background:linear-gradient(-43deg, #5629ee, #be52f2); -webkit-background-clip: text;}
.switch.lock input[type="checkbox"] + .switch-ground:before{content:"\F033F"; font-family:"Material Design Icons"; color:#00000052; position:absolute; top:1px; font-size: 17px; left:1px; }





/* **************************************** *
 * DASH
 * **************************************** */
.dash-uni,
.dash-txt,
.dash-tit{display:inline-block; line-height:150%; font-size:15px; letter-spacing:-0.2px; vertical-align:middle; word-break:keep-all}

.dash-uni{color:#808080; font-weight:normal}
.dash-txt{color:#505050; font-weight:normal}
strong.dash-txt{color:#505050; font-weight:300}
.dash-tit{color:#303030; font-weight:300}

.dash-uni i,
.dash-txt i,
.dash-tit i{margin-top:-2px; vertical-align:middle}


/* **************************************** *
 * FORM
 * **************************************** */
/* divselect */
.divselect
{
	display:inline-block; position:relative; min-width:88px; height:40px; padding:0; line-height:1.2;
	border:1px solid #ddd; color:#222; font-size:15px; vertical-align:middle; border-radius:8px;
	box-sizing:border-box; background:#fff url("/static/fw/images/common/divselect.svg") no-repeat right 50%;
	font-family:'pps', 'ptd', 'noto','sans-serif' !important;
}
.divselect select
{
	display:inline-block; width:100%; height:100%; padding:0 40px 0 15px; line-height:38px; color:#303030; background:transparent;
	font-size:15px;
	-webkit-appearance:none; -moz-appearance:none; appearance:none; border:0; margin:0; border-radius:0; cursor:pointer;
	font-family:'pps', 'ptd', 'sans-serif' !important; box-sizing:border-box;
}
.divselect select[disabled]{background-color:#f2f4f5; color:#999b9c; cursor:not-allowed !important}
.divselect select[readonly]{color:#999b9c}
.divselect option{border:0; font-family:'pps', 'ptd', 'sans-serif' !important; font-size:14px}
.divselect select::-ms-expand{display:none}

.divselect.small{height:32px; font-size:14px; border-radius:6px}
.divselect.small select{padding:0 40px 0 10px; line-height:30px; font-size:14px}

.wms-layout .divselect{height:32px; font-size:14px; border-radius:6px}
.wms-layout .divselect select{padding:0 40px 0 15px; line-height:30px; font-size:14px}


/* **************************************** *
 * TEXT
 * **************************************** */
/* infoTxt */
.infoTxt01{position:relative; line-height:155%; font-size:15px; font-weight:normal; color:#505050; letter-spacing:-0.5px}
.infoTxt01.bul{padding-left:12px}
.infoTxt01.bul:before{content:''; position:absolute; left:0; top:5px; width:3px; height:3px; background:#909090}
.infoTxt01.uni{padding-left:12px}
.infoTxt01.uni > .uni{position:absolute; top:0; left:0}
.infoTxt01 i{margin-top:-1px; margin-right:2px; font-size:24px; vertical-align:middle}
.infoTxt01.error{padding-left:14px}
.infoTxt01.error:before{content:"\e9ab"; position:absolute; left:0; top:0; font-family:'xeicon'; font-size:24px; vertical-align:middle}

.infoTxt02{position:relative; line-height:155%; font-size:15px; font-weight:300; color:#202020; letter-spacing:-0.5px; }

.infoTxt03{position:relative; line-height:155%; font-size:14px; font-weight:normal; color:#888; letter-spacing:-0.6px}
.infoTxt03 i{margin-top:-1px; margin-right:2px; font-size:18px; vertical-align:middle}


.infoTxt04{position:relative; line-height:155%; font-size:13px; font-weight:normal; color:#666; letter-spacing:-0.6px}


/* infoList */
.infoList01{position:relative}
.infoList01 > li{display:flex; align-items:center; position:relative; margin-bottom:3px; color:#505050; letter-spacing:-0.5px; font-size:15px}
.infoList01 > li:last-child{margin-bottom:0}
.infoList01 > li > ul{margin-top:2px}
.infoList01.bul > li{padding-left:10px}
.infoList01.bul > li:before{content:''; position:absolute; left:0; top:9px; width:3px; height:3px; background:#909090}
.infoList01.unt > li{padding-left:22px}
.infoList01.unt > li .unt{position:absolute; top:0; left:5px}
.infoList01 i{font-size:16px; vertical-align:middle; margin-top:-1px}


/* **************************************** *
 * CHECK & RADIO ALIGN
 * **************************************** */
.check-list01{display:flex; flex-wrap:wrap}
.check-list01:after{content:''; display:block; clear:both}
.check-list01 li{margin-right:8px; display:flex; align-items:center}
.check-list01.col5 li,
.check-list01.col4 li,
.check-list01.col3 li,
.check-list01.col2 li{flex:1 auto; margin-right:0}
.check-list01.col5 li{min-width:20%; max-width:20%}
.check-list01.col4 li{min-width:25%; max-width:25%}
.check-list01.col3 li{min-width:33.33333%; max-width:33.33333%}
.check-list01.col2 li{min-width:50%; max-width:20%}
 
.check-list03{display:flex; flex-wrap:wrap}
.check-list03:after{content:''; display:block; clear:both}
.check-list03 li{margin-right:8px; margin-top:8px; padding:8px 6px; border:1px solid #dadada; border-radius:4px;}
.check-list03.col5 li,
.check-list03.col4 li,
.check-list03.col3 li,
.check-list03.col2 li{flex:1 auto; margin-right:0}
 
.check-list03.col5 li{min-width:20%; max-width:20%}
.check-list03.col4 li{min-width:25%; max-width:25%}
.check-list03.col3 li{min-width:33.33333%; max-width:33.33333%}
.check-list03.col2 li{min-width:50%; max-width:20%}

.check-list02:after{content:''; display:block; clear:both}
.check-list02 li{display:flex; align-items:center; float:left; height:32px; margin-right:2px; padding:0 6px; border:1px solid #dadada; border-radius:4px; box-sizing:border-box}

/* 체크시 인풋박스 */
.check-list01 .check_etc{display:flex; flex-direction:row}
.check-list01 .check_etc .ImageCheckbox.af-checkbox-text{width:35%}


/* **************************************** *
 * SEARCHBOX
 * **************************************** */
.keySearchbox{display:flex; align-items:center}
.keySearchbox .searchTit{display:flex; align-items:center}
.keySearchbox .searchTit .tit{display:inline-block; line-height:150%; color:#303030; font-weight:300; letter-spacing:-0.2px; vertical-align:middle}
.keySearchbox .searchOpt{margin-right:2px}
.keySearchbox .searchkey{display:flex; flex: 1 1 auto; align-items:center}
.keySearchbox .searchkey .search{position:relative; width:32px; height:32px; margin-left:-38px; padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}
.keySearchbox .searchkey .search i{font-size:16px}
.keySearchbox .searchOpt .Divselect{border:none}
.fixCont2 .keySearchbox .searchOpt .Divselect{border:1px solid #ddd}
.fixConWrap.userSet .fixCont2 .keySearchbox .searchOpt .Divselect{border:0}


.searchkey{display:flex; flex: 1 1 auto; align-items:center}
.searchkey .search{position:relative; width:32px; height:32px; margin-left:-38px; padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}

.searchkey .search:active,
.searchkey .search:hover,
.searchkey .search:focus,
.searchkey .search.af-hover,
.searchkey .search.Checked{border:none; padding:0; background:none; color:#808080}

.searchkey .search i{font-size:16px}

.chatSearchbox{display:flex; align-items:center}
.chatSearchbox .Textinput{padding:0px 82px 0px 15px}
.chatSearchbox .searchTit{display:flex; align-items:center}
.chatSearchbox .searchTit .tit{display:inline-block; line-height:150%; color:#303030; font-weight:300; letter-spacing:-0.2px; vertical-align:middle}
.chatSearchbox .searchOpt{margin-right:2px}
.chatSearchbox .searchkey{display:flex; flex: 1 1 auto; align-items:center}
.chatSearchbox .searchkey .search{position:relative; width:32px; height:32px; margin-left:-38px; padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}
.chatSearchbox .searchkey .search i{font-size:16px}
.chatSearchbox .Groupbutton{position: absolute; right:8px}
.chatSearchbox .searchkey .search{position:relative; width:32px; height:32px;  padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}
.chatSearchbox .searchkey .set{position:relative; width:32px; height:32px;  padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}

/* 옵션 설정 검색창 */
.optionSearchbox{display:flex; align-items:center; z-index:1}
.optionSearchbox .Textinput{padding:0px 82px 0px 15px}
.optionSearchbox .searchTit{display:flex; align-items:center}
.optionSearchbox .searchTit .tit{display:inline-block; line-height:150%; color:#303030; font-weight:300; letter-spacing:-0.2px; vertical-align:middle}
.optionSearchbox .searchOpt{margin-right:2px}
.optionSearchbox .searchkey{display:flex; flex: 1 1 auto; align-items:center}
.optionSearchbox .searchkey .search{position:relative; width:32px; height:32px; margin-left:-38px; padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}
.optionSearchbox .searchkey .search i{font-size:16px}
.optionSearchbox .Groupbutton{position: absolute; right:8px}
.optionSearchbox .searchkey .set{position:relative; width:32px; height:32px;  padding:0; background:none; border:none; font-weight:300; color:#808080; border-radius:4px}
.optionSearchbox .Groupbutton .Button:after{content: ""; display:block; position:absolute; top:0px; right:-4px; width:1px; height:100%; background: #e7e7e7}
.optionSearchbox .Groupbutton .Button:last-child:after{display: none;}
.optionSearchbox .searchkey-detail{position:absolute; background: #fff;; border:1px solid #ededed; border-top:0; border-radius:0px 0px 16px 16px; width:auto; top:40px; padding:12px; box-shadow: 0px 5px 5px #00000005}
.optionSearchbox .searchkey-detail .Grouplabel{display:flex; gap:4px}
.optionSearchbox .searchkey-detail .Grouplabel label{flex:1 1 auto}
.optionSearchbox .searchkey-detail .ImageCheckbox.round.small span{display:block; text-align:center; line-height:1.8}


/* **************************************** *
 * CONTENTS LAYOUT : FIX
 * **************************************** */
.fixConWrap{display:flex; /*align-items:center;*/ align-items:flex-start}

.fixConWrap.member,
.fixConWrap.approval,
.fixConWrap.docreport,
.fixConWrap.dashboard,
.fixConWrap.docxls,
.fixConWrap.boardmng,
.fixConWrap.cart-library,
.fixConWrap.contact{display:flex; align-items:flex-start}
.fixConWrap.ocrtransform{display:flex; align-items:stretch}

.fixConWrap .fixCont1,
.fixConWrap .fixCont2,
.fixConWrap .fixCont3{flex:1 1 auto}


.fixConWrap.flex-col .fixCont1,
.fixConWrap.flex-col .fixCont2,
.fixConWrap.flex-col .fixCont3{width:100%}

.fixConWrap.member .fixCont1{min-width:280px; max-width:280px}

.fixConWrap.menu{height:calc(100% - 26px)}
.fixConWrap.menu .fixCont1{min-width:280px; max-width:280px}
.fixConWrap.menu .fixCont2{display:flex; flex-direction: column; margin-left: 24px;}

/* wms 팝업-조직/구성원 tree */
.fixConWrap.member .fixCont1.pop_group{min-width:360px; max-width:360px}

.fixConWrap.member .fixCont2{margin-left:15px}
.fixConWrap.approval .fixCont1{min-width:280px; max-width:280px}
.fixConWrap.approval .fixCont2{margin-left:15px}
.fixConWrap.approval .fixCont3{display:flex; flex-direction:column; min-width:460px; max-width:460px; margin-left:15px}

.layerpop-box .fixConWrap.approval .fixCont3{padding-top:0px;}
.layerpop-box .fixConWrap.approval .fixCont3 .columnBox > div{flex:none}

.fixConWrap.movectrl .fixCont1{margin-right:20px}
.fixConWrap.movectrl .fixCont2{margin-left:20px}
.fixConWrap.movectrl .fixMove{display:flex; flex-direction:column; align-items:center; margin:auto 0}
.fixConWrap.movectrl .fixMove .Button{margin:1px 0}
.fixConWrap.docreport .fixCont1{min-width:220px; max-width:220px}
.fixConWrap.docreport .fixCont2{margin-left:15px}
.fixConWrap.cart-library .fixCont1{min-width:280px; max-width:280px}
.fixConWrap.cart-library .fixCont2{display:flex; flex-direction:column; justify-content:flex-start; margin-left:40px}

.fixConWrap.boardmng .fixCont1{min-width:280px; max-width:280px}
.fixConWrap.boardmng .fixCont2{margin-left:15px}
.fixConWrap.dashboard .fixCont1{min-width:500px; max-width:500px}
.fixConWrap.dashboard .fixCont2{margin-left:15px}
.fixConWrap.ocrtransform .fixCont1{min-width:900px; max-width:900px}
.fixConWrap.ocrtransform .fixCont2{margin-left:15px}

.fixConWrap.pcessline{margin-left:-10px}
.fixConWrap.pcessline .fixCont1,
.fixConWrap.pcessline .fixCont2,
.fixConWrap.pcessline .fixCont3{min-width:33.33333%; max-width:33.33333%}
.fixConWrap.pcessline .fixCont1 .columnBox,
.fixConWrap.pcessline .fixCont2 .columnBox,
.fixConWrap.pcessline .fixCont3 .columnBox{margin-left:10px}
.fixConWrap.pcessline .pcessline-list li{display:flex; align-items:center; margin-bottom:5px; border:1px solid #e9e9e9; padding:16px 12px; border-radius:8px; cursor:pointer}
.fixConWrap.pcessline .pcessline-list li span{color:#505050; font-size:14px; letter-spacing:-0.5px}
.fixConWrap.pcessline .pcessline-list li:hover{background-color:#f4f4f4; border:1px solid #f4f4f4}
.fixConWrap.pcessline .pcessline-list li.liChecked{background-color:#f4f4f4; border:1px solid #f4f4f4}

/* Tooltip 잘림현상보완 */
.fixConWrap.pcessline .columnBox{overflow:visible}

.fixConWrap .fixCtrl{display:flex; align-items:center; margin-top:auto; padding:12px 5px; border-top:1px solid #dadada}
.fixConWrap .fixCtrl .buttonArea{margin-bottom:0}


.fixConWrap.duty {align-items: flex-start;}
.fixConWrap.duty .fixCont1,
.fixConWrap.duty .fixCont2,
.fixConWrap.duty .fixCont3
{border: 1px solid #dadada; background:#fff; padding: 16px; height: 100%; overflow:auto; border-radius: 8px; width: 33%;} 

.fixConWrap .writing-ty1.columnBox > .writing-list{border:none; padding:0}

.columnBox{display:flex; flex-direction:column; position:relative; padding:15px; border-radius: 8px; background:#fff; border:1px solid #e9e9e9; overflow:auto; box-sizing:border-box}
.columnBox .keySearchbox{padding:5px; border-bottom:1px solid #dadada; }
.Dialog .fillCont.approval .columnBox .keySearchbox{flex:none}
.columnBox .signalbox{padding:8px 12px; border-bottom:1px solid #dadada}
.columnBox .signalbox .tit{display:inline-block; font-size: 15px; font-weight: 600; color:#202020; letter-spacing: -0.2px;}

.columnBox .columnTit{display:flex; align-items:center; padding:5px; border-bottom:1px solid #e9e9e9}
.columnBox .columnTit .tit{flex:1 1 auto; position:relative; margin:0; padding:5px; background-color:#6c7080; font-size:13px; font-weight:300; color:#fff; text-align:center; letter-spacing:-0.8px; line-height:155%; vertical-align:middle}
.columnBox .tit-wrap{display:flex; align-items:center }
.columnBox .tit-wrap .tit{display:inline-block; font-size: 16px; font-weight: 600; color:#202020; letter-spacing: -0.2px;}
.columnBox .tit-wrap .txt{font-size: 13px; letter-spacing: -0.6px; color:#1e88e5}
.columnBox .info{display:flex; align-items:center; margin-top: 10px;}
.columnBox .info ul{display:flex; align-items:center}
.columnBox .info ul li{position:relative; margin-right:8px; padding-right:8px; font-weight:normal; font-size:14px; color:#909090; letter-spacing:-0.2px}
.columnBox .info ul li > span{font-size:15px}
.columnBox .info ul li:after{content:''; position:absolute; right:0; top:50%; width:1px; height:12px; margin-top:-6px; background:#afafaf}
.columnBox .info ul li:last-child:after{display:none}
.columnBox .Button.info{display:inline-flex; margin:0 2px}
.columnBox.lineless{border-color:transparent; padding:12px 0px}

.columnBox.flex-row{flex-direction:row; gap:4px}

.fixConWrap .form-wrap{display:flex; flex-wrap:wrap}
.fixConWrap .form-wrap .form-box{display:flex; background:#fff;padding:14px; margin:3px; height:110px; color:#555; align-items:center; box-shadow: 0 3px 6px 0 rgb(0 0 0 / 5%), 0 0 3px 0 rgb(0 0 0 / 10%); border:none; max-width:320px; border-radius: 8px; cursor:pointer}
.fixConWrap .form-wrap .form-box ul{margin-left: 12px;}
.fixConWrap .form-wrap .form-box ul::before{cursor:pointer; content: "\e93f"; font-family:'xeicon'; color:#c7c7c7; display:flex; justify-content:center; align-items:center; width:32px; height:32px; font-size:18px; border-radius: 50%; background:#f7f7f7; position: absolute; right:8px; top:38px}
.fixConWrap .form-wrap .form-box:hover ul::before{background:#f1f1f1;}
.fixConWrap .form-wrap .form-box ul li{font-size: 13px; line-height: 1.5;}
.fixConWrap .form-wrap .form-box .cover-img.cover-stamp.default{width:70px; height:70px }

.fixConWrap.ocrtransform .columnBox{height:100%}

.fixConWrap.contact{border:none; border-radius: 8px; overflow:hidden; height:600px}
.fixConWrap.contact .columnBox{border-radius:8px; border: 0px; padding:0px;}
.fixConWrap.contact .fixCont1{min-width:280px; max-width: 280px; border:1px solid #e9e9e9; border-radius: 8px 0px 0px 8px; }
.fixConWrap.contact .fixCont2{border:1px solid #e9e9e9; border-left: 0; border-right: 0;}
.fixConWrap.contact .fixCont3{min-width:340px; max-width: 340px; border-radius: 0px 8px 8px 0px }
.fixConWrap.contact .fixCont2 .columnBox{padding:12px;}
.fixConWrap.contact .treeBox{padding:12px}
.fixConWrap.contact .treeBox .jstree-default .jstree-node,
.fixConWrap.contact .treeBox .jstree-default .jstree-icon{padding-left: 0px;}

.fixConWrap.schedule{position:relative; height:calc(100% - 40px)}
.fixConWrap.schedule .fixCtrl{padding:12px 5px 0px 5px}
.fixConWrap.schedule .fixCont1{min-width:280px; max-width:280px;}
.fixConWrap.schedule .fixCont1 .columnBox{border-radius:8px 0px 0px 8px}
.fixConWrap.schedule .fixCont2 .columnBox{border-radius:0px 8px 8px 0px}



/* **************************************** *
 * CONTENTS BOX
 * **************************************** */
/* guide-box */
.guide-box{position:relative; padding:15px 20px; background-color:#f2edff; border-radius:10px}
.guide-box img{display:inline-block; vertical-align:middle}

/* guide-box2 */
.guide-box2{position:relative; background:#f6f5fa; padding:20px; display:flex; align-items:center}
.guide-box2:before{content:''; position:absolute; left:0; top:0; width:3px; height:100%; background-color: #5629ee}
.guide-box2 i{font-size:18px; color:#fff; background:#5629ee; width:25px; height:25px; border-radius:1000px; display:flex; align-items:center; justify-content:center}
.guide-box2 i.small{font-size:13px}
.guide-box2 .infoTxt01{margin-left:13px}
.guide-box2 .infoTxt01 strong{display:block}
.guide-box2 .info{position:absolute; top:20px; right:20px; font-size:13px; color:#888}
.guide-box2 .info span{margin-left:15px; position:relative}
.guide-box2 .info span:first-child{margin-left:0}
.guide-box2 .info span:first-child:before{content:''; position:absolute; top:2px; right:-10px; width:1px; height:15px; background:#ccc}

.guide-box2.gray{background:#fafafa}
.guide-box2.gray:before{background-color: #555}
.guide-box2.gray i{background:#555}
.guide-box2.gray .infoTxt01 strong{color:#555}

.guide-box2.red{background:#fff4f6}
.guide-box2.red:before{background-color: #e00e36}
.guide-box2.red i{background:#e00e36}
.guide-box2.red .infoTxt01 strong{color:#e00e36}


/* warning_box2 */
.warning_box2{position:relative; background:#fff4f6; padding:10px 20px; display:flex; align-items:center; border-radius: 10px;}
.warning_box2 i{font-size:16px; color:#fff; background:#e00e36; width:25px; height:25px; border-radius:1000px; display:flex; align-items:center; justify-content:center}
.warning_box2 .infoTxt01{margin-left:13px; color:#e00e36}

/* warning_box3 */
.warning_box3{position:relative; background:#fff4f6; padding:8px 12px; display:flex; gap:8px; align-items:center; border-radius: 10px;}
.warning_box3 i{font-size:20px; color:#e00e36; width:25px; height:25px; border-radius:1000px; display:flex; align-items:center; justify-content:center}
.warning_box3 .infoTxt01{color:#e00e36}

/* warning_box */
.warning_box{position:relative; background:#fae2e7; padding:15px 20px; display:flex; align-items:center}
.warning_box:before{content:''; position:absolute; left:50%; top:0; transform: translate(-50%, 0); width:100%; height:2px; background-color: #e00e36;}
.warning_box i{font-size:16px; color:#fff; background:#e00e36; width:25px; height:25px; border-radius:1000px; display:flex; align-items:center; justify-content:center}
.warning_box .infoTxt01{margin-left:13px; color:#e00e36}


/* form-box */
.form-box{position:relative; padding:15px 20px; overflow:auto; background:#fff; border:1px solid #e6e6e6}

/* form-box 팝업 wid100p */
.form-box.no-line{border:0; padding:0 20px 10px;}

/* info-box */
.info-box01{position:relative; padding:20px 15px; background:#fff; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9}
.info-box02{display:flex; gap:12px; padding:24px; align-items: center; justify-content: center; font-size: 14px; color:#555; letter-spacing: -0.6px}
.info-box02 i{font-size: 20px; color:#5629ee}
/* info-group */
.info-group{position:relative; margin-top:30px; padding:15px; border-radius:12px}
.info-group:first-child{margin-top:0}
.info-group.shadow{box-shadow:1px 5px 15px rgb(0 0 0 / 10%)}
.info-group.border{border:1px solid #eaeaea}

/* **************************************** *
 * FILL & HALF CONTENTS
 * **************************************** */
.fillCont{height:100%; box-sizing:border-box}


/* qms data badge */
.data_badge{position:relative}
.data_badge:after{content:''; position:absolute; top:-20px; right:-10px; background:#5629ee; width:5px; height:5px; border-radius:100%;}

/* **************************************** *
 * STEPER
 * **************************************** */
/*.steper-state{position:relative; width:700px; margin:0 auto}
.steper-state .state_list{margin-left:-34px}
.steper-state .state_list:after{content:''; display:block; clear:both}
.steper-state .state_list li{position:relative; float:left; width:25%; box-sizing:border-box}

.steper-state .state_box{margin-left:34px; text-align:center}
.steper-state .state_box .state_top{position:relative; height:132px; padding-top:88px; background-color:#fff; background-repeat:no-repeat; background-position:50% 25px; border:1px solid #ebebeb; border-radius:5px; box-sizing:border-box}
.steper-state .state_box .state_top .tit{font-size:15px; font-weight:300; letter-spacing:-1px; line-height:155%; color:#505050}
.steper-state .state_box .state_top .next{position:absolute; right:0; top:50%; width:26px; height:26px; margin-top:-12px; margin-right:-13px; padding-left:2px; background-color:#fff; border:2px solid #909090; border-radius:50%; color:#909090; box-sizing:border-box}
.steper-state .state_box .state_top .next i{line-height:22px; font-size:20px}
.steper-state .state_list li:last-child .state_box .state_top .next{display:none}
.steper-state .state_box .state_num{display:block; margin-top:5px; letter-spacing:-0.2px; line-height:135%; color:#808080; font-weight:normal; font-size:13px}

.steper-state .state_box.active .state_top{background-color:#f9f7ff; border:1px solid rgba(86, 41, 238, .2)}
.steper-state .state_box.active .state_top .tit{color:#5629ee}
.steper-state .state_box.active .state_top .next{border:2px solid #5629ee; color:#5629ee; z-index:1}
.steper-state .state_box.active .state_top .next
{
    -webkit-animation: status_next 1.8s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards;
    -moz-animation: status_next 1.8s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards;
    -o-animation: status_next 1.8s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards;
    animation: status_next 1.8s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards;
}
@-webkit-keyframes status_next{0%{margin-right:-13px; opacity:0;} 100%{margin-right:-49px; opacity:1}}
@-moz-keyframes status_next{0%{margin-right:-13px; opacity:0;} 100%{margin-right:-49px; opacity:1}}
@-o-keyframes status_next{0%{margin-right:-13px; opacity:0;} 100%{margin-right:-49px; opacity:1}}
@keyframes status_next{0%{margin-right:-13px; opacity:0;} 100%{margin-right:-49px; opacity:1}}

.steper-state .state_box.upload .state_top{background-image:url("/static/fw/images/contents/docpilot_step_upload.png")}
.steper-state .state_box.upload.active .state_top{background-image:url("/static/fw/images/contents/docpilot_step_upload_active.png")}
.steper-state .state_box.convert .state_top{background-image:url("/static/fw/images/contents/docpilot_step_convert.png")}
.steper-state .state_box.convert.active .state_top{background-image:url("/static/fw/images/contents/docpilot_step_convert_active.png")}
.steper-state .state_box.function .state_top{background-image:url("/static/fw/images/contents/docpilot_step_function.png")}
.steper-state .state_box.function.active .state_top{background-image:url("/static/fw/images/contents/docpilot_step_function_active.png")}
.steper-state .state_box.final .state_top{background-image:url("/static/fw/images/contents/docpilot_step_final.png")}
.steper-state .state_box.final.active .state_top{background-image:url("/static/fw/images/contents/docpilot_step_final_active.png")}
*/

/* **************************************** *
 * approval
 * **************************************** */ 
.aprv-wrap{display:flex; align-items:flex-start}
.aprv-wrap .sum-approval{display:none; flex-direction:column; min-width:135px; margin-right:20px; padding:10px 18px; background:#f8f8f8; border-radius:8px}
.aprv-wrap .sum-approval.active{display:flex}
.aprv-wrap .sum-approval .sum-tit,
.aprv-wrap .sum-approval .sum-cont{font-size:14px; letter-spacing:-0.5px; line-height:135%}
.aprv-wrap .sum-approval .sum-tit{display:inline-block; width:60px; color:#808080; font-weight:normal}
.aprv-wrap .sum-approval .sum-cont{color:#202020; font-weight:300}
 
.flag-approval{flex:1}
.flag-approval:after{content:''; display:block; clear:both}
.flag-approval .approval-list{display:flex; flex-wrap:wrap; float:right}
.flag-approval .approval-list li{flex:1; min-width:133px; max-width:133px}
.flag-approval .approval-box{display:flex; flex-direction:column; align-items:center; margin:2px; border:1px solid #ebebeb; border-radius:8px}

.flag-approval .approval-t,
.flag-approval .approval-p,
.flag-approval .approval-d{display:flex; align-items:center; justify-content:center; width:100%; height:28px; min-height:28px; padding:0 5px; text-align:center; border-top:1px solid #ebebeb; box-sizing:border-box}
.flag-approval .approval-d .memo{font-size:16px; margin-left:2px; cursor:pointer; color:#a4a4a4}
.flag-approval .approval-d .memo.ty2{font-size: 13px; background: #5629ee; margin-left:6px; border-radius: 50%; padding: 3px 2px 1px; color: #fff; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;}

.flag-approval .approval-t{border:0px}

.flag-approval .approval-s{display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%; height:52px; min-height:52px; text-align:center; box-sizing:border-box}
.flag-approval .approval-s img{display:inline-block; max-height:38px}

.flag-approval .approval-t .txt,
.flag-approval .approval-p .txt,
.flag-approval .approval-d .txt{display:block; font-size:13px; letter-spacing:-0.5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.flag-approval .approval-t .txt,
.flag-approval .approval-p .txt{color:#202020; font-weight:300}
.flag-approval .approval-d .txt{color:#505050}
.flag-approval .approval-box > div:last-child .txt{font-size:12px}


/* **************************************** *
 * COVER
 * **************************************** */
 .cover-img.cover-stamp{display:inline-block; margin:0; padding:0; font-size:0; vertical-align:middle}
 .cover-img.cover-stamp img{width:64px; height:64px; margin:0; padding:0}
 .cover-img.cover-stamp.small img{width:34px; height:34px}
 .cover-img.cover-stamp.default{position:relative; width:64px; height:64px; border:1px solid #ededed; background:#f9fafc}
 .cover-img.cover-stamp.default:before{content:'\ea4e'; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; right:0; bottom:0; font-family:xeicon; font-size:26px; color:#b2b2b2}
 .cover-img.cover-stamp.small.default{width:34px; height:34px;}
 .cover-img.cover-stamp.small.default:before{font-size: 20px;}
 .cover-img.cover-logo{display:inline-block; margin:0; padding:0; font-size:0; vertical-align:middle}
 .cover-img.cover-logo img{max-height:52px; margin:0; padding:0}
 .cover-img.cover-logo.default{position:relative; width:64px; height:64px; border:1px solid #ededed; background:#f9fafc}
 .cover-img.cover-logo.default:before{content:'\ea4e'; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; right:0; bottom:0; font-family:xeicon; font-size:26px; color:#b2b2b2}


/* **************************************** *
 * BADGE
 * **************************************** */
.badge{display:inline-block; position:relative; min-width:22px; height:22px; padding:5px 8px; padding-bottom:0; background:rgba(86,41,238,.9); text-align:center; color:#fff; font-size:12px; font-weight:300; font-style:normal; line-height:100%; border-radius:200px; vertical-align:middle; white-space:nowrap; box-sizing:border-box}
.badge.alarm{background:#fa196d}
.badge-color{display:inline-block; height:20px; line-height:20px; padding:0 8px; margin-right:3px; flex:none; text-align:center; font-size:13px; border-radius:16px; vertical-align:middle; box-sizing:border-box; min-width:18px}
.badge-color.small{height:16px; line-height:16px; padding:0 4px; margin-right:3px; font-size:11px;min-width:30px}

.badge-color.color01{background:#f10f3a; color:#fff}
.badge-color.color02{background:#ff6a00; color:#fff}
.badge-color.color03{background:#fdc23e; color:#fff}
.badge-color.color04{background:#75d701; color:#fff}
.badge-color.color05{background:#3fc495; color:#fff}
.badge-color.color06{background:#32c4c0; color:#fff}
.badge-color.color07{background:#22d6dd; color:#fff}
.badge-color.color08{background:#a38af7; color:#fff}
.badge-color.color09{background:#8364e8; color:#fff}
.badge-color.color10{background:#4265d6; color:#fff}
.badge-color.color11{background:#33beff; color:#fff}
.badge-color.color12{background:#0061ff; color:#fff}
.badge-color.color13{background:#5f21c7; color:#fff}
.badge-color.color14{background:#103783; color:#fff}
.badge-color.color15{background:#fa167c; color:#fff}
.badge-color.color16{background:#ff8379; color:#fff}
.badge-color.color17{background:#77af9c; color:#fff}
.badge-color.color18{background:#02636c; color:#fff}
.badge-color.color19{background:#a3a1a1; color:#fff}
.badge-color.color20{background:#555555; color:#fff}
.badge-color.color21{background:#fea626; color:#fff}
.badge-color.color22{background:#1c8cc0; color:#fff}
/*.badge-color.color22{background:#fff; color:#333} - 변경전*/
.badge-color.color23{background:#dcdcdc; color:#fff}
.badge-color.color24{background:#e1d7ff; color:#fff}
.badge-color.color25{background:#eae4ff; color:#545357}
.badge-color.color26{background:#ffd594; color:#fff}
.badge-color.color27{background:#9ce992; color:#fff}
.badge-color.color28{background:#ff2a00; color:#fff}
.badge-color.color29{background:#eafcd5; color:#fff}
.badge-color.color30{background:#d1e7b7; color:#fff}

.badge-color.color01.light{background:#fae2e7; color:#e00e36}
.badge-color.color02.light{background:#ffe3cf; color:#ff6a00}
.badge-color.color03.light{background:#fff1b9; color:#c29c05}
.badge-color.color04.light{background:#eafcd5; color:#66b409}
.badge-color.color05.light{background:#ddf5ed; color:#37ae84}
.badge-color.color06.light{background:#d6f2f1; color:#2cada9}
.badge-color.color07.light{background:#d8f8f9; color:#0aa9af}
.badge-color.color08.light{background:#ebe6fb; color:#937cdf}
.badge-color.color09.light{background:#d7cdf8; color:#755ad0}
.badge-color.color10.light{background:#d4dcf4; color:#4265d6}
.badge-color.color11.light{background:#dff5ff; color:#26a2dc}
.badge-color.color12.light{background:#deeafd; color:#0061ff}
.badge-color.color13.light{background:#d9ccef; color:#5f21c7}
.badge-color.color14.light{background:#ced5e4; color:#103783}
.badge-color.color15.light{background:#ffe3f0; color:#fa167c}
.badge-color.color16.light{background:#fce5e3; color:#e8736a}
.badge-color.color17.light{background:#d9efe7; color:#588b7a}
.badge-color.color18.light{background:#cfe2e4; color:#02535b}
.badge-color.color19.light{background:#efefef; color:#8d8a8a}
.badge-color.color20.light{background:#d8d8d8; color:#555555}
.badge-color.color21.light{background:#fff0d9; color:#ec9619}
.badge-color.color22.light{background:#dff5ff; border:1px solid #c3dce8; color:#26a2dc}
.badge-color.color23.light{background:#ffffff; border:1px solid #dedede; color:#333}
.badge-color.color24.light{background:#fbf9ff; border:1px solid #8b6bf5; color:#8b6bf5}
.badge-color.color25.light{background:#ffffff; border:1px solid #eae4ff; color:#545357}
.badge-color.color26.light{background:#ffffff; border:1px solid #ffd594; color:#ffd594}
.badge-color.color27.light{background:#ffffff; border:1px solid #9ce992; color:#9ce992}
.badge-color.color28.light{background:#fff1ee; border:1px solid #ffd1c8; color:#ff2a00}
.badge-color.color29.light{background:#eafcd5; color:#97b574}
.badge-color.color30.light{background:#d1e7b7; color:#97b574}

.badge-color .cont-txt{display:block; font-size:13px; letter-spacing:-0.2px}
.badge-color > span{font-size:13px !important}
.badge-color.medium{height:30px; padding:5px 10px}
.badge-color.large{height:35px; padding:8px 10px 8px}
.badge-color.small > span{font-size:11px !important}

.badge-bd-wrap{display:flex; gap:4px; padding:0px 8px}
.badge-bd-wrap .columnBox{flex-direction: row; padding:4px; align-items:center; overflow: hidden;}
 

/* **************************************** *
 * SIGNAL
 * **************************************** */
 /* signal-color */
.signal-color{display:inline-block; position:relative; padding-left:11px; vertical-align:middle}
.signal-color:before{content:""; position:absolute; top:4px; left:0; width:11px; height:11px; background:#b6b9c5; border-radius:50%; box-sizing:border-box}
.signal-color.small{padding-left:7px}
.signal-color.small:before{width:7px; height:7px}
.signal-color.color01:before{background:#f10f3a}
.signal-color.color02:before{background:#ff6a00}
.signal-color.color03:before{background:#fdc23e}
.signal-color.color04:before{background:#75d701}
.signal-color.color05:before{background:#3fc495}
.signal-color.color06:before{background:#32c4c0}
.signal-color.color07:before{background:#22d6dd}
.signal-color.color08:before{background:#a38af7}
.signal-color.color09:before{background:#8364e8}
.signal-color.color10:before{background:#4265d6}
.signal-color.color11:before{background:#33beff}
.signal-color.color12:before{background:#0061ff}
.signal-color.color13:before{background:#5f21c7}
.signal-color.color14:before{background:#103783}
.signal-color.color15:before{background:#fa167c}
.signal-color.color16:before{background:#ff8379}
.signal-color.color17:before{background:#77af9c}
.signal-color.color18:before{background:#02636c}
.signal-color.color19:before{background:#a3a1a1}
.signal-color.color20:before{background:#555555}
.signal-color.color21:before{background:#fea626}
.signal-color.color22:before{background:#dff5ff; border:1px solid #c3dce8;}
.signal-color.color23:before{background:#ffffff; border:1px solid #dedede;}
.signal-color.color24:before{background:#e3dcfa}
.signal-color.color25:before{background:#ffffff; border:1px solid #c9baff;}
.signal-color.color26:before{background:#ffd594}
.signal-color.color27:before{background:#9ce992}
.signal-color.color28:before{background:#ff2a00}
.signal-color.color29:before{background:#eafcd5}
.signal-color.color30:before{background:#d1e7b7}
.signal-color.color31:before{background:#ffd93d}
.signal-color .cont-txt{display:block; padding-left:4px; font-size:13px; letter-spacing:-0.2px; color:#707070; line-height:150%}
.signal-color .cont-txt.fs14{font-size: 14px}
.signal-color.only-signal{height:11px;}
.signal-color.only-signal:before{top:0px;}


/* 상태표시 - 아이콘 */
.ico_state{display:flex}
.ico_state i{font-size:17px; vertical-align:middle}
.ico_state span{font-size:13px; color: #707070; letter-spacing:-0.2px; margin-left:3px}


 /* docsignal-color */
.docsignal-color{display:inline-block; position:relative; padding-left:16px; vertical-align:middle}
.docsignal-color:before{content:""; position:absolute; top:4px; left:0; width:16px; height:11px; background:#b6b9c5; border-radius:0; box-sizing:border-box}
.docsignal-color.color01:before{background:#95e3ed; background:-webkit-linear-gradient(136deg, #95e3ed, #95e3ed); background:-moz-linear-gradient(136deg, #95e3ed, #95e3ed); background:linear-gradient(136deg, #95e3ed, #95e3ed); border:1px solid #2bc7db}
.docsignal-color.color02:before{background:#ffdc7f; background:-webkit-linear-gradient(136deg, #ffdc7f, #ffdc7f); background:-moz-linear-gradient(136deg, #ffdc7f, #ffdc7f); background:linear-gradient(136deg, #ffdc7f, #ffdc7f); border:1px solid #ffba00}
.docsignal-color.color03:before{background:#ced88a; background:-webkit-linear-gradient(136deg, #ced88a, #ced88a); background:-moz-linear-gradient(136deg, #ced88a, #ced88a); background:linear-gradient(136deg, #ced88a, #ced88a); border:1px solid #9eb216}
.docsignal-color .cont-txt{display:block; padding-left:4px; font-size:13px; letter-spacing:-0.2px; color:#707070; line-height:150%}

/* signal-list */
.signal-list{display:inline-block; vertical-align:middle}
.signal-list:after{content:''; display:block; clear:both}
.signal-list > li{float:left; margin-left:8px}
.signal-list > li:first-child{margin-left:0}

.signal-list-wrap{position:relative; display:inline-block; align-items:center; height:26px; border:1px solid #e0e0e0; border-radius: 8px; padding:0px 6px; background: #fff;}
.signal-list-wrap .tit{font-size: 13px; letter-spacing: -0.6px; color:#555}
.signal-list-wrap .signal-list{display:none; position:absolute; left:-1px; top:-1px; width: max-content;  height:26px; border:1px solid #e0e0e0; border-radius: 8px; padding:0px 8px; background: #fff; z-index: 10}
.signal-list-wrap:hover .signal-list{display: inline-block;}

.stitR .signal-list-wrap .signal-list{left:initial; right: 0px}

/* 범례 - 라벨 태그 */
.signal-list-wrap .signal-list > span{font-size:13px; padding-left:4px; letter-spacing:-0.2px; color: #707070; line-height:150%}


 /* signal-square */
.signal-color.square{display:inline-block; position:relative; padding-left:16px; vertical-align:middle}
.signal-color.square:before{content:""; position:absolute; top:4px; left:0; width:16px; height:11px; background:#b6b9c5; border-radius:0; box-sizing:border-box}
.signal-color.square .cont-txt{display:block; padding-left:4px; font-size:13px; letter-spacing:-0.2px; color:#707070; line-height:150%}
.signal-color.square.color01:before{background:#f10f3a}
.signal-color.square.color02:before{background:#ff6a00}
.signal-color.square.color03:before{background:#fdc23e}
.signal-color.square.color04:before{background:#75d701}
.signal-color.square.color05:before{background:#3fc495}
.signal-color.square.color06:before{background:#32c4c0}
.signal-color.square.color07:before{background:#22d6dd}
.signal-color.square.color08:before{background:#a38af7}
.signal-color.square.color09:before{background:#8364e8}
.signal-color.square.color10:before{background:#4265d6}
.signal-color.square.color11:before{background:#33beff}
.signal-color.square.color12:before{background:#0061ff}
.signal-color.square.color13:before{background:#5f21c7}
.signal-color.square.color14:before{background:#103783}
.signal-color.square.color15:before{background:#fa167c}
.signal-color.square.color16:before{background:#ff8379}
.signal-color.square.color17:before{background:#77af9c}
.signal-color.square.color18:before{background:#02636c}
.signal-color.square.color19:before{background:#a3a1a1}
.signal-color.square.color20:before{background:#555555}
.signal-color.square.color21:before{background:#fea626}
.signal-color.square.color22:before{background:#dff5ff; border:1px solid #c3dce8;}
.signal-color.square.color23:before{background:#ffffff; border:1px solid #dedede;}
/* 변경전
.signal-color.square.color24:before{background:#c1ee8d}
.signal-color.square.color25:before{background-color:#e3dcfa}
.signal-color.square.color26:before{background-color:#fcff5c}
.signal-color.square.color27:before{background-color:#ffd594}
.signal-color.square.color28:before{background-color:#9ce992}*/

.signal-color.square.color24:before{background:#e3dcfa}
.signal-color.square.color25:before{background:#ffffff; border:1px solid #c9baff;}
.signal-color.square.color26:before{background:#ffd594}
.signal-color.square.color27:before{background:#9ce992}
.signal-color.square.color28:before{background:#ff2a00}
.signal-color.square.color29:before{background:#eafcd5}
.signal-color.square.color30:before{background:#d1e7b7}

 /* signal-txt */
.signal-color.txt{display:inline-block; position:relative; padding:0px 2px; vertical-align:middle; color:#000; border:1px solid #000}
.signal-color.txt:before{display:none}
.signal-color.txt .cont-txt{display:block; padding:0px 2px; font-size:13px; letter-spacing:-0.2px; color:inherit; line-height:150%}
.signal-color.txt.color01{border-color:#0041ff; color:#0041ff}
.signal-color.txt.color02{border-color:#ff4a97; color:#ff4a97}


/* **************************************** *
 * LABEL
 * **************************************** */
.Label-color{display:inline-block; height:27px; line-height:150%; padding:3px 10px 3px; text-align:center; border-radius:5px; vertical-align:middle; box-sizing:border-box}
.Label-color.small{display:inline-block; height:18px; line-height:20px; padding:0 6px; text-align:center; font-size:13px; border-radius:5px; vertical-align:middle; box-sizing:border-box}
.Label-color.color01{background:#f10f3a; color:#fff}
.Label-color.color02{background:#ff6a00; color:#fff}
.Label-color.color03{background:#fdc23e; color:#fff}
.Label-color.color04{background:#75d701; color:#fff}
.Label-color.color05{background:#3fc495; color:#fff}
.Label-color.color06{background:#32c4c0; color:#fff}
.Label-color.color07{background:#22d6dd; color:#fff}
.Label-color.color08{background:#a38af7; color:#fff}
.Label-color.color09{background:#8364e8; color:#fff}
.Label-color.color10{background:#4265d6; color:#fff}
.Label-color.color11{background:#33beff; color:#fff}
.Label-color.color12{background:#0061ff; color:#fff}
.Label-color.color13{background:#5f21c7; color:#fff}
.Label-color.color14{background:#103783; color:#fff}
.Label-color.color15{background:#fa167c; color:#fff}
.Label-color.color16{background:#ff8379; color:#fff}
.Label-color.color17{background:#77af9c; color:#fff}
.Label-color.color18{background:#02636c; color:#fff}
.Label-color.color19{background:#a3a1a1; color:#fff}
.Label-color.color20{background:#555555; color:#fff}
.Label-color.color21{background:#fea626; color:#fff}
.Label-color.color22{background:#1c8cc0; color:#fff}
.Label-color.color23{background:#dcdcdc; color:#fff}
.Label-color.color24{background:#e1d7ff; color:#fff}
.Label-color.color25{background:#eae4ff; color:#545357}
.Label-color.color26{background:#ffd594; color:#fff}
.Label-color.color27{background:#9ce992; color:#fff}
.Label-color.color28{background:#ff2a00; color:#fff}
.Label-color.color29{background:#eafcd5; color:#fff}
.Label-color.color30{background:#d1e7b7; color:#fff}

.Label-color.color01.light{background:#fae2e7; color:#e00e36}
.Label-color.color02.light{background:#ffe3cf; color:#ff6a00}
.Label-color.color03.light{background:#fff1b9; color:#c29c05}
.Label-color.color04.light{background:#eafcd5; color:#66b409}
.Label-color.color05.light{background:#ddf5ed; color:#37ae84}
.Label-color.color06.light{background:#d6f2f1; color:#2cada9}
.Label-color.color07.light{background:#d8f8f9; color:#0aa9af}
.Label-color.color08.light{background:#ebe6fb; color:#937cdf}
.Label-color.color09.light{background:#d7cdf8; color:#755ad0}
.Label-color.color10.light{background:#d4dcf4; color:#4265d6}
.Label-color.color11.light{background:#dff5ff; color:#26a2dc}
.Label-color.color12.light{background:#deeafd; color:#0061ff}
.Label-color.color13.light{background:#d9ccef; color:#5f21c7}
.Label-color.color14.light{background:#ced5e4; color:#103783}
.Label-color.color15.light{background:#ffe3f0; color:#fa167c}
.Label-color.color16.light{background:#fce5e3; color:#e8736a}
.Label-color.color17.light{background:#d9efe7; color:#588b7a}
.Label-color.color18.light{background:#cfe2e4; color:#02535b}
.Label-color.color19.light{background:#efefef; color:#8d8a8a}
.Label-color.color20.light{background:#d8d8d8; color:#555555}
.Label-color.color21.light{background:#fff0d9; color:#ec9619}
.Label-color.color22.light{background:#dff5ff; border:1px solid #c3dce8; color:#26a2dc}
.Label-color.color23.light{background:#ffffff; border:1px solid #dedede; color:#666}
.Label-color.color24.light{background:#fbf9ff; border:1px solid #8b6bf5; color:#8b6bf5}
.Label-color.color25.light{background:#ffffff; border:1px solid #eae4ff; color:#545357}
.Label-color.color26.light{background:#fff; border:1px solid #ffd594; color:#ffd594}
.Label-color.color27.light{background:#ffffff; border:1px solid #9ce992; color:#9ce992}
.Label-color.color28.light{background:#fff1ee; border:1px solid #ffd1c8; color:#ff2a00}
.Label-color.color29.light{background:#eafcd5; color:#97b574}
.Label-color.color30.light{background:#d1e7b7; color:#97b574}

.Label-color.line{background:transparent; border:1px solid #fff; color:#fff}
.Label-color.color01.line{background:transparent; border:1px solid #f10f3a; color:#f10f3a}

/* 그리드 합계 백그라운드 색상 */
.Label-color.total{background:lightgoldenrodyellow}
.Label-color.total2{background:#e7e6e2}

.Label-color .cont-txt{display:block; font-size:13px !important; letter-spacing:-0.2px; line-height:150%; color:inherit !important; text-overflow:clip; white-space:initial; overflow:initial}
.Label-color span{text-overflow:initial !important; white-space:initial !important; overflow:initial !important}
.Label-color.medium{height:30px; padding:5px 13px 5px; font-size:13px}
.Label-color.large{height:35px; padding:6px 13px 7px;  font-size:14px !important}
.Label-color.small .cont-txt{font-size:12px !important; line-height: 1.5}
.Label-color.large .cont-txt{font-size:14px !important}

.Label-color-wrap{display:flex; align-items: center; flex-wrap:wrap; gap:2px;}

.group_label_wrap{display:flex}
.group_label1{background:#5629ee; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label2{background:#eae5fd; color:#5629ee; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all}
.group_label3{background:#bd4d3a; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label4{background:#f58f4c; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label5{background:#649860; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label6{background:#34503b; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label7{background:#aec4ba; color:#34503b; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all}
.group_label8{background:#462852; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label9{background:#75529b; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label10{background:#bc8999; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label11{background:#824b6a; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label12{background:#1f3263; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label13{background:#009cbb; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label14{background:#93b0dc; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label15{background:#aea49a; color:#463d34; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all}
.group_label16{background:#00ada3; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label17{background:#c0ca5f; color:#545925; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all} 
.group_label18{background:#a79ba1; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label19{background:#5f6062; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label20{background:#f4ba66; color:#8b570d; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all}
.group_label21{background:#93b0b6; color:#fff; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; word-break:keep-all}
.group_label22{background:#ebbd99; color:#856144; border-radius:1000px; padding:2px 8px; font-size:13px; margin-right:5px; vertical-align:middle; flex:none; font-weight:300; word-break:keep-all}



/* **************************************** *
 * module
 * **************************************** */

.module{display:block; width:14px; height:14px; margin-right:4px; margin-bottom:-2px; box-sizing:border-box; border:1px solid #d3c5ff; background:#ececff; }
.module-color{display:inline-block; font-size: 13px; border:1px solid; margin:2px}
.module-color.color01{background:#e8e7ea; color:#333; border-color:#d5d5d5}
.module-color.color02{background:#e7cdc3; color:#333; border-color:#ddb9ab}
.module-color.color03{background:#d4e5dc; color:#333; border-color:#afc9b9}
.module-color.color04{background:#f0d5e5; color:#333; border-color:#dec0d2}
.module-color.color05{background:#ced6e8; color:#333; border-color:#b5bed2}
.module-color.color06{background:#e5dbef; color:#333; border-color:#d0c3de}
.module-color.color07{background:#dddfd3; color:#333; border-color:#c3c8a9}
.module-color.color08{background:#d2dee3; color:#333; border-color:#abc6d1}
.module-color.color09{background:#e5e4e3; color:#333; border-color:#cecac1}
.module-color.color10{background:#b2ddf0; color:#333; border-color:#92bcce}
.module-color.color11{background:#ebe2bd; color:#333; border-color:#d8cd9f}
.module-color.color12{background:#deeafd; color:#333; border-color:#b1c5e6}
.module-color.color16{background:#ff8379; color:#fff; border-color:#ed7369}
.module-color.tag-box .del:before{color:#0000006b}
.module.module-color{margin:0px; margin-right:4px; margin-bottom:-2px;}



/* **************************************** *
 * icon-label
 * **************************************** */
.ico-label{display:inline-flex; align-items:center; position:relative; padding-left:11px;}
.ico-label > i{font-size:14px; color:#aaa}
.ico-label .cont-txt{display:block; padding-left:4px; font-size:13px; letter-spacing:-0.2px; color:#707070; line-height:150%}

.ico-label.color03 > i{color:#fdc23e}

.ico-label.round > i{display:flex; align-items:center; justify-content:center; border-radius: 50%; box-sizing: border-box; font-size:12px; background:#fff; min-width: 18px; height: 18px; line-height:18px; font-weight:bold}

.ico-label.round.color09 i{background:#a38af7; color:#fff} 
.ico-label.round.color13 i{background:#5f21c7; color:#fff} 
.ico-label.round.color15 i{background:#fa167c; color:#fff} 
.ico-label.round.color19.light i{background:#d9d9d9; color:#fff} 
.ico-label.round.color09.line i{background:#fff; color:#a38af7; border:2px solid #a38af7} 
.ico-label.round.color13.line i{background:#fff; color:#5f21c7; border:2px solid #5f21c7} 


/* **************************************** *
 * TOGGLE
 * **************************************** */
.toggle-group .toggle-content{display:none}
.toggle-group .toggle-arrow.active i{transform:rotate(-180deg)}
 

/* **************************************** *
 * SIDER
 * **************************************** */
.sider-group{position:absolute; top:0; bottom:0; z-index:999; box-sizing:border-box}
.sider-group.popup{top:10px}
.sider-group.right{right:0}
.sider-group.left{left:0}
.sider-group .sider-open
{
	display:flex; align-items:center; justify-content:center;
	position:absolute; top:50%; left:-24px; width:24px; height:50px;
	margin-top:-25px; padding:0; color:#fff;
	background-color:rgba(32,36,40,.8); font-size:24px; border:0; border-radius:6px 0 0 6px; cursor:pointer; z-index:1
}
.sider-group .sider-open.active i{transform:rotate(-180deg)}
.sider-content{display:none; position:relative; height:100%; padding:10px; background:#fff; border:1px solid #e3e3e3; box-shadow:0 30px 30px rgb(0 0 0 / 10%)}


/* **************************************** *
 * text-indent
 * **************************************** */
.txtind1{text-indent:-10px;}


/* **************************************** *
 * require
 * **************************************** */
/*
.require{display:inline-block; position:relative; top:-3px; font-size:0; width:5px; height:5px; margin-left:3px; background:#5629ee; border-radius:50%; vertical-align:middle}
*/
.require{display:inline-block; position:relative; top:-5px; margin-left:3px; vertical-align:middle; font-size: 0px; color:transparent}
.require:before{content:"\f186"; font-family:"remixicon"; font-size: 9px; color:#fa196d}


/* **************************************** *
 * background_blur
 * **************************************** */
.bg_blur{position:relative}
.bg_blur:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(255,255,255,0.75); z-index:1}


/* **************************************** *
 * SIDEMENU
 * **************************************** */
.sidemenu{position:fixed; background:#5629ee; margin-left:-49px; top:125px;  z-index:2; width: 16px; height:36px; border-radius: 0px 8px 8px 0px; display:flex; align-items:center}
.sidemenu::after{content:"\e996"; display:flex; align-items:center; justify-content:center;  width:16px; height:36px; font-family:"xeicon"; color:#fff; font-size:19px}
.sidemenu .project-list{position:fixed; display:none; width:270px; height:calc(100% - 65px); background:#f7f7f7bd; backdrop-filter:blur(8px); padding:16px 18px 16px 24px; top:65px; box-shadow: 1px 5px 10px rgb(0 0 0 / 10%); overflow:auto}
.sidemenu:hover .project-list{display:block;}
.sidemenu .project-list h4.tit{font-size: 22px; margin:16px 8px; letter-spacing: -0.8px; color:#333; }
.sidemenu .project-list h4.tit i{color:#5629ee; font-size: 17px; margin-right: 4px;} 
.sidemenu .project-list > ul li{position:relative; display:flex; flex-direction:column; letter-spacing: -0.6px; color:#202020; background:#fff; padding:12px 8px; margin:6px 0px; border:1px solid #e9e9e9; border-radius: 10px; cursor:pointer; justify-content:center; }
.sidemenu .project-list > ul li:hover,
.sidemenu .project-list > ul li:active{box-shadow: 0px 0px 5px rgb(86 41 238 / 15%);}
.sidemenu .project-list > ul li .tit{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:180px; font-weight: 300; font-size: 16px; display:flex; flex-direction:column}
.sidemenu .project-list > ul li .tit .code{font-size: 14px; margin-right: 8px; color:#5629ee}
.sidemenu .project-list > ul li.active{box-shadow: 0px 0px 5px rgb(86 41 238 / 40%); background:#f8f6ff; }
.sidemenu .project-list > ul li:hover:after{content: "\e929"; font-family:'xeicon'; width:20px; color:#5629ee ;height:20px; position:absolute; right:10px; top:12px; background:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow:1px 2px 11px rgb(86 41 238 / 18%)}
.sidemenu .project-list > ul li.active:after{content: "\e929"; font-family:'xeicon'; width:20px; color:#fff ;height:20px; position:absolute; right:10px; top:12px; background:#5629ee; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);}
.sidemenu .project-list > ul li .state{font-size: 12px; color:#999; width:fit-content; padding:0px 8px; border-radius:20px; background:#555; color:#fff}
.sidemenu .project-list > ul li .state.color01{background:#5629ee;}
.sidemenu .project-list > ul li .state.color02{background:#f34444;}
.sidemenu .project-list > ul li .state.color03{background:#e0f7d9; color:#318e4d}
.sidemenu .project-list > ul li .date{color:#a1a1a1; display:flex;align-items:center;  }
.sidemenu .project-list > ul li .date i{margin-right:2px; width:18px; font-size: 17px;}
.sidemenu .project-list > ul li .date span{font-size: 13px;  margin:0px 4px; letter-spacing: -0.6px;}
.sidemenu .project-list > ul li .writer{display:flex; align-items:center;  }
.sidemenu .project-list > ul li .writer i{color:#a1a1a1; margin-right:2px; width:18px}
.sidemenu .project-list > ul li .writer span{margin:0px 4px; font-size: 14px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:86px;}
.sidemenu .project-list > ul li .bottom{display:flex; align-items:center; justify-content:space-between; margin-top:2px;}
.sidemenu .project-list > ul li .bottom.ty2{align-items:flex-start; justify-content:flex-start}
.sidemenu .project-list > ul li .bottom.ty2 i{margin-right:2px; width:18px; color:#a1a1a1; font-size: 17px;}

.sidemenu .project-list > ul li .bottom.ty2 .writer .Label-color{border-radius: 16px; height:17px; padding:0px 2px; flex:none}
.sidemenu .project-list > ul li .bottom.ty2 .writer .Label-color span.cont-txt{width:initial;  font-size: 11px !important; line-height:1.7; }
.sidemenu .project-list > ul li .bottom.ty2 .writer span{width:150px}
.sidemenu .project-list > ul li .customer{font-size: 15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:180px; margin-top:4px;}
.sidemenu .project-list > ul li .customer span.label{font-size: 12px; background:#5b5866; padding: 1px 4px; border-radius:4px; color:#fff; margin-right:4px;}


.sidemenu .project-list.shortcut > ul li:hover:after{content: "\EA6E"; font-family:'remixicon'; width:20px; color:#5629ee ;height:20px; position:absolute; right:10px; top:12px; background:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center; box-shadow: 0px 0px 5px rgb(86 41 238 / 15%);}
.wms-layout .sidemenu{margin-left:-29px; z-index:2;}

.sidemenu .cont-wrap{position:fixed; display:none; width:300px; flex-direction:column; height:calc(100% - 65px); background:#f7f7f7bd; backdrop-filter:blur(8px); padding:16px 18px 16px 24px; top:65px; box-shadow: 1px 5px 10px rgb(0 0 0 / 10%); overflow:auto}
.sidemenu:hover .cont-wrap{display:flex;}
.sidemenu .cont-wrap .columnBox{padding:8px 14px}
.sidemenu .cont-wrap .writing-ty1 .writing-list{padding-top: 0;}

.sidemenu.right{position:fixed; background:transparent; right:0px; margin-left: 0; top:125px;  z-index:2; width: 0px; height:0px; border-radius: 0px 8px 8px 0px; display:flex; align-items:center}
.sidemenu.right::after{content:""; display:flex; align-items:center; justify-content:center;  width:16px; height:36px; font-family:"xeicon"; color:#fff; font-size:19px}
.sidemenu.right .project-list{position:fixed; display:block; width:270px; height:calc(100% - 65px); background:#f7f7f7bd; backdrop-filter:blur(8px); padding:16px 18px 16px 24px; top:65px; right:100px; box-shadow: 1px 5px 10px rgb(0 0 0 / 10%); overflow:auto}

.sidemenu.right .cont-wrap{position:fixed; display:none; width:300px; flex-direction:column; height:calc(100% - 65px); background:#f7f7f7bd; backdrop-filter:blur(8px); right:0px; padding:16px 18px 16px 24px; top:65px; box-shadow:-3px 4px 10px rgb(0 0 0 / 10%); overflow:hidden;}
.sidemenu.right:hover .cont-wrap{display:flex;}
.sidemenu.right .cont-wrap .Button.close{position:absolute; right:16px; top:12px; color:#fff; border-radius: 50%; background:#5b586645;  padding:4px 5px; }
.sidemenu.right .cont-wrap .Button.close:hover{background:#fff;  box-shadow: 0px 0px 12px rgb(0 0 0 / 10%); color:#5b5866}
.sidemenu.right .cont-wrap .columnBox{padding:8px 14px}
.sidemenu.right .cont-wrap .columnBox.fillCont{height:calc(100% - 50px)}
.sidemenu.right .cont-wrap .writing-ty1 .writing-list{padding-top: 0;}

.slide-panel{position:fixed; top:0; right:-850px; width:860px; min-width:860px; height:100%; background: #f7f7f7bd; backdrop-filter:blur(8px); box-shadow:-3px 4px 10px rgb(0 0 0 / 10%); transition:right 0.1s ease; padding:20px; z-index:1000;}
.toggle-handle{position:absolute; top:118px; left:-66px; min-width:65px; height:40px; padding:0 20px; background-color: #a3a1a1; color: #fff; cursor:pointer; display:flex; align-items:center; justify-content:center; border-top-left-radius:1000px; border-bottom-left-radius:1000px; z-index:1100; box-shadow:-1px 4px 8px rgb(0 0 0 / 18%)}


/* **************************************** *
 * TUTORIAL
 * **************************************** */
 .tutorial-guide{display:none; position:absolute; z-index:2001}
 .tutorial-guide.active{display:block}
 .tutorial-guide.message-top .tutorial-message{margin-bottom:15px}
 .tutorial-guide.message-down .tutorial-message{margin-top:15px}
 .tutorial-sector{position:relative; background:#fff; border-radius:5px; box-shadow:1px 5px 10px rgb(0 0 0 / 10%)}
 .tutorial-sector .num
{
 	display:flex; align-items:center; justify-content:center;
 	position:absolute; top:-11px; left:-11px; width:29px; height:29px; background:#5529ec; text-align:center;
 	color:#fff; font-size:15px; font-weight:300; border-radius:50%
 }
 
 .tutorial-sector .tit-th{display:inline-block; padding:8px 15px 8px 25px; font-size:14px; text-align:left; color:#202020; line-height:1.5; font-weight:300; letter-spacing:-0.5px; vertical-align:middle}
 
 .tutorial-message{display:flex; align-items:flex-start; position:relative; padding:18px 20px; background:linear-gradient(45deg, #be52f2, #5629ee); white-space:nowrap; box-sizing:border-box; z-index:4; box-shadow:1px 5px 10px rgb(0 0 0 / 10%)}
 .tutorial-message i{flex:none; position:relative; top:-2px; margin-right:5px; color:#fff; font-size:24px}
 .tutorial-message .message{display:flex; flex-direction:column}
 .tutorial-message .message p{line-height:135%; color:#fff; font-size:15px; letter-spacing:-0.5px}
 
 .tutorial-guide.message-top .tutorial-message{border-radius:15px 15px 15px 0}
 .tutorial-guide.message-down .tutorial-message{border-radius:0 15px 15px 15px}
 
 .tutorial-arrow{position:absolute; z-index:51}
 .tutorial-arrow .arrow{position:relative; width:100%; height:2px; background-color:#fff; transition:all .20s ease}
 .tutorial-arrow .arrow:before,
 .tutorial-arrow .arrow:after{content:''; position:absolute; width:2px; height:10px; background-color:#fff}
 .tutorial-arrow .arrow:before{top:-7px}
 .tutorial-arrow .arrow:after{bottom:-7px}
 
 .tutorial-arrow.right .arrow:before,
 .tutorial-arrow.right .arrow:after{right:3px;}
 .tutorial-arrow.right .arrow:before{transform:rotate(-48deg)}
 .tutorial-arrow.right .arrow:after{transform:rotate(48deg)}
 .tutorial-arrow.left .arrow:before,
 .tutorial-arrow.left .arrow:after{left:3px;}
 .tutorial-arrow.left .arrow:before{transform:rotate(48deg)}
 .tutorial-arrow.left .arrow:after{transform:rotate(-48deg)}
 
 .tutorial-arrow.top .arrow{position:relative; width:2px; height:100%; background-color:#fff; transition:all .20s ease}
 .tutorial-arrow.top .arrow:before,
 .tutorial-arrow.top .arrow:after{top:-3px}
 .tutorial-arrow.top .arrow:before{left:-3px; transform:rotate(48deg)}
 .tutorial-arrow.top .arrow:after{right:-3px; transform:rotate(-48deg)}
 
 .tutorial-arrow.down .arrow{position:relative; width:2px; height:100%; background-color:#fff; transition:all .20s ease}
 .tutorial-arrow.down .arrow:before,
 .tutorial-arrow.down .arrow:after{bottom:-3px; top:auto}
 .tutorial-arrow.down .arrow:before{left:-3px; transform:rotate(-48deg)}
 .tutorial-arrow.down .arrow:after{right:-3px; transform:rotate(48deg)}
 
 .tutorial-layout .com-searchbox{z-index:auto}
 .tutorial-layout .com-grid{z-index:auto}
 .tutorial-layout .overlap{position:relative; z-index:2002 !important}
 .tutorial-layout .Table.Form-type tr:nth-child(even) td{background:none !important}
 
 .tutorial-layout .zreset{z-index:auto !important}
 .tutorial-layout .jqx-grid-cell{z-index:1 !important}
 .tutorial-layout .cell-overlap{z-index:2002 !important}
 .tutorial-layout .jqx-grid-content.jqx-widget-content > div{opacity:1 !important}
 

/* tutorial-remote */
.tutorial-remote{display:flex; align-items:center; justify-content:center; position:fixed; left:50%; bottom:35px; margin-left:-50px; padding:10px; background:rgba(0,0,0,.15); border-radius:8px; z-index:2004}
.tutorial-remote .tutorial-page
{
	display:flex; align-items:center; justify-content:center; height:54px; margin:0; padding:0 20px;
	color:#fff; font-size:15px; font-weight:normal; letter-spacing:-0.5px; background:rgba(255,255,255,0);
	border-radius:200px; background:none; box-sizing:border-box
}
.tutorial-remote .tutorial-page:hover{background:rgba(255,255,255,.1)}
.tutorial-remote .tutorial-page i{font-size:28px}
.tutorial-remote .tutorial-list
{
	display:flex; align-items:center; justify-content:center; height:54px; margin:0; padding:0 20px;
	color:#fff; font-size:15px; font-weight:normal; letter-spacing:-0.5px; background:linear-gradient(267deg, #be52f2, #5629ee);
	border-radius:200px
}
.tutorial-remote .tutorial-list i{margin-right:5px; font-size:18px}

/* **************************************** *
 * TAGB0X
 * **************************************** */
.tag-box-wrap{display:flex; flex-wrap:wrap; gap:4px;}
.tag-box{position:relative; flex:none; display:inline-flex; align-items:center; height:40px; padding:0px 25px 0 8px; background-color:#f8f7fe; border:1px solid #5629ee; box-sizing:border-box; margin:2px 0px;}
.tag-box span{font-size:12px; font-weight:normal; letter-spacing:-0.2px; color:#505050; line-height: 1;}
.tag-box .del{position:absolute; right:0; top:0; width:20px; height:25px; padding:0; line-height:25px; background:none; font-size:18px; color:#808080; text-align:center; border:0; cursor:pointer}
.tag-box .del:before{content:"\EB99";font-family:'remixicon'; color:#5629ee; font-size: 16px; }
.tag-box.ico {display: flex; align-items: center;}
.tag-box.ico i{font-size: 16px; margin-right: 4px; color: rgb(80, 80, 80, 1);}
.tag-box .signal-color{padding-left: 16px;}
.tag-box .signal-color::before{top:0px;}

/* **************************************** *
 * TAG-INPUT
 * **************************************** */
.taginput-wrap{display:flex; align-items:center}
.taginput-wrap .Textinput{flex:none}
.tag-input{display:inline-flex; flex-wrap:wrap; gap:2px 4px; align-items:center; min-height:40px; padding:0 8px; line-height:40px; border:1px solid #ddd; color:#333; font-family:'pps', 'ptd', 'sans-serif' !important; font-size:15px; font-weight:normal; letter-spacing:-0.5px; border-radius:8px}

.tag-input.Disabled{background-color:#eaeaea; border:1px solid #ddd; color:#ababab}
.tag-input .tag-box{flex:none; max-width: 100%}
.tag-input .tag-box.leader{background:#a8f0d6; border-color:#3fc495}
.tag-box.leader .del:before{color:#1fb07d}
.tag-input .tag-box.member{background:#e8ffcc; border-color:#75d701}
.tag-box.member .del:before{color:#68c000}

.srchMemberTy2 .tag-input{height:32px; min-height:32px; border:none; overflow-y:auto;}


/* **************************************** *
 * TEXT-LINK
 * **************************************** */
.tlink{text-decoration: underline; color:#5629ee; text-underline-offset:2px; cursor:pointer}

/* **************************************** *
 * CONTACT
 * **************************************** */
.contact-recipient{display:flex; flex-direction:column; height:100%; position:relative; overflow:hidden}
.contact-recipient .recipient-box{position:relative; border:1px solid #e9e9e9; height:200px; border-bottom:0}
.contact-recipient .recipient-box:first-child{border-top-right-radius:8px}
.contact-recipient .recipient-box:last-child{border-bottom-right-radius:8px; border-bottom:1px solid #e9e9e9;}
.contact-recipient .recipient-box.selected{border:1px solid #5629ee}

.recipient-btn{background:transparent; position:absolute; width:100%; top:-1px; left:-1px; right:-1px; bottom:-1px; cursor:pointer; z-index: 1; border:1px solid transparent}
.recipient-btn:focus{border:1px solid transparent; outline:none}
.recipient-header{height:40px; display:flex; padding:8px 12px; align-items: center;}
.recipient-header .tit{font-size: 15px; font-weight:600; color:#333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.recipient-header .count{color:#5629ee; margin-left:8px; font-size:13px}
.recipient-list{position:relative; background:#fff; height:calc(100% - 42px); z-index: 1; cursor:initial; overflow:auto; padding:4px 12px; border-radius: 0px 0px 5px 0px;}
.recipient-list .recipient-item{width:100%; overflow:hidden; display:flex; padding:4px 0px; justify-content:space-between}
.recipient-list .recipient-item .mail-info{display:block; font-size: 14px; color:#333;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -0.5px;}
.recipient-list .recipient-item .gruop{display:flex; align-items:center}
.recipient-list .recipient-item .Button{margin-left: 4px; color:#999;}
.recipient-list .recipient-item .Button i{font-size: 16px;}

/* **************************************** *
 * COLOR-PICKER
 * **************************************** */
.color-picker{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.color-picker .color-list{display:inline-flex;}
.color-picker .color-list .Button{height:22px; padding:0px 8px; border-radius: 4px; font-size: 13px; line-height:initial; display:flex; align-items:center; vertical-align:middle }

.color-option{position:relative; display:inline-block; height:22px; vertical-align:middle; cursor:pointer}

.color-option > .Radio{top:0; width:21px; height:21px; margin:0; opacity:0}
.color-option:after{position:absolute; content:""; left:0; top:0px; width:22px; height:22px; border-radius: 4px; display:block; background:#fff; border:1px solid #00000021; box-sizing:border-box;}
.color-option.Checked:after{content:"\eb7b"; display:flex; font-family:'remixicon'; justify-content: center; align-items:center; font-size:18px; color:#00000080}
.color-option.Checked.Disabled:after{content:"\e9c7"; color:#cbcbcb; background:none}

.color-picker.large .color-option{height:32px;}
.color-picker.large .color-option > .Radio{width:32px; height:32px; margin:0;}
.color-picker.large .color-option:after{ width:32px; height:32px; border-radius: 10px; border:0}
.color-picker.large .color-option.Checked:after{font-size:20px; color:#fff}

.color-option.azure:after{background:azure}
.color-option.ruth:after{background:#ECD0CB}

.color-option.amethyst:after{background:#9966CC}
.color-option.blueberry:after{background:#4F86F7}
.color-option.sunglow:after{background:#FFCC33}
.color-option.pistachio:after{background:#93C572}
.color-option.tangerine:after{background:#FA9336}
.color-option.tulip:after{background:#FF878D }
.color-option.vermillion:after{background:#E34234}
.color-option.softteal:after{background:#44A9AA}
.color-option.pear:after{background:#D1E231}
.color-option.slategray:after{background:#708090}

.color-option.lavender:after{background:#f4f4ff}
.color-option.aliceblue:after{background:#f0f8ff}
.color-option.lemon:after{background:#fffdee}
.color-option.honeydew:after{background:#f0fff0}
.color-option.bisque:after{background:#FFE2C6 }
.color-option.snow:after{background:#fffafa}
.color-option.mistyrose:after{background:#FFE5E3}
.color-option.powderblue:after{background:#beebeb}
.color-option.eggshell:after{background:#ECEFCC}
.color-option.gainsboro:after{background:#dddddd}

.color-option.laserlemon:after{background:#FFFF66} 
.color-option.springbud:after{background:#A7FC00 }  
.color-option.neonteal:after{background:#00CAB1 } 
.color-option.traditional:after{background:#0080FF}
.color-option.idorange:after{background:#FF7722 }
.color-option.veronica:after{background:#A020F0 }


.color-option.ultraV:after{background:linear-gradient(45deg, #654ea3, #eaafc8)}
.color-option.windy:after{background:linear-gradient(45deg, #acb6e5, #86fde8)}
.color-option.mild:after{background:linear-gradient(45deg, #67B26F, #4ca2cd)}
.color-option.peach:after{background:linear-gradient(45deg, #ED4264, #FFEDBC)}

.color-option.color01:after{background:linear-gradient(45deg, #b85eff, #5670a7)}
.color-option.color02:after{background:linear-gradient(45deg, #5f75fb, #3465cb)}
.color-option.color03:after{background:linear-gradient(45deg, #5ad4ba, #809cd6)}
.color-option.color04:after{background:linear-gradient(45deg, #ff3e3e, #ff7166)}
.color-option.color05:after{background:linear-gradient(45deg, #ffc74f, #ff993b)}
.color-option.color06:after{background:linear-gradient(45deg, #ff63a8, #955f9f)}
.color-option.color07:after{background:linear-gradient(45deg, #c8d0ff, #edddff)}
.color-option.color08:after{background:linear-gradient(45deg, #141414, #342f35)}
.color-option.color01.Checked:after{color:#ffffffab}
.color-option.color02.Checked:after{color:#ffffffab}
.color-option.color08.Checked:after{color:#ffffffab}

.color-option.color11:after{background:#ffbdbd}
.color-option.color12:after{background:#ffd49d}
.color-option.color13:after{background:#ffee61}
.color-option.color14:after{background:#e7f991}
.color-option.color15:after{background:#bcd88f}
.color-option.color16:after{background:#bee0b9}
.color-option.color17:after{background:#9aebaf}
.color-option.color18:after{background:#88dedf}
.color-option.color19:after{background:#b8e2f2}
.color-option.color20:after{background:#99d5ec}
.color-option.color21:after{background:#b7cdf2}
.color-option.color22:after{background:#96bbff}
.color-option.color23:after{background:#bcbcff}
.color-option.color24:after{background:#e7c4ff}
.color-option.color25:after{background:#d2adec}
.color-option.color26:after{background:#ffc5ea}
.color-option.color27:after{background:#ec97cd}
.color-option.color28:after{background:#ebd8c1}
.color-option.color29:after{background:#e3c9a9}

.color-option.kepco:after{background:#164194}
.color-option.home:after{background:#a66884}
.color-option.foreign:after{background:#3b7565}

.color-option.lj-color01:after{background:#8493fe}
.color-option.lj-color02:after{background:#ffe699}
.color-option.lj-color03:after{background:#e5718d}
.color-option.lj-color04:after{background:#c6e0b4}

/* 드라이브 폴더 색상 */
.color-option.folder-coral:after{background:#d34c56}
.color-option.folder-red:after{background:#f13434}
.color-option.folder-orange:after{background:#e06f36}
.color-option.folder-orange2:after{background:#df925a}
.color-option.folder-yellow:after{background:#ff9c00}
.color-option.folder-yellow2:after{background:#e5c41f}
.color-option.folder-green:after{background:#52c8a8}
.color-option.folder-green2:after{background:#579fa3}
.color-option.folder-green3:after{background:#adbf41}
.color-option.folder-green4:after{background:#78a562}
.color-option.folder-green5:after{background:#149356}
.color-option.folder-green6:after{background:#6f7a71}
.color-option.folder-blue:after{background:#5763ff}
.color-option.folder-blue2:after{background:#4a97dd}
.color-option.folder-blue3:after{background:#0096c7}
.color-option.folder-blue4:after{background:#3e4f9e}
.color-option.folder-violet:after{background:#4131ba}
.color-option.folder-violet2:after{background:#9746cc}
.color-option.folder-violet3:after{background:#847999}
.color-option.folder-pink:after{background:#f5869a}
.color-option.folder-pink2:after{background:#ba78a8}
.color-option.folder-pink3:after{background:#cc50cc}
.color-option.folder-brown:after{background:#692e2a}
.color-option.folder-gray:after{background:#8d9396}
.color-option.folder-gray2:after{background:#5c636d}

.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-coral .front{background:#d34c56}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-coral .back{background:#ab2f38}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-red .front{background:#f13434}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-red .back{background:#ab2f38}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-orange .front{background:#e06f36}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-orange .back{background:#c85922}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-orange2 .front{background:#df925a}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-orange2 .back{background:#bb6b31}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-yellow .front{background:#ff9c00}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-yellow .back{background:#d58200}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-yellow2 .front{background:#e5c41f}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-yellow2 .back{background:#c3a617}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green .front{background:#52c8a8}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green .back{background:#42a489}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green2 .front{background:#579fa3}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green2 .back{background:#468083}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green3 .front{background:#adbf41}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green3 .back{background:#8a9934}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green4 .front{background:#78a562}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green4 .back{background:#5d834b}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green5 .front{background:#149356}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green5 .back{background:#0e6b3e}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green6 .front{background:#6f7a71}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-green6 .back{background:#4a524c}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue .front{background:#5763ff}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue .back{background:#3f48ba}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue2 .front{background:#4a97dd}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue2 .back{background:#3d7ab2}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue3 .front{background:#0096c7}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue3 .back{background:#007aa2}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue4 .front{background:#3e4f9e}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-blue4 .back{background:#263164}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet .front{background:#4131ba}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet .back{background:#2b207c}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet2 .front{background:#9746cc}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet2 .back{background:#703397}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet3 .front{background:#847999}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-violet3 .back{background:#5e566d}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink .front{background:#f5869a}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink .back{background:#c66a7b}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink2 .front{background:#ba78a8}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink2 .back{background:#925d83}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink3 .front{background:#cc50cc}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-pink3 .back{background:#ad45ad}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-brown .front{background:#692e2a}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-brown .back{background:#341614}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-gray .front{background:#8d9396}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-gray .back{background:#6b7072}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-gray2 .front{background:#5c636d}
.drive-wrap .main-thumb .thumb_list .thumb.folder.bg .folder-content .folder_inner.folder-gray2 .back{background:#3a3f45}


/* **************************************** *
 * SAMPLE-GRID
 * **************************************** */ 
.sample-grid table{width:100%; font-size: 13px; border-top:2px solid #5629eE !important}
.sample-grid table thead th{color:#333;font-weight:300; height:44px;  background:#fafafa; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; text-align: center;}
.sample-grid table thead th:last-child,
.sample-grid table tbody tr td:last-child{border-right:0px}
.sample-grid table thead tr th.col_tit:last-child{border-right:1px solid #ebebeb !important}
.sample-grid table tbody tr td{padding:8px !important; color:#555; height: 44px; font-size:13px; letter-spacing: -0.2px; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; }
.sample-grid table tbody tr td i{font-size: 17px;}
.sample-grid table tbody tr td.bg-color01{background:#ecf6fe !important;}
.sample-grid table tbody tr td.bg-color02{background:#fffae8 !important;}
.sample-grid table tbody tr:hover td{background:#f4f4f4}
.sample-grid .stitArea .stitL > div{display:flex; align-items:center;}
.sample-grid .stitArea .stitL > div span.color-red1{margin-left: 4px;}
.sample-grid .stitArea .stitL > div .xi-list{font-size: 20px;}
.sample-grid table tbody tr td.layer{position:relative;}
.sample-grid table tbody tr td.layer:hover ul{display:block;}
.sample-grid table tbody tr td.layer ul{position:absolute; background:#fff; top:44px; left:0px; box-shadow:-1px 3px 10px #00000020; padding:8px 8px; border-radius: 0px 0px 8px 8px; z-index:2;}
.sample-grid table tbody tr td.layer ul li{padding:6px 0px;cursor:pointer;  border-bottom: 1px solid #ededed; padding-left:16px; border-left:3px solid transparent}
.sample-grid table tbody tr td.layer ul li:last-child{border-bottom: 0px;}
.sample-grid table tbody tr td.layer ul li:hover{color:#5629ee; border-left:3px solid #5629ee }
.sample-grid table tbody tr.select td{background:#f4f4f4;}
.sample-grid .editcolumn{background-color:#eafcd5}
.sample-grid .edittotal{background-color:#d1e7b7}
.sample-grid .infocolumn{background-color:#ecf6fe}
.sample-grid .warncolumn{background-color:#fedec7}
.sample-grid .delcolumn{text-decoration:line-through; color:#f74040}
.sample-grid .bg-column01{background-color:#fae2e7}
.sample-grid .bg-column02{background-color:#fff0e5}
.sample-grid .bg-column03{background-color:#fff1b9}
.sample-grid .bg-column04{background-color:#eafcd5}
.sample-grid .bg-column05{background-color:#ddf5ed}
.sample-grid .bg-column06{background-color:#d6f2f1}
.sample-grid .bg-column07{background-color:#d8f8f9}
.sample-grid .bg-column09{background-color:#e3dcfa}
.sample-grid .bg-column10{background-color:#d4dcf4}
.sample-grid .bg-column11{background-color:#dff5ff}
.sample-grid .bg-column16{background-color:#fce5e3}
.sample-grid .bg-column17{background-color:#d9efe7}
.sample-grid .bg-column20{background-color:#d8d8d8}
.sample-grid .bg-column24{background-color:#fcff5c}


/* **************************************** *
 * ml-grid
 * **************************************** */ 
.ml-grid table{width:100%; font-size: 13px; border-top:2px solid #5629eE !important}
.ml-grid table thead th{color:#333;font-weight:300; height:44px;  background:#fafafa; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; text-align: center;}
.ml-grid table thead th:last-child,
.ml-grid table tbody tr td:last-child{border-right:0px}
.ml-grid table thead tr th.col_tit:last-child{border-right:1px solid #ebebeb !important}
.ml-grid table tbody tr td{padding:8px !important; color:#555; height: 44px; font-size:13px; letter-spacing: -0.2px; border-bottom:1px solid #ebebeb; border-right:1px solid #ebebeb; }
.ml-grid table tbody tr td i{font-size: 17px;}
.ml-grid table tbody tr td.bg-color01{background:#ecf6fe !important;}
.ml-grid table tbody tr td.bg-color02{background:#fffae8 !important;}
.ml-grid table tbody tr:hover td{background:#f4f4f4}
.ml-grid .stitArea .stitL > div{display:flex; align-items:center;}
.ml-grid .stitArea .stitL > div span.color-red1{margin-left: 4px;}
.ml-grid .stitArea .stitL > div .xi-list{font-size: 20px;}
.ml-grid table tbody tr td.layer{position:relative;}
.ml-grid table tbody tr td.layer:hover ul{display:block;}
.ml-grid table tbody tr td.layer ul{position:absolute; background:#fff; top:44px; left:0px; box-shadow:-1px 3px 10px #00000020; padding:8px 8px; border-radius: 0px 0px 8px 8px; z-index:2;}
.ml-grid table tbody tr td.layer ul li{padding:6px 0px;cursor:pointer;  border-bottom: 1px solid #ededed; padding-left:16px; border-left:3px solid transparent}
.ml-grid table tbody tr td.layer ul li:last-child{border-bottom: 0px;}
.ml-grid table tbody tr td.layer ul li:hover{color:#5629ee; border-left:3px solid #5629ee }
.ml-grid table tbody tr.select td{background:#f4f4f4;}
.ml-grid table tbody tr td.input{padding:0px !important;}
.ml-grid table tbody tr td.input .Textinput{height:-webkit-fill-available}
.ml-grid .editcolumn{background-color:#eafcd5}
.ml-grid .edittotal{background-color:#d1e7b7}
.ml-grid .infocolumn{background-color:#ecf6fe}
.ml-grid .warncolumn{background-color:#fedec7}
.ml-grid .delcolumn{text-decoration:line-through; color:#f74040}
.ml-grid .bg-column01{background-color:#fae2e7}
.ml-grid .bg-column02{background-color:#fff0e5}
.ml-grid .bg-column03{background-color:#fff1b9}
.ml-grid .bg-column04{background-color:#eafcd5}
.ml-grid .bg-column05{background-color:#ddf5ed}
.ml-grid .bg-column06{background-color:#d6f2f1}
.ml-grid .bg-column07{background-color:#d8f8f9}
.ml-grid .bg-column09{background-color:#e3dcfa}
.ml-grid .bg-column10{background-color:#d4dcf4}
.ml-grid .bg-column11{background-color:#dff5ff}
.ml-grid .bg-column16{background-color:#fce5e3}
.ml-grid .bg-column17{background-color:#d9efe7}
.ml-grid .bg-column20{background-color:#d8d8d8}
.ml-grid .bg-column24{background-color:#fcff5c}
.ml-grid.view .bg-column04{background-color:#fafafa}
.ml-grid.view .bg-column24{background-color:#7a88ff24}

.ml-grid.ty2 table thead th{height:36px;}
.ml-grid.ty2 tbody tr td{padding:0px 4px !important; height: 36px;}
.ml-grid.total table{border-top:none !important; background:lightgoldenrodyellow}
.ml-grid.total table tbody tr td{font-weight:600}
.ml-grid.total table tbody tr:hover td{background:none}

/* **************************************** *
 * Layerbox-nonPOPUP
 * **************************************** */ 
.layer-box{display:none; position:absolute; background:#fff; height:auto; padding:12px; border-radius: 8px; z-index:3; box-shadow:0px 0px 5px #00000021; margin-left: -12px;}
.layer-box.active{display:block}
.layer-box .stitArea .stitL strong.tit{font-weight: 300; letter-spacing: -0.5px; color:#202020}
.layer-box .stitArea .stitR .Button.trans-ico i{color:#777; font-size: 17px;}

.layer-box.ty2{top:44px; padding:16px}
.layer-box.ty2 .close-btn{position: absolute; right: -4px; top:-6px }



/* **************************************** *
 * SWATCH
 * **************************************** */ 
.swatch-wrap .ico-list{position:relative;}
.swatch-wrap .ico-list{display:flex; flex-wrap:wrap; gap:10px}
.swatch-wrap .ico-list .trans-ico{color:#999}

.img-preview{margin-left: 10px; max-width: 42px; width: 42px; height:42px;}
.img-preview img{object-fit:contain; width:100%; height:100%; display:inline-block; border:1px solid #0000001f; border-radius: 4px;}

/* **************************************** *
 * legend
 * **************************************** */ 
.legend-list{display:inline-block; vertical-align:middle}
.legend-list > li{float:left; margin-left:8px}
.legend-list > li:first-child{margin-left:0}
.legend-list > li .Label-color{display:inline-flex; flex:none; justify-content:center; align-items:center; min-width:16px; height:16px; padding:0} 
.legend-list > li .Label-color i{font-size: 13px;}
.legend-list > li .Label-color.color24{background:#f3f0ff; border-color:#e1ddf1}
.legend-list > li .Label-color.color24 i{color:#6d29bc91}
.legend-list > li .cont-txt{display:inline-block; padding-left:2px; font-size:13px; letter-spacing:-0.2px; color:#707070; line-height:150%}
.legend-list .img-legend {display:inline-flex; justify-content:center; align-items:center; margin-right: 4px;}
.legend-list .img-legend img{width:16px; height:16px}

/* **************************************** *
 * volume
 * **************************************** */
.volume{letter-spacing: -0.5px; font-size: 13px; color:#aaa}
.volume .current{color:#5629ee}


/* **************************************** *
 * user-list
 * **************************************** */
.user-list {display:flex; margin-top: 12px;}
.user-list .user{border-radius:50%; background:#fff; border:1px solid #fff; display:flex; justify-content: center; overflow:hidden; width:42px; height:42px; box-shadow:-1px 1px 5px #0000001c; line-height: 40px; font-size: 14px; letter-spacing: -0.6px; flex:none}
.user-list .user img{object-fit: cover;}
.user-list .user .name{font-weight: 300; color:#333; padding: 4px; line-height: 2.1; text-align: center; font-size: 16px;}
.user-list .user:nth-child(2){transform:translateX(-10px)}
.user-list .user:nth-child(3){transform:translateX(-20px)}
.user-list .user:nth-child(4){transform:translateX(-30px)}
.user-list .user:nth-child(5){transform:translateX(-40px)}
.user-list .user:nth-child(6){transform:translateX(-50px)}
.user-list .user:nth-child(7){transform:translateX(-60px)}
.user-list .user:nth-child(8){transform:translateX(-70px)}
.jqx-grid .user-list {margin-top: 0px;}
.jqx-grid .user-list .user{width:26px; height:26px; }
.jqx-grid .user-list .user .name{font-size: 14px; line-height: 1.2;}
.jqx-grid .user-list .user:nth-child(2){transform:translateX(-8px)}
.jqx-grid .user-list .user:nth-child(3){transform:translateX(-16px)}
.jqx-grid .user-list .user:nth-child(4){transform:translateX(-24px)}
.jqx-grid .user-list .user:nth-child(5){transform:translateX(-32px)}
.jqx-grid .user-list .user:nth-child(6){transform:translateX(-40px)}
.jqx-grid .user-list .user:nth-child(7){transform:translateX(-48px)}
.jqx-grid .user-list .user:nth-child(8){transform:translateX(-56px)}

.user-list.ty2 {display:flex; margin-top: 12px; }
.user-list.ty2 .user{background:#5b5866; border-radius: 50px; border:1px solid #fff;padding-left:1px; padding-right: 12px;  display:flex; justify-content: flex-start; align-items:center; overflow:hidden; width:auto; height:30px; box-shadow:-1px 1px 5px #0000001c; line-height: 40px; font-size: 14px; letter-spacing: -0.6px; flex:none}
.user-list.ty2 .user img{border-radius:50%;  width:26px; height:26px; object-fit: cover;}
.user-list.ty2 .user span.account{letter-spacing: -0.5px; font-size: 13px; margin-left: 6px; color:#fff}
.user-list.ty2  .user .name{border-radius:50%; width:26px; height:26px; background:#fff; font-weight: 300; color:#333; padding: 4px; line-height:1.2; text-align: center; font-size: 15px;}
.user-list.ty2  .user:nth-child(2){transform:translateX(-5px)}
.user-list.ty2  .user:nth-child(3){transform:translateX(-10px)}
.user-list.ty2 .user:nth-child(4){transform:translateX(-15px)}
.user-list.ty2  .user:nth-child(5){transform:translateX(-20px)}
.user-list.ty2  .user:nth-child(6){transform:translateX(-25px)}
.user-list.ty2  .user:nth-child(7){transform:translateX(-30px)}
.user-list.ty2  .user:nth-child(8){transform:translateX(-35px)}


/* **************************************** *
 * select button
 * **************************************** */
.select-btn{position:relative; display:inline-block; min-width:180px; height:40px; background:#fff; box-shadow:1px 2px 6px rgb(0 0 0 / 12%); border-radius:8px}
.select-btn > ul{display:flex}
.select-btn .btn{
 display:flex; align-items:center; position:relative; top:-1px; left:-1px; width:100%; height:40px; padding:0px 16px; padding-right:44px; color:#333; background:none; font-size:15px; font-weight:300; letter-spacing:-0.8px;
 text-align:left; border:0; margin:0; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:all .20s ease; box-sizing:border-box}
.select-btn .btn:before{content:'\e943'; position:absolute; right:12px; font-family:'xeicon'; font-size:20px; color:#a7a7a7; transition:all .20s ease}
.select-btn .btn i{margin-right: 8px; font-size: 19px; color:#999}
.select-btn .btn:active,
.select-btn .btn:focus{color:#5629ee}
.select-btn li.active .btn:before{content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#e9e9e9}
.select-btn .select-list{display:none; position:absolute; top:48px; left:-1px; right:2px; background:#fff; border-radius:10px; box-shadow:2px 2px 7px rgb(0 0 0 / 12%); overflow:hidden; z-index:2}
.select-btn .select-list ul{max-height:275px; padding:8px 0; overflow:hidden; overflow-y:auto}
.select-btn .select-list ul li{display:flex; align-items:center; position:relative; padding:8px 16px; margin:4px 8px; cursor:pointer; transition:all .20s ease; gap:8px; border-bottom: 1px solid #f5f5f5}
.select-btn .select-list ul li:last-child{border:0}
.select-btn .select-list ul li:hover{background-color:#f5f5f5; border-radius:8px; border-color:#f5f5f5}
.select-btn .select-list ul li.on{background-color:#f5f5f5; border-radius:8px}
.select-btn .select-list ul li span{font-size:14px; color:#333}
.select-btn .select-list ul li i{font-size: 17px; color:#777}
.select-btn.Disabled{background: #f4f4f4;}
.select-btn.Disabled span{color: #aaa;}

.select-btn.small{height:32px; border-radius:6px}
.select-btn.small .btn{height:32px; font-size: 14px; padding:0px 12px; display:inline-block; line-height:34px}
.select-btn.small .btn:before{font-size:18px; right:8px}
.select-btn.small .btn i{font-size: 17px;}
.select-btn.small .select-list{top:38px; border-radius:8px;}
.select-btn.small .select-list ul li{padding:6px 12px; margin:2px 8px}

.wms-layout .select-btn{height:32px; border-radius:6px}
.wms-layout .select-btn .btn{height:32px; font-size: 14px; padding:0px 12px}
.wms-layout .select-btn .btn:before{font-size:20px; right:8px}
.wms-layout .select-btn .btn i{font-size: 17px;}
.wms-layout .select-btn .select-list{top:32px; border-radius:0 0 8px 8px; }
.wms-layout .select-btn .select-list ul li{ padding:8px 12px; }


/* **************************************** *
 * Ml tooltip
 * **************************************** */

.ml-tooltip{display:none; position:absolute;  padding:8px 12px; line-height:155%; background:#fff; font-size:13px; min-width:40px; color:#202020; border:1px solid #aaa; letter-spacing:-0.2px; border-radius:2px; z-index:1000; box-shadow: 0px 5px 5px #00000010}

/* **************************************** *
 * GAP
 * **************************************** */
.gap02{gap:2px}
.gap04{gap:4px}
.gap08{gap:8px}
.gap12{gap:12px}
.gap16{gap:16px}
.gap20{gap:20px}
.gap24{gap:24px}

/* **************************************** *
 * tab-ghost-layout
 * **************************************** */
.tab-ghost-layout{position:absolute; top:-4px; right:0; display: flex; gap:12px}

.checkbox-list{padding:8px 0px}
.checkbox-list li{padding:4px}

/* **************************************** *
 * title-grid
 * **************************************** */
.title-grid-wrap{border-top:1px solid #e0e0e0;}
.title-grid{border-bottom:1px solid #e0e0e0;}
.title-grid .stitArea{height:36px; margin-bottom: 0; padding:0px 8px}
.title-grid .stitArea .stitR .trans-ico i{font-size: 20px; color:#999}
.title-grid .com-grid{display:none;}
.title-grid.active .stitArea .stitR .trans-ico{transform:rotateX(180deg)}
.title-grid.active .com-grid{display:block;}


/* **************************************** *
 * pms-search 공통으로 변경
 * **************************************** */
.search-round{position:relative; border: 1px solid #ebebeb; padding:4px 4px 0 12px;  background:#fff; border-radius: 50px; height:32px; width:440px; margin-left: 4px}
.search-round .search-wrap{display:flex; align-items:center;}
.search-round .search-wrap > i.ri-search-line{font-size: 18px; color:#a5a5a5}
.search-round .search-wrap > .Textinput,
.search-round .search-wrap > .Textinput:hover,
.search-round .search-wrap > .Textinput:focus,
.search-round .search-wrap > .Textinput:active{border:0px; box-shadow:none; padding:0 15px 0 10px}
.search-round .search-wrap > .Textinput{height:24px; line-height: 1.2; background:#fff;}
.search-round .search-wrap input:-webkit-autofill,
.search-round .search-wrap input:-webkit-autofill:hover,
.search-round .search-wrap input:-webkit-autofill:focus,
.search-round .search-wrap input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #202020 !important;}

.search-popup{display:none;background:#fff; border-radius:15px; position: absolute; left:0px; top:32px; z-index: 3; min-width:440px; width:auto; padding:16px; box-shadow:0px 2px 5px rgb(0 0 0 / 30%)}
.search-popup.active{display:block}
.search-popup .writing-ty1 .writing-list{border:none; padding:0px}
.search-popup .writing-ty1 .writing-list #srchCardColumnNmDiv{display:flex; flex-wrap:wrap;}
.search-popup .writing-ty1 .writing-list #srchCardColumnNmDiv label{width:96px;}
.search-popup .close{cursor:pointer;  position:absolute; right:10px; top:10px; width:24px; height:24px; line-height:25px; border:0px; background:transparent; padding:0px; z-index: 2;}
.search-popup .close:before{content:"\EB99";font-family:'remixicon'; color:#888; font-size: 18px;}

.search-round .advanced-search-btn{display:flex; justify-content:flex-end}


/* **************************************** *
 * calendar nav
 * **************************************** */
.calendar-nav{display:flex; gap:24px; align-items: center; justify-content: center} 
.calendar-nav .Button i{color:#999}
.calendar-nav .calendar-date{font-size: 17px; letter-spacing: -0.8px; color:#555}

.calendar-nav .Button.arrow-btn{display:flex; justify-content:center; align-items:center; padding:0; border:0; border-radius: 8px; min-width: initial; min-height: initial; width: 36px; height: 36px}
.calendar-nav .Button.arrow-btn:hover,
.calendar-nav .Button.arrow-btn:active,
.calendar-nav .Button.arrow-btn:focus{background: #f3f3f3}
.calendar-nav .Button.arrow-btn i{font-size: 24px; margin-top:1px}
.calendar-nav .month{font-size: 24px}

.wms-layout .calendar-nav .Button.arrow-btn{padding: 0}

/* **************************************** *
 * page custom style
 * **************************************** */

/* 생산관리 > 상비품 하위 삭제 여부 체크 */
.deleted-cell{background-color: #c0b9b9 !important; text-decoration: line-through !important;}

/* **************************************** *
 * meta-info-wrap
 * **************************************** */
.meta-info-wrap{position:relative; display:inline-block; align-items:center; height:26px; border:1px solid #e0e0e0; border-radius: 8px; padding:0px 6px; background: #fff;}
.meta-info-wrap .tit{font-size: 13px; letter-spacing: -0.6px; color:#555}
.meta-info-wrap .meta-box{display:none; position:absolute; left:-1px; top:-1px; width: max-content;  min-height:26px; border:1px solid #e0e0e0; border-radius: 8px; padding:8px 12px; background: #fff; z-index: 10}
.meta-info-wrap:hover .meta-box{display: inline-block;}
.meta-info-wrap .meta-item{color:#555; font-size: 14px; letter-spacing:-0.5px}


/* **************************************** *
 * Grid colspan
 * **************************************** */

.colspan2{grid-column: span 2; }
.colspan3{grid-column: span 3; }
.colspan4{grid-column: span 4; }
.colspan5{grid-column: span 5; }
.colspan6{grid-column: span 6; }
.colspan7{grid-column: span 7; }
.colspan8{grid-column: span 8; }
.colspan9{grid-column: span 9; }


.grid-paging-total{margin-right: 5px;}
.grid-paging-total span{color:#999; letter-spacing: -0.5px; font-size: 14px;}