mode-w-m.css 201 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308
  1. @charset "UTF-8";
  2. /**********************************************
  3. | 2024-08-26 김민정 :
  4. **********************************************/
  5. .mt--125rem {
  6. margin-top: 1.25rem;
  7. }
  8. .mt--1rem {
  9. margin-top: 1rem;
  10. }
  11. .container .new--header {
  12. background: #0B318B;
  13. /*height:calc(1vh * (90 / 10.8));*/
  14. height: 3.75rem;
  15. display: flex;
  16. align-items: center;
  17. flex-shrink: 0;
  18. position: relative;
  19. padding: 0 1.88rem;
  20. z-index: 2200;
  21. }
  22. .container .new--header .logo {
  23. color: #FFFFFF;
  24. font-size: 1.125rem;
  25. font-weight: 700;
  26. line-height: 100%;
  27. flex-shrink: 0;
  28. display: flex;
  29. align-items: center;
  30. margin-right: 15.5rem;
  31. }
  32. .container .new--header .logo .logo--img {
  33. background-image: url(../img/logo_new.svg);
  34. background-repeat: no-repeat;
  35. background-size: cover;
  36. width: 2rem;
  37. height: 2rem;
  38. margin-right: 1rem;
  39. display: inline-block;
  40. }
  41. .container .new--header .logo .dashboard {
  42. color: #FFF500;
  43. font-size: 0.9375rem;
  44. font-weight: 700;
  45. padding-left: 0.81rem;
  46. margin-left: 0.81rem;
  47. border-left: 1px solid rgba(255, 255, 255, 0.5019607843);
  48. }
  49. .container .new--header .gnb {
  50. z-index: 10;
  51. height: 100%;
  52. }
  53. .container .new--header .gnb:hover .gnb-bg {
  54. height: 16rem;
  55. }
  56. .container .new--header .gnb:hover .depth1 > li .depth2 {
  57. height: 16rem;
  58. }
  59. .container .new--header .gnb .depth1 {
  60. display: flex;
  61. height: 100%;
  62. }
  63. .container .new--header .gnb .depth1 > li {
  64. position: relative;
  65. }
  66. .container .new--header .gnb .depth1 > li.active > button {
  67. background: #ffffff;
  68. color: #0b318b;
  69. font-weight: 700;
  70. }
  71. .container .new--header .gnb .depth1 > li > button {
  72. /* width: calc(1vw * (180 / 19.2)); */
  73. /* height:calc(1vh * (90 / 10.8)); */
  74. /* min-height:90px; */
  75. width: 8.75rem;
  76. height: 3.75rem;
  77. display: inline-block;
  78. color: #fff;
  79. font-size: 1rem;
  80. font-weight: 600;
  81. }
  82. .container .new--header .gnb .depth1 > li .depth2 {
  83. position: absolute;
  84. overflow: hidden;
  85. height: 0;
  86. z-index: 10;
  87. width: 100%;
  88. transition: 0.5s 0s;
  89. }
  90. .container .new--header .gnb .depth1 > li .depth2 ul {
  91. padding-top: 1.88rem;
  92. }
  93. .container .new--header .gnb .depth1 > li .depth2 ul li {
  94. color: #333;
  95. font-size: 0.88rem;
  96. font-weight: 400;
  97. display: block;
  98. margin-bottom: 1.88rem;
  99. cursor: pointer;
  100. text-align: center;
  101. }
  102. .container .new--header .gnb .depth1 > li .depth2 ul li.active {
  103. color: #064F9E;
  104. font-weight: 700;
  105. }
  106. .container .new--header .gnb .gnb-bg {
  107. position: fixed;
  108. /* top:calc(1vh * (90 / 10.8)); */
  109. top: 3.75rem;
  110. left: 0;
  111. right: 0;
  112. width: 100vw;
  113. background: #fff;
  114. z-index: 8;
  115. height: 0;
  116. transition: 0.5s 0s;
  117. box-shadow: 0 0.25rem 0.63rem 0 rgba(0, 0, 0, 0.25);
  118. }
  119. .container .new--header .util {
  120. display: flex;
  121. align-items: center;
  122. gap: 0.625rem;
  123. margin-left: auto;
  124. flex-shrink: 0;
  125. }
  126. .container .new--header .util .ico {
  127. font-size: 0;
  128. }
  129. .container .new--header .util .btn-setting {
  130. width: 1.625rem;
  131. height: 1.625rem;
  132. background: no-repeat center/100%;
  133. background-image: url(../img/ico_setting.svg);
  134. }
  135. .container .new--header .util .btn-alarm {
  136. width: 2rem;
  137. height: 2rem;
  138. position: relative;
  139. }
  140. .container .new--header .util .btn-alarm.type1 .ico {
  141. width: 2rem;
  142. height: 2rem;
  143. background-image: url("../img/ico_alarm4.svg");
  144. background-size: cover !important;
  145. }
  146. .container .new--header .util .btn-alarm.type2 .ico {
  147. width: 2rem;
  148. height: 2rem;
  149. background-image: url("../img/ico_alarm3.svg");
  150. background-size: cover !important;
  151. }
  152. .container .new--header .util .btn-alarm .ico {
  153. position: relative;
  154. width: 1.625rem;
  155. height: 1.625rem;
  156. background: no-repeat center/100%;
  157. }
  158. .container .new--header .util .btn-alarm .ico .dot {
  159. position: absolute;
  160. background: #E42325;
  161. width: 0.44rem;
  162. height: 0.44rem;
  163. border-radius: 100%;
  164. right: 0;
  165. top: 0;
  166. }
  167. .container .new--header .util .btn-alarm .alarm-detail {
  168. position: absolute;
  169. width: 8.75rem;
  170. height: 4.44rem;
  171. top: 3rem;
  172. left: 50%;
  173. display: flex;
  174. align-items: center;
  175. justify-content: space-between;
  176. transform: translateX(-50%);
  177. padding: 1.31rem 1.25rem 1rem 1.25rem;
  178. background: url("../img/bg_tooltip.svg") no-repeat center/100%;
  179. }
  180. .container .new--header .util .btn-alarm .alarm-detail strong {
  181. color: #222222;
  182. font-size: 0.81rem;
  183. font-weight: 600;
  184. }
  185. .container .new--header .util .btn-alarm .alarm-detail .v-switch {
  186. width: 2.25rem;
  187. flex: 0 0 auto;
  188. }
  189. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-switch__track {
  190. background: #ECECEC;
  191. height: 0.75rem;
  192. width: 2.25rem;
  193. opacity: 1;
  194. }
  195. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-switch__thumb {
  196. box-shadow: none;
  197. background: #92989E;
  198. width: 1.13rem;
  199. height: 1.13rem;
  200. }
  201. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-selection-control.v-selection-control--dirty .v-switch__track {
  202. background: #D7E4F1;
  203. }
  204. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-selection-control.v-selection-control--dirty .v-switch__thumb {
  205. background: #064f9e;
  206. }
  207. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-selection-control__input::before {
  208. display: none;
  209. }
  210. .container .new--header .util .btn-alarm .alarm-detail .v-switch .v-ripple__container {
  211. display: none;
  212. }
  213. .container .new--header .util .btn-mode {
  214. position: relative;
  215. }
  216. .container .new--header .util .btn-mode.type1 .ico {
  217. background-image: url("../img/ico_mode_white.svg");
  218. }
  219. .container .new--header .util .btn-mode.type2 .ico {
  220. background-image: url("../img/ico_mode_dark.svg");
  221. }
  222. .container .new--header .util .btn-mode .ico {
  223. width: 1.625rem;
  224. height: 1.625rem;
  225. background: no-repeat center/100%;
  226. }
  227. .container .new--header .util .btn-mode .mode-detail {
  228. position: absolute;
  229. top: 3rem;
  230. left: 50%;
  231. transform: translateX(-50%);
  232. width: 12.63rem;
  233. height: 9.75rem;
  234. padding: 2.06rem 1.25rem 1.25rem 1.56rem;
  235. background: url("../img/bg_tooltip2.svg") no-repeat center/100%;
  236. }
  237. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group {
  238. gap: 0.94rem;
  239. }
  240. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio {
  241. position: relative;
  242. height: 2.5rem;
  243. margin: 0;
  244. padding-left: 5.63rem;
  245. flex: auto;
  246. }
  247. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input {
  248. width: 1.06rem;
  249. height: 1.06rem;
  250. }
  251. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon {
  252. border-color: #c0c0c0;
  253. }
  254. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon.mdi-radiobox-marked {
  255. border-color: #007AFF;
  256. background-color: #007AFF;
  257. box-shadow: inset 0 0 0 0.13rem #fff;
  258. }
  259. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label {
  260. margin-left: 0.75rem;
  261. }
  262. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img {
  263. position: absolute;
  264. left: 0;
  265. top: 0;
  266. width: 4.38rem;
  267. height: 2.5rem;
  268. background: no-repeat center/100%;
  269. }
  270. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img.img1 {
  271. background-image: url("../img/img_mode_white.svg");
  272. }
  273. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img.img2 {
  274. background-image: url("../img/img_mode_dark.svg");
  275. }
  276. .container .new--header .util .btn-mode .mode-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label strong {
  277. color: #333333;
  278. font-size: 0.75rem;
  279. font-weight: 400;
  280. }
  281. .container .new--header .util .btn-lang {
  282. position: relative;
  283. width: 1.625rem;
  284. height: 1.625rem;
  285. }
  286. .container .new--header .util .btn-lang .ico {
  287. /*width: 2rem;
  288. height: 2rem;
  289. border: 0.06rem solid #fff;
  290. background-color: #0B318B;
  291. border-radius: 100%;
  292. color: #fff;
  293. display: flex;
  294. align-items: center;
  295. justify-content: center;
  296. font-weight: 700;
  297. font-size: 0.81rem;*/
  298. }
  299. .container .new--header .util .btn-lang .ico.KR {
  300. background-image: url(../img/ico_lang_korea2.svg);
  301. width: 1.625rem;
  302. height: 1.625rem;
  303. background-size: cover;
  304. display: inline-block;
  305. background-position: center;
  306. }
  307. .container .new--header .util .btn-lang .ico.EN {
  308. background-image: url(../img/ico_lang_english.svg);
  309. width: 1.625rem;
  310. height: 1.625rem;
  311. background-size: cover;
  312. display: inline-block;
  313. background-position: center;
  314. }
  315. .container .new--header .util .btn-lang .lang-detail {
  316. position: absolute;
  317. top: 3rem;
  318. left: 50%;
  319. width: 9.75rem;
  320. height: 7.31rem;
  321. transform: translateX(-50%);
  322. background: url("../img/bg_tooltip3.svg") no-repeat center/100%;
  323. padding: 1.63rem 1.25rem 1.25rem 1.56rem;
  324. }
  325. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group {
  326. gap: 0.94rem;
  327. }
  328. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio {
  329. height: 1.63rem;
  330. margin: 0;
  331. }
  332. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input {
  333. width: 1.06rem;
  334. height: 1.06rem;
  335. }
  336. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon {
  337. border-color: #c0c0c0;
  338. }
  339. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon.mdi-radiobox-marked {
  340. border-color: #007AFF;
  341. background-color: #007AFF;
  342. box-shadow: inset 0 0 0 0.13rem #fff;
  343. }
  344. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label {
  345. margin-left: 0.75rem;
  346. }
  347. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img {
  348. width: 1.63rem;
  349. height: 1.63rem;
  350. display: inline-block;
  351. background: no-repeat center/100%;
  352. }
  353. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img.img1 {
  354. background-image: url("../img/ico_lang_korea.svg");
  355. }
  356. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label .img.img2 {
  357. background-image: url("../img/ico_lang_english.svg");
  358. }
  359. .container .new--header .util .btn-lang .lang-detail .custom-radio .v-input__control .v-selection-control-group .v-radio .v-label strong {
  360. color: #333333;
  361. font-size: 0.75rem;
  362. font-weight: 400;
  363. margin-left: 0.63rem;
  364. }
  365. .container .new--header .util .divider {
  366. width: 0.06rem;
  367. height: 1.88rem;
  368. margin: 0 0.815rem;
  369. background: rgba(255, 255, 255, 0.5);
  370. }
  371. .container .new--header .util .user-info-wrap {
  372. display: flex;
  373. align-items: center;
  374. }
  375. .container .new--header .util .user-info-wrap .user-info {
  376. display: flex;
  377. position: relative;
  378. }
  379. .container .new--header .util .user-info-wrap .user-info .ico {
  380. width: 1.625rem;
  381. height: 1.625rem;
  382. background: #fff;
  383. border-radius: 100%;
  384. color: #438DFF;
  385. display: flex;
  386. align-items: center;
  387. justify-content: center;
  388. font-weight: 700;
  389. font-size: 1rem;
  390. cursor: pointer;
  391. }
  392. .container .new--header .util .user-info-wrap .user-info .info-detail {
  393. position: absolute;
  394. top: 2.7rem;
  395. left: 50%;
  396. width: 11.88rem;
  397. padding: 1.25rem;
  398. transform: translateX(-50%);
  399. background: #FFF;
  400. border: 1px solid #ddd;
  401. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  402. border-radius: 0.625rem;
  403. }
  404. .container .new--header .util .user-info-wrap .user-info .info-detail:after {
  405. content: "";
  406. display: block;
  407. width: 0;
  408. height: 0;
  409. border-left: 0.40625rem solid transparent;
  410. border-right: 0.40625rem solid transparent;
  411. border-bottom: 0.6875rem solid #fff;
  412. position: absolute;
  413. top: -0.5875rem;
  414. left: 50%;
  415. transform: translateX(-50%);
  416. }
  417. .container .new--header .util .user-info-wrap .user-info .info-detail:before {
  418. content: "";
  419. display: block;
  420. width: 0;
  421. height: 0;
  422. border-left: 0.40625rem solid transparent;
  423. border-right: 0.40625rem solid transparent;
  424. border-bottom: 0.6875rem solid #ddd;
  425. position: absolute;
  426. top: -0.6875rem;
  427. left: 50%;
  428. transform: translateX(-50%);
  429. }
  430. .container .new--header .util .user-info-wrap .user-info .info-detail .custom--btn--wrap {
  431. display: flex;
  432. flex-direction: column;
  433. gap: 0.5rem;
  434. }
  435. .container .new--header .util .user-info-wrap .user-info .info-detail p {
  436. color: #111;
  437. font-size: 0.94rem;
  438. font-weight: 700;
  439. margin-bottom: 0.94rem;
  440. }
  441. .container .new--header .util .user-info-wrap .user-info .info-detail p span {
  442. font-weight: 600;
  443. }
  444. .container .new--header .util .user-info-wrap .user-info .info-detail ul {
  445. padding-bottom: 1.25rem;
  446. margin-bottom: 0.94rem;
  447. border-bottom: 0.06rem solid #e1e1e1;
  448. display: flex;
  449. flex-direction: column;
  450. gap: 0.25rem;
  451. }
  452. .container .new--header .util .user-info-wrap .user-info .info-detail ul li {
  453. color: #444444;
  454. font-size: 0.81rem;
  455. font-weight: 400;
  456. }
  457. .container .new--header .util .user-info-wrap .user-info .info-detail ul.nw--btn--text--type {
  458. gap: 0.6rem;
  459. border-bottom: 0px;
  460. }
  461. .container .new--header .util .user-info-wrap .user-info .info-detail .custom-btn.v-btn.v-btn--density-default {
  462. border: 0.06rem solid #D0DDEA;
  463. border-radius: 0.31rem;
  464. width: 100%;
  465. height: 2.5rem;
  466. min-height: 2.5rem;
  467. }
  468. .container .new--header .util .user-info-wrap .user-info .info-detail .custom-btn.v-btn.v-btn--density-default .v-btn__content {
  469. color: #798592;
  470. font-size: 0.75rem;
  471. font-weight: 600;
  472. letter-spacing: -0.01rem;
  473. }
  474. .container .new--header .util .user-info-wrap .user-info .info-detail .custom-btn.v-btn.v-btn--density-default:hover {
  475. border: 0.06rem solid rgba(6, 79, 158, 0.5);
  476. }
  477. .container .new--header .util .user-info-wrap .user-info .info-detail .custom-btn.v-btn.v-btn--density-default:hover .v-btn__content {
  478. color: #064F9E !important;
  479. }
  480. .container .new--header .util .user-name {
  481. color: #fff;
  482. font-size: 0.81rem;
  483. padding: 0 0.815rem;
  484. font-weight: 700;
  485. cursor: pointer;
  486. }
  487. .container .new--header .util .btn-logout {
  488. width: 2rem;
  489. height: 2rem;
  490. background: url("../img/ico_logout.svg") no-repeat center/100%;
  491. }
  492. /**********************************************
  493. | css 오버라이딩
  494. **********************************************/
  495. .ag-sort-indicator-icon {
  496. background-image: url(../img/bg_login.svg);
  497. }
  498. .tbl-list-top {
  499. margin-bottom: 1.25rem;
  500. }
  501. .tbl-list-top .total .total-num strong {
  502. color: #444444;
  503. font-size: 0.875rem;
  504. font-weight: 400;
  505. }
  506. .tbl-list-top .total .total-num strong span {
  507. color: #438dff;
  508. font-size: 0.875rem;
  509. font-weight: 700;
  510. }
  511. .tbl-list-top .total .total-num .total-slt::before {
  512. margin: 0 0.75rem;
  513. background-color: #8e8e8e;
  514. }
  515. .tbl-list-top .total .total-num .total-slt .custom-select.v-input .v-input__control .v-field .v-field__field .v-field__input .v-select__selection {
  516. margin-right: 0.5rem;
  517. }
  518. .tbl-list-top .total .total-num .total-slt .custom-select.v-input .v-input__control .v-field .v-field__field .v-field__input .v-select__selection .page-list-item {
  519. color: #444444;
  520. font-size: 0.875rem;
  521. font-weight: 700;
  522. }
  523. .tbl-list-top .total .total-num .total-slt .custom-select.v-input .v-input__control .v-field .v-field__field .v-field__input .v-select__selection .page-list-item .page {
  524. color: #444444;
  525. font-weight: 400;
  526. }
  527. .tbl-list-top .total .grid-tit {
  528. color: #222;
  529. font-size: 0.9375rem;
  530. font-style: normal;
  531. margin-top: 1.2rem;
  532. line-height: 2.25rem;
  533. font-weight: 700;
  534. letter-spacing: -0.00938rem;
  535. text-transform: uppercase;
  536. }
  537. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt {
  538. width: 7.8125rem;
  539. border: 1px solid #afbece;
  540. background-color: #ffffff;
  541. }
  542. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt .v-btn__content {
  543. color: #6F8AA6;
  544. }
  545. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt .v-btn__content .ico {
  546. background-image: url(../img/ico_cal.svg);
  547. width: 1.125rem;
  548. height: 1.125rem;
  549. background-size: cover;
  550. }
  551. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt.v-btn--disabled {
  552. background-color: #fbfbfb !important;
  553. border: 1px solid #e0e0e0;
  554. }
  555. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt.v-btn--disabled .v-btn__content {
  556. color: #E0E0E0 !important;
  557. }
  558. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-evt.v-btn--disabled .v-btn__content .ico {
  559. background-image: url(../img/ico_cal_dis.svg);
  560. width: 1.125rem;
  561. height: 1.125rem;
  562. background-size: cover;
  563. }
  564. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-del {
  565. background-color: #6f8aa6;
  566. width: 5.25rem;
  567. }
  568. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-del:hover {
  569. background-color: #adbfd2;
  570. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  571. }
  572. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-del .v-btn__content {
  573. font-size: 0.875rem;
  574. font-weight: 600;
  575. }
  576. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-del .v-btn__content .ico {
  577. margin-right: 0.375rem;
  578. }
  579. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.btn-del.v-btn--disabled .v-btn__content .ico {
  580. background-image: url(../img/ico_del_disabled.svg);
  581. }
  582. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.v-btn--disabled {
  583. background: #e0e0e0 !important;
  584. }
  585. .tbl-list-top .total .total-btn .custom-btn.v-btn.v-btn--density-default.v-btn--disabled .v-btn__content {
  586. color: #8e8e8e !important;
  587. }
  588. .tbl-list-top .total .total-btn .custom-check.v-input.type2 .v-input__control .v-selection-control .v-label {
  589. padding-left: 0.37rem;
  590. color: #444444;
  591. font-size: 0.875rem;
  592. font-weight: 500;
  593. }
  594. .tbl-list-top .total .total-btn .custom-check.v-input.type2 .v-input__control .v-selection-control .v-label span {
  595. color: #111111;
  596. font-weight: 700;
  597. }
  598. .tbl-list-top .total .total-btn .custom-check.v-input.type2 .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon {
  599. background-size: cover;
  600. }
  601. .tbl-list-top .excel-search {
  602. gap: 0.5rem;
  603. }
  604. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel {
  605. width: 8.56rem;
  606. border-radius: 0.5rem;
  607. background-color: #ffffff;
  608. }
  609. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel .v-btn__content {
  610. font-size: 0.875rem;
  611. }
  612. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel.v-btn--disabled {
  613. background-color: #fbfbfb !important;
  614. border: 1px solid #e0e0e0 !important;
  615. }
  616. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel.v-btn--disabled .v-btn__content {
  617. color: #e0e0e0 !important;
  618. }
  619. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel.v-btn--disabled .v-btn__content .ico {
  620. background-image: url(../img/ico_excel_d.svg);
  621. }
  622. .tbl-list-top .excel-search .custom-btn.v-btn.v-btn--density-default.btn-excel.v-btn--disabled.up .v-btn__content .ico {
  623. background-image: url(../img/ico_excel_d.svg) !important;
  624. }
  625. .tbl-list-top .excel-search .custom-input .v-input__control .v-field__field .v-field__input {
  626. width: 17.3125rem;
  627. padding-left: 0.75rem;
  628. font-size: 0.75rem !important;
  629. font-weight: 400 !important;
  630. }
  631. .tbl-list-top .excel-search .custom-input .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  632. font-size: 0.75rem;
  633. font-weight: 400;
  634. color: #8e8e8e;
  635. }
  636. .tbl-list-top .excel-search .custom-input .v-input__control .v-field__field .v-field__input::placeholder {
  637. font-size: 0.75rem;
  638. font-weight: 400;
  639. color: #8e8e8e;
  640. }
  641. .view-btm-btn > div {
  642. gap: 0.5rem;
  643. }
  644. .view-btm-btn .custom-btn.v-btn.v-btn--density-default {
  645. width: 5.25rem;
  646. height: 2.25rem;
  647. }
  648. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-list {
  649. width: 5.25rem;
  650. height: 2.25rem;
  651. border: 1px solid #e0e0e0;
  652. }
  653. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-list .v-btn__content {
  654. color: #8e8e8e;
  655. font-size: 0.875rem;
  656. font-weight: 600;
  657. }
  658. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-list .v-btn__content .ico {
  659. width: 1.25rem;
  660. height: 1.25rem;
  661. margin-right: 0.38rem;
  662. background-image: url(../img/ico_view_list2.svg);
  663. }
  664. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-list:hover {
  665. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  666. }
  667. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del {
  668. width: 5.25rem;
  669. height: 2.25rem;
  670. border: none;
  671. background: #6F8AA6;
  672. }
  673. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del .v-btn__content {
  674. color: #ffffff;
  675. font-size: 0.875rem;
  676. font-weight: 600;
  677. }
  678. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del .v-btn__content .ico {
  679. width: 1.125rem;
  680. height: 1.125rem;
  681. margin-right: 0.38rem;
  682. background-image: url(../img/ico_del2.svg);
  683. }
  684. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del:hover {
  685. background: #adbfd2;
  686. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  687. }
  688. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del.v-btn--disabled {
  689. background-color: #e0e0e0 !important;
  690. }
  691. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del.v-btn--disabled .v-btn__content {
  692. color: #8e8e8e !important;
  693. }
  694. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-del.v-btn--disabled .v-btn__content .ico {
  695. background-image: url(../img/ico_del_disabled2.svg);
  696. }
  697. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2 {
  698. background-color: #6f8aa6;
  699. border: none;
  700. }
  701. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2 .v-btn__content {
  702. color: #ffffff;
  703. }
  704. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2 .v-btn__content .ico {
  705. width: 1.25rem;
  706. margin-right: 0.38rem;
  707. height: 1.25rem;
  708. background-image: url(../img/ico_cancel.svg);
  709. }
  710. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2:hover {
  711. background-color: #adbfd2;
  712. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  713. }
  714. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2.v-btn--disabled {
  715. background-color: #e0e0e0 !important;
  716. border: none;
  717. }
  718. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2.v-btn--disabled .v-btn__content {
  719. color: #8E8E8E !important;
  720. }
  721. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-gray-bor2.v-btn--disabled .v-btn__content .ico {
  722. background-image: url(../img/ico_cancel_disabled.svg);
  723. }
  724. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2 {
  725. background-color: #438dff;
  726. }
  727. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2:hover {
  728. background: #90BCFF;
  729. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  730. }
  731. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled {
  732. background-color: #e0e0e0 !important;
  733. }
  734. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled .v-btn__content {
  735. color: #8e8e8e !important;
  736. }
  737. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled .v-btn__content .ico {
  738. background-image: url(../img/ico_save_disabled.svg);
  739. }
  740. .view-btm-btn .custom-btn.v-btn.v-btn--density-default.btn-blue2 .v-btn__content .ico {
  741. width: 1.25rem;
  742. height: 1.25rem;
  743. margin-right: 0.37rem;
  744. background-image: url(../img/ico_save.svg);
  745. }
  746. .custom-dialog {
  747. border-radius: 0.5rem;
  748. }
  749. .custom-dialog .modal-desc {
  750. padding: 1.25rem;
  751. }
  752. .custom-dialog .modal-desc > strong {
  753. color: #000000;
  754. font-weight: 500;
  755. font-size: 0.875rem;
  756. line-height: 0.875rem;
  757. }
  758. .custom-dialog .modal-desc2 {
  759. padding: 0.65rem 1.25rem 0.65rem 1.25rem;
  760. }
  761. .custom-dialog .modal-desc2 ul li {
  762. padding-left: 1.2rem;
  763. position: relative;
  764. color: #555555;
  765. font-size: 0.875rem;
  766. font-weight: 400;
  767. margin-bottom: 1rem;
  768. }
  769. .custom-dialog .modal-desc2 ul li:last-child {
  770. margin-bottom: 0;
  771. }
  772. .custom-dialog .modal-desc2 ul li::before {
  773. width: 0.2rem;
  774. height: 0.2rem;
  775. display: inline-block;
  776. background-color: #555555;
  777. position: absolute;
  778. width: 0.31rem;
  779. height: 0.31rem;
  780. left: 0;
  781. top: 0.38rem;
  782. background: #C0C0C0;
  783. border-radius: 100%;
  784. content: "";
  785. }
  786. .custom-dialog .modal-tit {
  787. height: 4rem;
  788. padding: 1.25rem;
  789. border-bottom: none;
  790. }
  791. .custom-dialog .modal-tit > strong {
  792. font-size: 1rem;
  793. color: #000000;
  794. font-weight: 700;
  795. letter-spacing: -0.02rem;
  796. }
  797. .custom-dialog .modal-tit .modal--btn--wrap {
  798. display: flex;
  799. margin-left: auto;
  800. gap: 1.25rem;
  801. }
  802. .custom-dialog .modal-tit .modal--btn--wrap .btn-bar {
  803. width: 1.5rem;
  804. height: 1.5rem;
  805. background-size: cover;
  806. background-image: url(../img/ico_bar.svg);
  807. }
  808. .custom-dialog .modal-tit .modal--btn--wrap .btn-square {
  809. width: 1.5rem;
  810. height: 1.5rem;
  811. background-size: cover;
  812. background-image: url(../img/ico_square.svg);
  813. }
  814. .custom-dialog .modal-tit .btn-close {
  815. background-image: url(../img/ico_close.svg);
  816. }
  817. .custom-dialog .v-common-dialog-content {
  818. padding: 0.38rem 1.25rem 1.25rem 1.25rem;
  819. }
  820. .custom-dialog .v-common-dialog-content .info-mod {
  821. padding-bottom: 0;
  822. }
  823. .custom-dialog .v-common-dialog-content .info-mod .mod-txt {
  824. font-size: 0.9375rem;
  825. margin-top: 1.56rem;
  826. margin-bottom: 1.94rem;
  827. }
  828. .custom-dialog .v-common-dialog-content .info-mod .txt-field-box .custom-input.v-text-field {
  829. min-height: 2.25rem;
  830. }
  831. .custom-dialog .v-common-dialog-content .info-mod .txt-field-box .custom-input.v-text-field .v-input__control {
  832. height: 2.25rem;
  833. }
  834. .custom-dialog .v-common-dialog-content .info-mod .txt-field-box .custom-input.v-text-field .v-input__control .v-field__field .v-field__input {
  835. height: 2.25rem;
  836. min-height: 2.25rem;
  837. padding: 0 0.75rem;
  838. }
  839. .custom-dialog .v-common-dialog-content .info-mod .error-txt {
  840. margin: 0.8rem 0 0 !important;
  841. }
  842. .custom-dialog .v-common-dialog-content .txt-field-box.error .ico {
  843. right: 0.75rem;
  844. }
  845. .custom-dialog .v-common-dialog-content .otp-reg {
  846. margin-top: 0;
  847. }
  848. .custom-dialog .v-common-dialog-content .otp-reg .otp-set-step .otp-set-box .tit .num {
  849. background-color: #0B318B;
  850. }
  851. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify {
  852. background-color: #F1F7FF;
  853. border-radius: 0.5rem;
  854. border: none;
  855. padding: 1.38rem 0;
  856. }
  857. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .error-txt {
  858. width: 15.625rem;
  859. }
  860. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .certify-logo {
  861. display: flex;
  862. gap: 0.75rem;
  863. margin-bottom: 0.94rem;
  864. }
  865. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .certify-logo .logo {
  866. width: 1.625rem;
  867. height: 1.625rem;
  868. background-image: url(../img/ico_logo.svg);
  869. background-size: cover;
  870. }
  871. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .certify-logo > p {
  872. color: #333;
  873. font-size: 0.9375rem;
  874. font-style: normal;
  875. font-weight: 700;
  876. line-height: 100%;
  877. /* 0.9375rem */
  878. }
  879. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify z .txt-field-box {
  880. width: 15.625remf;
  881. }
  882. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify z .txt-field-box:nth-child(3) {
  883. margin-bottom: 0;
  884. }
  885. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify z .txt-field-box .v-input.v-text-field.custom-input.mini {
  886. min-height: 2.25rem;
  887. }
  888. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify z .txt-field-box .v-input.v-text-field.custom-input.mini .v-input__control {
  889. height: 2.25rem;
  890. }
  891. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify z .txt-field-box .v-input.v-text-field.custom-input.mini .v-input__control .v-field__field .v-field__input {
  892. height: 2.25rem;
  893. min-height: 2.25rem;
  894. padding: 0 0.75rem;
  895. }
  896. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .custom-btn.v-btn.v-btn--density-default.btn-blue-bor {
  897. width: 15.625rem;
  898. background-color: #0B318B;
  899. border-radius: 0.5rem;
  900. border: none;
  901. }
  902. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .custom-btn.v-btn.v-btn--density-default.btn-blue-bor:hover {
  903. background-color: #4875DE !important;
  904. box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);
  905. }
  906. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .custom-btn.v-btn.v-btn--density-default.btn-blue-bor .v-btn__content {
  907. font-size: 0.9375rem !important;
  908. font-weight: 700 !important;
  909. letter-spacing: -0.02813rem !important;
  910. color: #ffffff;
  911. }
  912. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .custom-btn.v-btn.v-btn--density-default.btn-blue-bor.v-btn--disabled {
  913. background-color: #e0e0e0 !important;
  914. }
  915. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .custom-btn.v-btn.v-btn--density-default.btn-blue-bor.v-btn--disabled .v-btn__content {
  916. color: #8e8e8e !important;
  917. }
  918. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 {
  919. width: 100%;
  920. display: flex;
  921. align-items: center;
  922. flex-direction: column;
  923. justify-content: center;
  924. }
  925. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 > p {
  926. color: #0B318B;
  927. text-align: center;
  928. font-size: 1.125rem;
  929. font-weight: 700;
  930. margin-bottom: 0.94rem;
  931. letter-spacing: -0.01125rem;
  932. }
  933. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 > span {
  934. color: #444;
  935. text-align: center;
  936. font-size: 0.9375rem;
  937. font-weight: 400;
  938. letter-spacing: -0.00938rem;
  939. display: inline-block;
  940. margin-bottom: 1.87rem;
  941. }
  942. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box {
  943. display: flex;
  944. align-items: center;
  945. width: 80%;
  946. justify-content: center;
  947. gap: 0.6rem;
  948. }
  949. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default {
  950. margin-top: 0;
  951. }
  952. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-password {
  953. background-color: #6f8aa6;
  954. height: 2.25rem;
  955. width: 6.875rem;
  956. }
  957. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-password.v-btn--disabled {
  958. background-color: #fff !important;
  959. border: 1px solid #CCC;
  960. }
  961. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-password.v-btn--disabled .v-btn__content {
  962. color: #8e8e8e !important;
  963. }
  964. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-blue {
  965. width: 3.5rem;
  966. height: 2.25rem;
  967. }
  968. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-blue.v-btn--disabled {
  969. background-color: #e0e0e0 !important;
  970. }
  971. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .txt-field-box .v-btn.v-btn--density-default.btn-blue.v-btn--disabled .v-btn__content {
  972. color: #8e8e8e !important;
  973. }
  974. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--2 .error-txt {
  975. width: 80%;
  976. }
  977. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--y {
  978. padding: 2.37rem 0;
  979. display: flex;
  980. flex-direction: column;
  981. gap: 1.88rem;
  982. align-items: center;
  983. justify-content: center;
  984. }
  985. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--y .ico {
  986. width: 5rem;
  987. height: 5rem;
  988. border-radius: 50%;
  989. background-color: #fff;
  990. background-position: center;
  991. background-size: 2.25rem 3rem;
  992. background-image: url(../img/ico_certify_y2.svg);
  993. }
  994. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--y > p {
  995. color: #000;
  996. font-size: 0.9375rem;
  997. font-style: normal;
  998. font-weight: 500;
  999. line-height: 100%;
  1000. letter-spacing: -0.00938rem;
  1001. }
  1002. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-certify .otp--certify--y > p > span {
  1003. color: #034ea2;
  1004. font-size: 0.9375rem;
  1005. font-style: normal;
  1006. font-weight: 500;
  1007. line-height: 100%;
  1008. letter-spacing: -0.00938rem;
  1009. }
  1010. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-chk .v-input .v-input__control .v-selection-control .v-label {
  1011. padding-left: 0.38rem;
  1012. }
  1013. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-chk .v-input .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon {
  1014. background-size: cover;
  1015. }
  1016. .custom-dialog .v-common-dialog-content .otp-reg .otp-box .otp-reg-step ul li .numbering {
  1017. border-radius: 6.25rem;
  1018. }
  1019. .custom-dialog .v-common-dialog-content .form-style1.shadow--type {
  1020. border-radius: 0.5rem;
  1021. background: #FFF;
  1022. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  1023. padding: 1.25rem;
  1024. }
  1025. .custom-dialog .v-common-dialog-content .form-style1.shadow--type.col4 {
  1026. margin-top: 0px;
  1027. }
  1028. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr {
  1029. border-top: 1px solid #e0e0e0;
  1030. }
  1031. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr th {
  1032. padding: 0.62rem;
  1033. color: #444444;
  1034. font-size: 0.875rem;
  1035. }
  1036. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr th .cir {
  1037. width: 0.3125rem;
  1038. height: 0.3125rem;
  1039. display: inline-block;
  1040. background-color: #ff4f60;
  1041. border-radius: 50%;
  1042. margin-left: 0.37rem;
  1043. vertical-align: 2px;
  1044. }
  1045. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td {
  1046. padding: 0.62rem;
  1047. color: #444444;
  1048. font-size: 0.875rem;
  1049. }
  1050. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td.critical {
  1051. color: #E1473D;
  1052. }
  1053. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td.major {
  1054. color: #438DFF;
  1055. }
  1056. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td.minor {
  1057. color: #848BA4;
  1058. }
  1059. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-password {
  1060. background: #6f8aa6;
  1061. height: 2.25rem;
  1062. width: 6.875rem;
  1063. }
  1064. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black {
  1065. background: #6f8aa6;
  1066. font-weight: 600 !important;
  1067. }
  1068. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled {
  1069. background-color: #e0e0e0 !important;
  1070. }
  1071. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled .v-btn__content {
  1072. color: #8e8e8e !important;
  1073. }
  1074. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input .v-input__control {
  1075. height: 2.25rem;
  1076. }
  1077. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input .v-input__control .v-field__field .v-field__input {
  1078. padding: 0 0.75rem;
  1079. }
  1080. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  1081. color: #8e8e8e;
  1082. font-weight: 400;
  1083. }
  1084. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input .v-input__control .v-field__field .v-field__input::placeholder {
  1085. color: #8e8e8e;
  1086. font-weight: 400;
  1087. }
  1088. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input.v-text-field.mini2 {
  1089. min-height: 2.25rem;
  1090. }
  1091. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input.v-text-field.mini2 .v-input__control {
  1092. height: 2.25rem;
  1093. }
  1094. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input {
  1095. padding: 0 0.75rem;
  1096. color: #000000;
  1097. height: 2.25rem;
  1098. font-size: 0.875rem;
  1099. font-weight: 400;
  1100. min-height: 2.25rem;
  1101. }
  1102. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  1103. color: #8e8e8e;
  1104. font-size: 0.875rem;
  1105. font-weight: 400;
  1106. }
  1107. .custom-dialog .v-common-dialog-content .form-style1.shadow--type table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::placeholder {
  1108. color: #8e8e8e;
  1109. font-size: 0.875rem;
  1110. font-weight: 400;
  1111. }
  1112. .custom-dialog .v-common-dialog-content .alert-txt .color--red {
  1113. color: #E1473D;
  1114. font-weight: 700;
  1115. }
  1116. .custom-dialog .v-common-dialog-content.type--l {
  1117. padding: 1.25rem;
  1118. }
  1119. .custom-dialog .v-common-dialog-content.type--l .agree--contents {
  1120. height: calc(100vh - 30rem);
  1121. overflow-y: auto;
  1122. }
  1123. .custom-dialog .v-common-dialog-content.type--l .agree--contents.border--top {
  1124. border-top: 1px solid #e8e8e8;
  1125. }
  1126. .custom-dialog .v-common-dialog-content.chart {
  1127. max-height: calc(100vh - 10rem);
  1128. padding: 0 1.25rem 1.25rem 1.25rem;
  1129. }
  1130. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab {
  1131. padding-bottom: 1.25rem;
  1132. display: flex;
  1133. justify-content: flex-start;
  1134. }
  1135. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-input {
  1136. flex: none;
  1137. margin-right: 1.88rem;
  1138. }
  1139. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-selection-control-group {
  1140. gap: 0.63rem;
  1141. display: flex;
  1142. flex-direction: row;
  1143. }
  1144. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-selection-control-group .v-selection-control {
  1145. width: 5.1875rem;
  1146. height: 2.25rem;
  1147. flex: none;
  1148. background-color: black;
  1149. text-align: center;
  1150. border-radius: 0.375rem;
  1151. background-color: #E0E0E0;
  1152. color: #8e8e8e;
  1153. }
  1154. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-selection-control-group .v-selection-control.v-selection-control--dirty {
  1155. background-color: #6F8AA6;
  1156. color: #ffffff;
  1157. }
  1158. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-selection-control-group .v-selection-control__wrapper {
  1159. display: none;
  1160. }
  1161. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .v-selection-control-group .v-label {
  1162. width: 100%;
  1163. display: flex;
  1164. justify-content: center;
  1165. opacity: 1;
  1166. font-size: 0.875rem;
  1167. font-weight: 500;
  1168. }
  1169. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .total-wrap {
  1170. display: flex;
  1171. gap: 0.1rem;
  1172. margin-right: 1.87rem;
  1173. color: #8E8E8E;
  1174. font-size: 0.8125rem;
  1175. font-style: normal;
  1176. align-items: center;
  1177. font-weight: 400;
  1178. }
  1179. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .total-wrap span {
  1180. color: #438DFF;
  1181. font-weight: 900;
  1182. }
  1183. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap {
  1184. padding: 0;
  1185. gap: 0.5rem;
  1186. }
  1187. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap .v-input {
  1188. margin-right: 0;
  1189. }
  1190. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap .custom-btn.btn-list {
  1191. width: 2.25rem;
  1192. height: 2.25rem;
  1193. min-width: 2.25rem;
  1194. background: #ffffff;
  1195. border: 1px solid #d9d9d9;
  1196. }
  1197. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap .custom-btn.btn-list .v-btn__content .ico {
  1198. width: 1.25rem;
  1199. background-size: cover;
  1200. height: 1.25rem;
  1201. background-image: url(../img/ico_list.svg);
  1202. }
  1203. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap .custom-btn.btn-list.active {
  1204. background: #438DFF;
  1205. }
  1206. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap .custom-btn.btn-list.active .v-btn__content .ico {
  1207. background-image: url(../img/ico_list_white.svg);
  1208. }
  1209. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap {
  1210. position: relative;
  1211. }
  1212. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop {
  1213. position: absolute;
  1214. z-index: 100;
  1215. width: 26.375rem;
  1216. top: 3rem;
  1217. background-color: #ffffff;
  1218. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  1219. border-radius: 0.625rem;
  1220. }
  1221. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-tit {
  1222. height: 3.125rem;
  1223. }
  1224. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-tit .btn-close.mini {
  1225. width: 1rem;
  1226. height: 1rem;
  1227. }
  1228. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont {
  1229. padding: 0.94rem 1.25rem;
  1230. height: 60vh;
  1231. overflow-y: auto;
  1232. display: grid;
  1233. grid-template-columns: repeat(2, 1fr); /* 2열 레이아웃 */
  1234. gap: 0.62rem;
  1235. align-content: start;
  1236. }
  1237. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont .custom-check.v-input {
  1238. width: 100%;
  1239. height: 2.5rem;
  1240. display: inline-block;
  1241. border-radius: 0.3125rem;
  1242. border: 1px solid #DFDFDF;
  1243. }
  1244. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont .custom-check.v-input.type3 .v-input__control {
  1245. width: 100%;
  1246. padding: 0 0.94rem;
  1247. height: 2.5rem;
  1248. }
  1249. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont .custom-check.v-input.type3 .v-input__control .v-label {
  1250. width: 100%;
  1251. display: inline-block;
  1252. }
  1253. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont .custom-check.v-input.type3 .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon {
  1254. background-size: cover;
  1255. background-image: url(../img/ico_chk_off.svg);
  1256. min-width: 1rem;
  1257. width: 1rem;
  1258. height: 1rem;
  1259. border: 0;
  1260. }
  1261. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .modal-cont .custom-check.v-input.type3 .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon.mdi-checkbox-marked {
  1262. background-image: url(../img/ico_chk_on.svg);
  1263. }
  1264. .custom-dialog .v-common-dialog-content.chart .dialog-chart-tab .btn-wrap.trend--list--wrap .trend--list--pop .btn-wrap {
  1265. padding: 1.25rem;
  1266. }
  1267. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap {
  1268. display: flex;
  1269. flex-direction: column;
  1270. gap: 1rem;
  1271. overflow-y: auto;
  1272. height: 75vh;
  1273. }
  1274. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart {
  1275. display: flex;
  1276. justify-content: space-between;
  1277. flex-direction: row;
  1278. width: 100%;
  1279. height: 25vh;
  1280. gap: 1.25rem;
  1281. }
  1282. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap {
  1283. height: 100%;
  1284. width: 33.3333333333%;
  1285. gap: 2.5rem;
  1286. border-radius: 0.625rem;
  1287. border: 1px solid #efefef;
  1288. flex-direction: column;
  1289. padding: 1.2rem 1.2rem 0 1.2rem;
  1290. }
  1291. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap::after {
  1292. display: none;
  1293. }
  1294. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-total {
  1295. margin: 0;
  1296. }
  1297. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-total p {
  1298. width: 100%;
  1299. }
  1300. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-total .ico {
  1301. width: 0.875rem;
  1302. height: 0.875rem;
  1303. background-image: url(../img/ico_set.svg);
  1304. display: inline-block;
  1305. background-size: cover;
  1306. cursor: pointer;
  1307. float: right;
  1308. }
  1309. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con {
  1310. width: 100%;
  1311. height: 80%;
  1312. }
  1313. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-wrap-fix {
  1314. left: 1rem;
  1315. top: auto;
  1316. }
  1317. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in {
  1318. height: 100%;
  1319. z-index: 10;
  1320. position: relative;
  1321. }
  1322. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in > div {
  1323. height: 100%;
  1324. }
  1325. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend {
  1326. height: auto;
  1327. display: flex;
  1328. position: absolute;
  1329. right: 50%;
  1330. transform: translateX(50%);
  1331. top: -1.25rem;
  1332. }
  1333. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend {
  1334. display: flex;
  1335. align-items: center;
  1336. }
  1337. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend .line {
  1338. margin-left: 1.25rem;
  1339. width: 0.9375rem;
  1340. height: 0.1875rem;
  1341. border-radius: 6.25rem;
  1342. display: inline-block;
  1343. }
  1344. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend p {
  1345. color: #333;
  1346. font-size: 0.8125rem;
  1347. font-style: normal;
  1348. margin-left: 0.75rem;
  1349. font-weight: 400;
  1350. letter-spacing: -0.00813rem;
  1351. }
  1352. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend:first-child .line {
  1353. background-color: #FF531E;
  1354. }
  1355. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend:nth-child(2) .line {
  1356. background-color: #44C5FF;
  1357. }
  1358. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend:nth-child(3) .line {
  1359. background-color: #FF00C7;
  1360. }
  1361. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend:nth-child(4) .line {
  1362. background-color: #AF70FF;
  1363. }
  1364. .custom-dialog .v-common-dialog-content.chart .dialog-chart-wrap .dialog-chart .chart-wrap .chart-con .chart-in .chart--legend .legend:nth-child(5) .line {
  1365. background-color: #4862FF;
  1366. }
  1367. .custom-dialog .v-common-dialog-content .core--list--component h2.fw--500 {
  1368. font-weight: 500;
  1369. }
  1370. .custom-dialog .v-common-dialog-content .core--list--component h2.fw--500 > span {
  1371. font-weight: 700;
  1372. }
  1373. .custom-dialog .v-common-dialog-content .core--list--component h2.fw--500.mb--125rem {
  1374. margin-bottom: 1.25rem;
  1375. }
  1376. .custom-dialog .v-common-dialog-content .core--list--component .event--stat {
  1377. padding-top: 1.25rem;
  1378. display: flex;
  1379. gap: 0.62rem;
  1380. justify-content: space-between;
  1381. }
  1382. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li {
  1383. width: 100%;
  1384. border-radius: 62.5rem;
  1385. height: 2.375rem;
  1386. color: #ffffff;
  1387. font-size: 0.8125rem;
  1388. font-weight: 500;
  1389. padding: 0 1.12rem;
  1390. display: flex;
  1391. align-items: center;
  1392. line-height: 2.375rem;
  1393. }
  1394. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li .ico {
  1395. background-image: url(../img/ic_tenant01.svg);
  1396. margin-right: 0.62rem;
  1397. width: 1rem;
  1398. display: inline-block;
  1399. background-repeat: no-repeat;
  1400. background-size: cover;
  1401. background-position: center;
  1402. height: 1rem;
  1403. }
  1404. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li span:last-child {
  1405. margin-left: auto;
  1406. font-weight: 900;
  1407. }
  1408. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.critical {
  1409. background-color: #E1473D;
  1410. }
  1411. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.major {
  1412. background-color: #438DFF;
  1413. }
  1414. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.minor {
  1415. background-color: #C3C8D8;
  1416. }
  1417. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.disconnected {
  1418. background-color: #fff;
  1419. border: 1px solid #ffc7c3;
  1420. color: #333333;
  1421. }
  1422. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.disconnected .ico {
  1423. background-image: url(../img/ico_ban.svg);
  1424. }
  1425. .custom-dialog .v-common-dialog-content .core--list--component .event--stat > li.disconnected span:last-child {
  1426. color: #E1473D;
  1427. }
  1428. .custom-dialog .v-common-dialog-content .core--list--component .map--area {
  1429. border-radius: 0.9375rem;
  1430. border: 1px solid #DFDFDF;
  1431. overflow: hidden;
  1432. height: 12rem;
  1433. position: relative;
  1434. }
  1435. .custom-dialog .v-common-dialog-content .core--list--component .map--area .side--title {
  1436. position: absolute;
  1437. border-radius: 0.4375rem;
  1438. border: 1px solid #848484;
  1439. background: rgba(0, 0, 0, 0.5);
  1440. top: 0.94rem;
  1441. left: 0.94rem;
  1442. padding: 0.5rem 0.75rem;
  1443. color: #ffffff;
  1444. text-align: center;
  1445. font-size: 0.75rem;
  1446. font-weight: 500;
  1447. }
  1448. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info {
  1449. position: absolute;
  1450. padding: 1rem 1.25rem;
  1451. border-radius: 0.625rem;
  1452. border: 1px solid #E3E3E3;
  1453. width: 12.5rem;
  1454. background: #FFF;
  1455. }
  1456. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info .area--info--title {
  1457. display: flex;
  1458. justify-content: space-between;
  1459. margin-bottom: 1rem;
  1460. }
  1461. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info .area--info--title p {
  1462. color: #222;
  1463. font-size: 0.9375rem;
  1464. font-weight: 700;
  1465. }
  1466. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info .area--info--title .btn-close {
  1467. background-image: url(/_nuxt/assets/img/ico_close_gray.svg);
  1468. width: 1rem;
  1469. height: 1rem;
  1470. background-repeat: no-repeat;
  1471. background-size: cover;
  1472. }
  1473. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul {
  1474. display: flex;
  1475. flex-direction: column;
  1476. gap: 0.3rem;
  1477. }
  1478. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li {
  1479. display: flex;
  1480. align-items: center;
  1481. }
  1482. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li .ico {
  1483. width: 0.625rem;
  1484. height: 0.625rem;
  1485. border-radius: 50%;
  1486. display: inline-block;
  1487. margin-right: 0.5rem;
  1488. }
  1489. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li .ico.green {
  1490. background-color: #55E074;
  1491. }
  1492. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li .ico.red {
  1493. background-color: #E1473D;
  1494. }
  1495. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li span:nth-child(2) {
  1496. color: #222;
  1497. font-size: 0.75rem;
  1498. font-weight: 500;
  1499. }
  1500. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li span:nth-child(3) {
  1501. color: #222;
  1502. font-size: 0.75rem;
  1503. font-weight: 400;
  1504. margin-left: auto;
  1505. }
  1506. .custom-dialog .v-common-dialog-content .core--list--component .map--area .area--info ul li span:nth-child(3).active {
  1507. font-weight: 700;
  1508. }
  1509. .custom-dialog .v-common-dialog-content .core--list--component .map--area.big--map {
  1510. height: 22rem;
  1511. }
  1512. .custom-dialog .v-common-dialog-content .core--list--component--grid .title h2 {
  1513. font-weight: 500;
  1514. }
  1515. .custom-dialog .v-common-dialog-content .core--list--component--grid .title h2 span {
  1516. font-weight: 700;
  1517. }
  1518. .custom-dialog .btn-wrap {
  1519. justify-content: flex-end;
  1520. padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  1521. }
  1522. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default {
  1523. width: 5.25rem;
  1524. height: 2.25rem;
  1525. border: none;
  1526. }
  1527. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue:hover {
  1528. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  1529. }
  1530. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.v-btn--disabled {
  1531. background: #e0e0e0 !important;
  1532. }
  1533. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.v-btn--disabled .v-btn__content {
  1534. color: #8e8e8e !important;
  1535. }
  1536. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.v-btn--disabled .v-btn__content .ico {
  1537. background-image: url(../img/ico_chk_circle_disabled.svg);
  1538. }
  1539. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue .v-btn__content .ico {
  1540. width: 1.25rem;
  1541. height: 1.25rem;
  1542. margin-right: 0.37rem;
  1543. background-image: url(../img/ico_chk_circle.svg);
  1544. background-repeat: no-repeat;
  1545. background-size: cover;
  1546. background-position: center;
  1547. }
  1548. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-id {
  1549. width: 7.5625rem;
  1550. }
  1551. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-id .ico {
  1552. background-image: url(../img/ico_id_on.svg);
  1553. width: 1.125rem;
  1554. height: 1.125rem;
  1555. }
  1556. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-id.v-btn--disabled .ico {
  1557. background-image: url(../img/ico_id_off.svg);
  1558. }
  1559. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-pw {
  1560. width: 9.1875rem;
  1561. }
  1562. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-pw .ico {
  1563. background-image: url(../img/ico_id_on.svg);
  1564. width: 1.125rem;
  1565. height: 1.125rem;
  1566. }
  1567. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-pw.v-btn--disabled .ico {
  1568. background-image: url(../img/ico_id_off.svg);
  1569. }
  1570. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-ext .v-btn__content .ico {
  1571. background-image: url(../img/ico_time.svg);
  1572. }
  1573. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.btn-ext.v-btn--disabled .ico {
  1574. background-image: url(../img/ico_time_disabled.svg);
  1575. }
  1576. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white {
  1577. background-color: #6f8aa6;
  1578. }
  1579. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white:hover {
  1580. background-color: #adbfd2;
  1581. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  1582. }
  1583. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white.v-btn--disabled {
  1584. background: #e0e0e0 !important;
  1585. }
  1586. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white.v-btn--disabled .v-btn__content {
  1587. color: #8e8e8e !important;
  1588. }
  1589. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white.v-btn--disabled .v-btn__content .ico {
  1590. background-image: url(../img/ico_cancel_disabled.svg);
  1591. }
  1592. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white .v-btn__content {
  1593. color: #ffffff;
  1594. }
  1595. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-white .v-btn__content .ico {
  1596. width: 1.25rem;
  1597. height: 1.25rem;
  1598. margin-right: 0.37rem;
  1599. background-image: url(../img/ico_cancel.svg);
  1600. background-repeat: no-repeat;
  1601. background-size: cover;
  1602. background-position: center;
  1603. }
  1604. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2 {
  1605. background-color: #438dff;
  1606. }
  1607. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2.btn-mod .v-btn__content .ico {
  1608. background-image: url(../img/ico_mod2.svg);
  1609. }
  1610. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2:hover {
  1611. background: #90BCFF;
  1612. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  1613. }
  1614. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled {
  1615. background-color: #e0e0e0 !important;
  1616. }
  1617. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled .v-btn__content {
  1618. color: #8e8e8e !important;
  1619. }
  1620. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled .v-btn__content .ico {
  1621. background-image: url(../img/ico_save_disabled.svg);
  1622. }
  1623. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2.v-btn--disabled.btn-mod .v-btn__content .ico {
  1624. background-image: url(../img/ico_mod_disabled.svg);
  1625. }
  1626. .custom-dialog .btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue2 .v-btn__content .ico {
  1627. width: 1.25rem;
  1628. height: 1.25rem;
  1629. margin-right: 0.37rem;
  1630. background-size: cover;
  1631. background-image: url(../img/ico_save.svg);
  1632. }
  1633. .container .content .content-tit {
  1634. margin-bottom: 1.25rem;
  1635. }
  1636. .container .content .content-tit .location {
  1637. gap: 0.37rem;
  1638. }
  1639. .container .content .content-tit .location > span {
  1640. font-size: 0.875rem;
  1641. color: #444444;
  1642. letter-spacing: -0.0175rem;
  1643. }
  1644. .container .content .content-tit .location > span.now {
  1645. font-weight: 700;
  1646. }
  1647. .container .content .content-tit h2 {
  1648. font-size: 1.125rem;
  1649. color: #000;
  1650. font-weight: 400;
  1651. }
  1652. .container .content .content-tit > span {
  1653. color: #8e8e8e;
  1654. font-size: 0.875rem;
  1655. font-weight: 400;
  1656. }
  1657. .container .content .content-tit > span::before {
  1658. background-color: #8e8e8e;
  1659. }
  1660. .container .content .content-tit > span.arr {
  1661. color: #0B318B;
  1662. font-size: 1.125rem;
  1663. font-style: normal;
  1664. margin-right: 0.62rem;
  1665. font-weight: 700;
  1666. line-height: 100%; /* 1.125rem */
  1667. }
  1668. .container .content .content-tit > span.arr::before {
  1669. background-color: transparent;
  1670. background-image: url(../img/ico_tit_arr.svg);
  1671. width: 1.1875rem;
  1672. height: 1.1875rem;
  1673. background-size: cover;
  1674. background-repeat: no-repeat;
  1675. margin: 0 0.62rem;
  1676. }
  1677. .container .content .content-tit .ico {
  1678. width: 1.375rem;
  1679. height: 1.375rem;
  1680. background-image: url(../img/ico_set_blue.svg);
  1681. background-size: cover;
  1682. cursor: pointer;
  1683. }
  1684. .container .content .search-wrap .search-btn .v-btn {
  1685. width: 5.25rem !important;
  1686. }
  1687. .container .content .search-wrap .custom-btn.v-btn.v-btn--density-default.btn-gray-bor {
  1688. border: 1px solid #cccccc;
  1689. color: #8e8e8e;
  1690. font-size: 0.875rem;
  1691. font-weight: 600;
  1692. }
  1693. .container .content .search-wrap .custom-btn.v-btn.v-btn--density-default.btn-gray-bor:hover {
  1694. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  1695. }
  1696. .container .content .search-wrap .perfor-tab {
  1697. margin-right: 1.87rem;
  1698. padding-right: 1.87rem;
  1699. border-right: 1px solid #e4e4e4;
  1700. width: auto;
  1701. }
  1702. .container .content .search-wrap .perfor-tab .v-radio-group {
  1703. width: 6.5625rem;
  1704. }
  1705. .container .content .search-wrap .perfor-tab .v-radio-group .v-input__control {
  1706. width: 6.5625rem;
  1707. }
  1708. .container .content .search-wrap .perfor-tab .v-radio-group .v-input__control .v-radio:hover .v-label {
  1709. box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
  1710. }
  1711. .container .content .search-wrap .perfor-tab .v-radio-group .v-input__control .v-radio.v-selection-control--dirty .v-label {
  1712. color: #000000;
  1713. border: 1px solid #a5a5a5;
  1714. }
  1715. .container .content .search-wrap .perfor-tab .v-radio-group .v-input__control .v-radio .v-label {
  1716. background-color: #ffffff;
  1717. border-radius: 0.375rem;
  1718. font-size: 0.8125rem;
  1719. font-weight: 600;
  1720. letter-spacing: -0.00813rem;
  1721. color: #949494;
  1722. border: 1px solid #e0e0e0;
  1723. }
  1724. .container .content .search-wrap .search-line-wrap {
  1725. gap: 1rem;
  1726. }
  1727. .container .content .search-wrap .search-line-wrap .search-line {
  1728. gap: 2.5rem;
  1729. align-items: center;
  1730. }
  1731. .container .content .search-wrap .search-line-wrap .search-line .search-box > strong {
  1732. margin-right: 0.5rem;
  1733. width: 5.875rem;
  1734. margin-left: 0;
  1735. font-size: 0.875rem;
  1736. font-weight: 700;
  1737. color: #444444;
  1738. }
  1739. .container .content .search-wrap .search-line-wrap .search-line .search-box > strong.op--3 {
  1740. opacity: 0.3;
  1741. }
  1742. .container .content .search-wrap .search-line-wrap .search-line .search-box .info {
  1743. width: 1rem;
  1744. height: 1rem;
  1745. background-image: url(../img/ico_info.svg);
  1746. background-size: cover;
  1747. background-repeat: no-repeat;
  1748. margin-left: 0.3rem;
  1749. position: relative;
  1750. cursor: pointer;
  1751. }
  1752. .container .content .search-wrap .search-line-wrap .search-line .search-box .info .info--tt {
  1753. position: absolute;
  1754. top: -3.5rem;
  1755. left: -11.8rem;
  1756. display: inline-block;
  1757. font-style: normal;
  1758. font-weight: 500;
  1759. color: #fff;
  1760. background-color: rgba(67, 141, 255, 0.7);
  1761. padding: 0.9375rem 1.5625rem 1.0625rem 1.5625rem;
  1762. border-radius: 0.625rem;
  1763. width: 25rem;
  1764. text-align: center;
  1765. display: none;
  1766. z-index: 30;
  1767. }
  1768. .container .content .search-wrap .search-line-wrap .search-line .search-box .info .info--tt::after {
  1769. content: "";
  1770. background-image: url(../img/ico_tool.svg);
  1771. width: 0.875rem;
  1772. height: 0.625rem;
  1773. display: inline-block;
  1774. position: absolute;
  1775. bottom: -0.625rem;
  1776. left: 50%;
  1777. transform: translateX(-50%);
  1778. }
  1779. .container .content .search-wrap .search-line-wrap .search-line .search-box .info:hover .info--tt {
  1780. display: block;
  1781. }
  1782. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in {
  1783. margin-left: 0;
  1784. }
  1785. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-select.v-input .v-input__control .v-field .v-field__field {
  1786. padding-left: 0.75rem;
  1787. }
  1788. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-select.v-input .v-input__control .v-field.v-field--disabled .v-field__input .v-select__selection .v-select__selection-text {
  1789. color: #e0e0e0 !important;
  1790. }
  1791. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-select.v-input .v-input__control .v-field .v-field__append-inner .v-icon {
  1792. margin-right: 0.75rem;
  1793. }
  1794. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-select.v-input.v-input--disabled .v-input__control .v-field {
  1795. background-color: #fbfbfb;
  1796. opacity: 1;
  1797. }
  1798. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-select.v-input.v-input--disabled .v-input__control .v-field__outline {
  1799. border: 1px solid #ccc;
  1800. }
  1801. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-input.v-text-field .v-input__control .v-field__field .v-field__input {
  1802. padding: 0 0.75rem;
  1803. }
  1804. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-input.v-text-field .v-input__control .v-field__field .v-field__input:-moz-read-only {
  1805. color: #000000 !important;
  1806. font-weight: 400 !important;
  1807. background: #ffffff;
  1808. }
  1809. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-input.v-text-field .v-input__control .v-field__field .v-field__input:read-only {
  1810. color: #000000 !important;
  1811. font-weight: 400 !important;
  1812. background: #ffffff;
  1813. }
  1814. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-radio .v-selection-control--disabled {
  1815. opacity: 1;
  1816. }
  1817. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-radio.picker-terms {
  1818. width: auto;
  1819. }
  1820. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-radio.picker-terms .v-input__control .v-selection-control-group {
  1821. gap: 0.5rem;
  1822. }
  1823. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .custom-radio.picker-terms .v-input__control .v-selection-control-group .v-selection-control.v-radio {
  1824. width: 2.8125rem;
  1825. }
  1826. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap {
  1827. margin-left: 0.5rem;
  1828. }
  1829. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar {
  1830. width: 12.5rem;
  1831. }
  1832. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap::before {
  1833. right: 0.75rem;
  1834. }
  1835. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input {
  1836. color: #8e8e8e;
  1837. font-size: 0.875rem;
  1838. }
  1839. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input::-moz-placeholder {
  1840. color: #8e8e8e;
  1841. font-size: 0.875rem;
  1842. }
  1843. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input::placeholder {
  1844. color: #8e8e8e;
  1845. font-size: 0.875rem;
  1846. }
  1847. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input.dp__disabled {
  1848. border: 1px solid #CCC;
  1849. background-color: #FBFBFB;
  1850. }
  1851. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input.dp__disabled::-moz-placeholder {
  1852. color: #e0e0e0 !important;
  1853. }
  1854. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__input_wrap .dp__input.dp__disabled::placeholder {
  1855. color: #e0e0e0 !important;
  1856. }
  1857. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__main .dp--menu-wrapper {
  1858. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  1859. border-radius: 1.25rem;
  1860. overflow: hidden;
  1861. z-index: 2;
  1862. }
  1863. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .calendar .dp__main .dp--menu-wrapper .dp__menu .dp__arrow_top {
  1864. display: none;
  1865. }
  1866. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-refresh {
  1867. width: 2.25rem;
  1868. height: 2.25rem;
  1869. padding: 0;
  1870. }
  1871. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-refresh .v-btn__content .ico {
  1872. background-image: url(../img/ico_backup1.svg);
  1873. }
  1874. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-ref {
  1875. width: 2.25rem;
  1876. min-width: 2.25rem;
  1877. height: 2.25rem;
  1878. padding: 0;
  1879. border-radius: 0.375rem;
  1880. border: 1px solid #CCC;
  1881. margin-left: 0.3rem;
  1882. }
  1883. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-ref .v-btn__content .ico {
  1884. display: inline-block;
  1885. width: 0.875rem;
  1886. height: 0.875rem;
  1887. background-size: cover;
  1888. background-image: url(../img/ico_refresh.svg);
  1889. }
  1890. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-ref.v-btn--disabled {
  1891. border: 1px solid #E7E7E7;
  1892. background-color: #ffffff !important;
  1893. }
  1894. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .custom-btn.btn-ref.v-btn--disabled .v-btn__content .ico {
  1895. background-image: url(../img/ico_refresh_dis.svg);
  1896. }
  1897. .container .content .search-wrap .search-line-wrap .search-line .search-box .search-box-in .calendar-wrap .text {
  1898. color: #8e8e8e;
  1899. }
  1900. .container .content .chart-wrap {
  1901. background-color: #ffffff;
  1902. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  1903. border-radius: 0.5rem;
  1904. padding: 1.88rem;
  1905. flex-direction: column;
  1906. }
  1907. .container .content .chart-wrap .no--data {
  1908. display: flex;
  1909. justify-content: center;
  1910. align-items: center;
  1911. color: var(--gray2, #444);
  1912. font-size: 0.875rem;
  1913. font-weight: 700;
  1914. height: 100%;
  1915. }
  1916. .container .content .chart-wrap .no--data .ico {
  1917. width: 1.25rem;
  1918. height: 1.25rem;
  1919. margin-right: 0.62rem;
  1920. background-size: cover;
  1921. background-image: url(../img/ico_no_data_nw.svg);
  1922. }
  1923. .container .content .chart-wrap .chart-total {
  1924. margin-top: 0;
  1925. font-size: 0.9375rem;
  1926. z-index: 1;
  1927. background-color: #ffffff;
  1928. margin-bottom: 1rem;
  1929. }
  1930. .container .content .chart-wrap .chart-total > p {
  1931. font-size: 0.9375rem;
  1932. font-weight: 700;
  1933. }
  1934. .container .content .chart-wrap .chart-total .legend-area {
  1935. justify-content: center;
  1936. gap: 1.56rem;
  1937. }
  1938. .container .content .chart-wrap .chart-total .legend-area .legend-box {
  1939. color: #333333;
  1940. font-weight: 400;
  1941. font-size: 0.8125rem;
  1942. }
  1943. .container .content .chart-wrap .chart-total .legend-area .legend-box.none--atv {
  1944. color: rgba(68, 68, 68, 0.3);
  1945. }
  1946. .container .content .chart-wrap .chart-total .legend-area .legend-box.none--atv .cir {
  1947. background-color: rgba(68, 68, 68, 0.3) !important;
  1948. }
  1949. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir {
  1950. width: 0.9375rem;
  1951. height: 0.1875rem;
  1952. border-radius: 6.25rem;
  1953. }
  1954. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir1 {
  1955. background-color: #FF531E;
  1956. }
  1957. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir2 {
  1958. background-color: #44C5FF;
  1959. }
  1960. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir3 {
  1961. background-color: #FF00C7;
  1962. }
  1963. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir4 {
  1964. background-color: #AF70FF;
  1965. }
  1966. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir5 {
  1967. background-color: #4862FF;
  1968. }
  1969. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir6 {
  1970. background-color: #6ACB52;
  1971. }
  1972. .container .content .chart-wrap .chart-total .legend-area .legend-box .cir.cir7 {
  1973. background-color: #00D47B;
  1974. }
  1975. .container .content .chart-wrap .chart-wrap-fix {
  1976. left: 1.5rem;
  1977. width: 100%;
  1978. height: 100%;
  1979. top: 4rem;
  1980. }
  1981. .container .content .chart-wrap .scrl-chart {
  1982. margin-left: 0;
  1983. padding-bottom: 0;
  1984. height: 100%;
  1985. }
  1986. .container .content .chart-wrap .scrl-chart .scrl-in {
  1987. height: 100%;
  1988. }
  1989. .container .content .chart-wrap .scrl-chart .scrl-in div {
  1990. height: 100%;
  1991. }
  1992. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr {
  1993. border-top: 1px solid #e0e0e0;
  1994. }
  1995. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr th {
  1996. padding: 0.62rem;
  1997. color: #444444;
  1998. font-size: 0.875rem;
  1999. }
  2000. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr th .cir {
  2001. width: 0.3125rem;
  2002. height: 0.3125rem;
  2003. display: inline-block;
  2004. background-color: #ff4f60;
  2005. border-radius: 50%;
  2006. margin-left: 0.37rem;
  2007. vertical-align: 2px;
  2008. }
  2009. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td {
  2010. padding: 0.62rem;
  2011. color: #444444;
  2012. font-size: 0.875rem;
  2013. }
  2014. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .status {
  2015. display: inline-block;
  2016. border: 1px solid #B8D4FF;
  2017. padding: 0.5rem 0.62rem;
  2018. border-radius: 6.25rem;
  2019. color: #438DFF;
  2020. font-size: 0.75rem;
  2021. font-style: normal;
  2022. font-weight: 400;
  2023. }
  2024. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .status .ico {
  2025. display: inline-block;
  2026. width: 0.75rem;
  2027. margin-right: 0.62rem;
  2028. height: 0.75rem;
  2029. background-color: #438dff;
  2030. border-radius: 50%;
  2031. }
  2032. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .status.discon {
  2033. border: 1px solid #E8E7ED;
  2034. color: #A5A3AE;
  2035. }
  2036. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .status.discon .ico {
  2037. background-color: #D8D7DC;
  2038. }
  2039. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-password {
  2040. background: #6f8aa6;
  2041. height: 2.25rem;
  2042. width: 6.875rem;
  2043. }
  2044. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black {
  2045. background: #6f8aa6;
  2046. }
  2047. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled {
  2048. background-color: #e0e0e0 !important;
  2049. }
  2050. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled .v-btn__content {
  2051. color: #8e8e8e !important;
  2052. }
  2053. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini .v-input__control .v-field__field .v-field__input {
  2054. padding: 0 0.75rem;
  2055. color: #000000;
  2056. height: 2.25rem;
  2057. font-size: 0.875rem;
  2058. font-weight: 400 !important;
  2059. min-height: 2.25rem;
  2060. }
  2061. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  2062. color: #8e8e8e;
  2063. font-size: 0.875rem;
  2064. font-weight: 400 !important;
  2065. }
  2066. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini .v-input__control .v-field__field .v-field__input::placeholder {
  2067. color: #8e8e8e;
  2068. font-size: 0.875rem;
  2069. font-weight: 400 !important;
  2070. }
  2071. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini .v-input__details {
  2072. overflow: visible;
  2073. }
  2074. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini .v-input__details .v-messages__message {
  2075. padding: 0;
  2076. }
  2077. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini2 {
  2078. min-height: 2.25rem;
  2079. }
  2080. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini2 .v-input__control {
  2081. height: 2.25rem;
  2082. }
  2083. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input {
  2084. padding: 0 0.75rem;
  2085. color: #000000;
  2086. height: 2.25rem;
  2087. font-size: 0.875rem;
  2088. font-weight: 400;
  2089. min-height: 2.25rem;
  2090. }
  2091. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  2092. color: #8e8e8e;
  2093. font-size: 0.875rem;
  2094. font-weight: 400;
  2095. }
  2096. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::placeholder {
  2097. color: #8e8e8e;
  2098. font-size: 0.875rem;
  2099. font-weight: 400;
  2100. }
  2101. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-radio.v-input.type2 .v-input__control .v-selection-control-group .v-radio .v-label {
  2102. padding-left: 0.56rem;
  2103. font-weight: 500;
  2104. }
  2105. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-radio.v-input.type2 .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input {
  2106. width: 1rem;
  2107. height: 1rem;
  2108. }
  2109. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-radio.v-input.type2 .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon {
  2110. border: 1px solid #C0C0C0;
  2111. }
  2112. .container .content .view-wrap .view-box .view-box-btm .form-style1 table tbody tr td .custom-radio.v-input.type2 .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon.mdi-radiobox-marked {
  2113. border: 1px solid #C0C0C0;
  2114. background-color: #438dff;
  2115. }
  2116. .container .content .content--db--wrap {
  2117. display: flex;
  2118. gap: 1.25rem;
  2119. }
  2120. .container .content .content--db--wrap .content--inner .content--inner--title {
  2121. display: flex;
  2122. justify-content: space-between;
  2123. align-items: center;
  2124. }
  2125. .container .content .content--db--wrap .content--inner .content--inner--title h3 {
  2126. color: #222;
  2127. font-size: 1rem;
  2128. font-weight: 700;
  2129. }
  2130. .container .content .content--db--wrap .content--inner .content--inner--title .d--day {
  2131. border-radius: 6.25rem;
  2132. border: 1px solid #AFCFFF;
  2133. color: #438DFF;
  2134. font-size: 0.8125rem;
  2135. font-weight: 700;
  2136. padding: 0.5rem 0.94rem 0.62rem;
  2137. }
  2138. .container .content .content--db--wrap .content--inner .content--inner--title .d--day span {
  2139. font-weight: 400;
  2140. }
  2141. .container .content .content--db--wrap .content--l {
  2142. background-color: #fff;
  2143. width: 28.125rem;
  2144. height: 52.8125rem;
  2145. padding: 1.25rem;
  2146. border-radius: 1.25rem;
  2147. }
  2148. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--chart--wrap {
  2149. display: flex;
  2150. align-items: center;
  2151. justify-content: center;
  2152. padding: 3rem 0rem 3rem 0rem;
  2153. }
  2154. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--chart--wrap .db--chart {
  2155. position: relative;
  2156. width: 12.5rem;
  2157. height: 12.5rem;
  2158. max-width: 12.5rem;
  2159. max-height: 12.5rem;
  2160. }
  2161. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--chart--wrap .db--chart canvas {
  2162. position: relative;
  2163. z-index: 3;
  2164. }
  2165. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--chart--wrap .db--chart:after {
  2166. content: "";
  2167. display: block;
  2168. width: 12.5rem;
  2169. height: 12.5rem;
  2170. position: absolute;
  2171. top: 50%;
  2172. left: 50%;
  2173. transform: translate(-50%, -50%);
  2174. background: #EAEAEA;
  2175. border-radius: 12.5rem;
  2176. z-index: 1;
  2177. }
  2178. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--chart--wrap .db--chart:before {
  2179. content: "";
  2180. display: block;
  2181. width: 7.5rem;
  2182. height: 7.5rem;
  2183. position: absolute;
  2184. top: 50%;
  2185. left: 50%;
  2186. transform: translate(-50%, -50%);
  2187. background: #fff;
  2188. border-radius: 12.5rem;
  2189. z-index: 2;
  2190. }
  2191. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--table table {
  2192. width: 100%;
  2193. margin-top: 1.75rem;
  2194. }
  2195. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--table table tbody tr {
  2196. border-top: 1px solid #e0e0e0;
  2197. }
  2198. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--table table tbody tr th {
  2199. text-align: left;
  2200. padding: 1.12rem 0.62rem;
  2201. font-size: 0.875rem;
  2202. color: #444444;
  2203. font-weight: 700;
  2204. }
  2205. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--table table tbody tr td {
  2206. color: #444444;
  2207. font-size: 0.875rem;
  2208. font-weight: 400;
  2209. }
  2210. .container .content .content--db--wrap .content--l .content--inner .content--inner--content .db--table table tbody tr td span {
  2211. font-weight: 700;
  2212. color: #438dff;
  2213. }
  2214. .container .content .content--db--wrap .content--r {
  2215. display: flex;
  2216. flex-direction: column;
  2217. width: calc(100% - 28.14rem);
  2218. gap: 1.25rem;
  2219. }
  2220. .container .content .content--db--wrap .content--r .content--r--t {
  2221. background-color: #fff;
  2222. width: 100%;
  2223. border-radius: 1.25rem;
  2224. height: 27.625rem;
  2225. padding: 1.25rem;
  2226. }
  2227. .container .content .content--db--wrap .content--r .content--r--t .content--inner {
  2228. height: 100%;
  2229. }
  2230. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title {
  2231. margin-bottom: 1.12rem;
  2232. }
  2233. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap {
  2234. display: flex;
  2235. gap: 1.88rem;
  2236. }
  2237. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status {
  2238. display: flex;
  2239. position: relative;
  2240. gap: 0.63rem;
  2241. align-items: center;
  2242. }
  2243. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card {
  2244. padding: 0.5rem 0.75rem;
  2245. border-radius: 6.25rem;
  2246. display: flex;
  2247. align-items: center;
  2248. }
  2249. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card span {
  2250. color: #111;
  2251. font-size: 0.8125rem;
  2252. font-weight: 500;
  2253. letter-spacing: -0.00813rem;
  2254. margin-right: 1.5rem;
  2255. }
  2256. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card span.count {
  2257. margin-right: 0;
  2258. font-weight: 700;
  2259. }
  2260. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card .ico {
  2261. background-repeat: no-repeat;
  2262. background-position: center;
  2263. background-size: cover;
  2264. width: 0.875rem;
  2265. height: 0.875rem;
  2266. margin-right: 0.63rem;
  2267. }
  2268. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.con {
  2269. border: 1px solid #a1c6ff;
  2270. }
  2271. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.con .ico {
  2272. background-image: url(../img/ico_status1.svg);
  2273. }
  2274. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.con .count {
  2275. color: #438DFF;
  2276. }
  2277. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.dis--con {
  2278. border: 1px solid #F6A19B;
  2279. }
  2280. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.dis--con .ico {
  2281. background-image: url(../img/ico_status2.svg);
  2282. }
  2283. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.dis--con .count {
  2284. color: #E1473D;
  2285. }
  2286. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.active {
  2287. border: 1px solid #a1c6ff;
  2288. }
  2289. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.active .ico {
  2290. background-image: url(../img/ico_status1.svg);
  2291. }
  2292. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.active .count {
  2293. color: #438DFF;
  2294. }
  2295. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.issue {
  2296. border: 1px solid #F6A19B;
  2297. }
  2298. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.issue .ico {
  2299. background-image: url(../img/ico_status3.svg);
  2300. }
  2301. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .status .status--card.issue .count {
  2302. color: #E1473D;
  2303. }
  2304. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .map {
  2305. position: relative;
  2306. }
  2307. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .map .custom-btn.btn-map {
  2308. width: 6.75rem;
  2309. height: 1.875rem;
  2310. border-radius: 6.25rem;
  2311. }
  2312. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .map .custom-btn.btn-map .v-btn__content {
  2313. font-size: 0.8125rem !important;
  2314. }
  2315. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--title .status--wrap .map .custom-btn.btn-map .v-btn__content .ico {
  2316. width: 0.875rem;
  2317. height: 0.875rem;
  2318. background-image: url(../img/ico_map.svg);
  2319. background-repeat: no-repeat;
  2320. background-position: center;
  2321. background-size: cover;
  2322. margin-right: 0.31rem;
  2323. }
  2324. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap {
  2325. display: flex;
  2326. align-items: flex-end;
  2327. width: 100%;
  2328. height: 19.5rem;
  2329. }
  2330. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card {
  2331. width: 100%;
  2332. height: 18rem;
  2333. background-color: #f1f7ff;
  2334. border-radius: 0.9375rem;
  2335. border: 1px solid #D4E7FF;
  2336. padding: 2.25rem 1.88rem 1.25rem 1.88rem;
  2337. display: flex;
  2338. justify-content: center;
  2339. gap: 1.37rem;
  2340. position: relative;
  2341. flex-direction: column;
  2342. }
  2343. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--t {
  2344. display: flex;
  2345. align-items: center;
  2346. gap: 0.94rem;
  2347. justify-content: flex-start;
  2348. }
  2349. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--icon {
  2350. background-color: #fff;
  2351. width: 2.5rem;
  2352. height: 2.5rem;
  2353. border-radius: 6.25rem;
  2354. background-image: url(../img/ico_equip.svg);
  2355. background-size: 1.25rem 1.25rem;
  2356. background-position: center;
  2357. }
  2358. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--txt p {
  2359. color: #222;
  2360. font-size: 1rem;
  2361. font-weight: 700;
  2362. margin-bottom: 0.2rem;
  2363. }
  2364. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--txt span {
  2365. color: #8C8C8C;
  2366. font-size: 0.6875rem;
  2367. font-weight: 400;
  2368. letter-spacing: -0.00688rem;
  2369. }
  2370. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st {
  2371. width: 100%;
  2372. display: flex;
  2373. flex-direction: column;
  2374. gap: 0.75rem;
  2375. }
  2376. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li {
  2377. display: flex;
  2378. align-items: center;
  2379. }
  2380. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li .circle {
  2381. border-radius: 50%;
  2382. width: 0.5625rem;
  2383. height: 0.5625rem;
  2384. margin-right: 0.94rem;
  2385. vertical-align: -0.1rem;
  2386. background-color: #55E074;
  2387. }
  2388. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li .circle.critical {
  2389. background-color: #E1473D;
  2390. }
  2391. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li p {
  2392. color: #222;
  2393. font-size: 0.6875rem;
  2394. font-weight: 500;
  2395. }
  2396. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li span {
  2397. color: #222;
  2398. font-size: 0.6875rem;
  2399. font-weight: 500;
  2400. margin-left: auto;
  2401. }
  2402. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card .equip--st li span.active {
  2403. font-weight: 700;
  2404. color: #111111;
  2405. }
  2406. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card::before {
  2407. position: absolute;
  2408. content: "Connected";
  2409. left: 0.62rem;
  2410. top: -0.69rem;
  2411. color: #438DFF;
  2412. text-align: center;
  2413. font-size: 0.6875rem;
  2414. font-weight: 500;
  2415. border-radius: 6.25rem;
  2416. border: 1px solid #9BC2FF;
  2417. background: #FFF;
  2418. padding: 0.38rem 0.62rem 0.5rem;
  2419. z-index: 2;
  2420. }
  2421. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card.dis::before {
  2422. border: 1px solid #F6A19B;
  2423. color: #E1473D;
  2424. content: "Disconnected";
  2425. }
  2426. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .db--status .equip--card--wrap .equip--card.dis::after {
  2427. position: absolute;
  2428. content: "";
  2429. left: 0;
  2430. bottom: 0;
  2431. width: 100%;
  2432. height: 100%;
  2433. border: 1px solid #f4a19c;
  2434. background-color: rgba(6, 16, 39, 0.5019607843);
  2435. border-radius: 0.9375rem;
  2436. background-image: url(../img/ico_wifi.svg);
  2437. background-position: center;
  2438. background-size: 2.5rem 2.5rem;
  2439. }
  2440. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper {
  2441. padding-bottom: 3.25rem;
  2442. }
  2443. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls {
  2444. display: flex;
  2445. margin-top: 1.25rem;
  2446. align-items: center;
  2447. gap: 1.25rem;
  2448. height: 2rem;
  2449. justify-content: center;
  2450. }
  2451. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-button-prev {
  2452. position: static;
  2453. margin-top: 0;
  2454. width: 2rem;
  2455. height: 2rem;
  2456. background-image: url(../img/ico_arrow_prev.svg);
  2457. background-position: center;
  2458. background-repeat: no-repeat;
  2459. background-size: cover;
  2460. }
  2461. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-button-prev::after {
  2462. content: none;
  2463. }
  2464. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-button-next {
  2465. position: static;
  2466. width: 2rem;
  2467. height: 2rem;
  2468. margin-top: 0;
  2469. background-image: url(../img/ico_arrow_next.svg);
  2470. background-position: center;
  2471. background-repeat: no-repeat;
  2472. background-size: cover;
  2473. }
  2474. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-button-next::after {
  2475. content: none;
  2476. }
  2477. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-pagination {
  2478. position: static;
  2479. width: auto;
  2480. }
  2481. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-pagination .swiper-pagination-bullet {
  2482. margin-left: 0;
  2483. margin-right: 0.63rem;
  2484. width: 0.75rem;
  2485. height: 0.75rem;
  2486. background-color: #E9E9E9;
  2487. opacity: 1;
  2488. }
  2489. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  2490. background-color: #6F8AA6;
  2491. }
  2492. .container .content .content--db--wrap .content--r .content--r--t .content--inner .content--inner--content .swiper .swiper-controls .swiper-pagination .swiper-pagination-bullet:last-child {
  2493. margin-right: 0;
  2494. }
  2495. .container .content .content--db--wrap .content--r .content--r--b {
  2496. background-color: #fff;
  2497. width: 100%;
  2498. height: 23.9375rem;
  2499. border-radius: 1.25rem;
  2500. padding: 1.25rem;
  2501. }
  2502. .container .content .content--db--wrap .content--r .content--r--b .content--inner {
  2503. height: 100%;
  2504. gap: 3rem;
  2505. display: flex;
  2506. flex-direction: column;
  2507. }
  2508. .container .content .content--db--wrap .content--r .content--r--b .content--inner::after {
  2509. display: none;
  2510. }
  2511. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title {
  2512. margin: 0;
  2513. justify-content: flex-start;
  2514. }
  2515. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title p {
  2516. color: #222222;
  2517. font-weight: 700;
  2518. font-size: 1rem;
  2519. margin-right: 2.5rem;
  2520. }
  2521. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .ico {
  2522. width: 0.9375rem;
  2523. height: 0.9375rem;
  2524. margin-right: 2.5rem;
  2525. margin-left: 0.75rem;
  2526. background-image: url(../img/ico_set.svg);
  2527. display: inline-block;
  2528. background-size: cover;
  2529. cursor: pointer;
  2530. }
  2531. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .btn-wrap {
  2532. margin-left: auto;
  2533. }
  2534. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .btn-wrap .custom-btn.btn-pip {
  2535. margin-left: 0.94rem;
  2536. width: 6.75rem;
  2537. height: 2.25rem;
  2538. padding: 0;
  2539. }
  2540. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .btn-wrap .custom-btn.btn-pip .v-btn__content {
  2541. color: #8E8E8E;
  2542. font-size: 0.875rem;
  2543. font-weight: 500;
  2544. letter-spacing: -0.00875rem;
  2545. }
  2546. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .btn-wrap .custom-btn.btn-pip .v-btn__content .ico {
  2547. width: 1.25rem;
  2548. height: 1.25rem;
  2549. display: inline-block;
  2550. background-image: url(../img/ico_pip2.svg);
  2551. background-size: cover;
  2552. background-repeat: no-repeat;
  2553. margin-right: 0.38rem;
  2554. margin-left: 0;
  2555. background-position: center;
  2556. }
  2557. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .select--wrap {
  2558. display: flex;
  2559. gap: 0.63rem;
  2560. align-items: center;
  2561. }
  2562. .container .content .content--db--wrap .content--r .content--r--b .content--inner .content--inner--title .select--wrap .custom-btn.v-btn.btn-blue {
  2563. width: 5.25rem;
  2564. }
  2565. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con {
  2566. width: 100%;
  2567. height: 100%;
  2568. }
  2569. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in {
  2570. height: calc(100% - 1rem);
  2571. z-index: 10;
  2572. position: relative;
  2573. }
  2574. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in > div {
  2575. height: 100%;
  2576. }
  2577. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend {
  2578. height: auto;
  2579. display: flex;
  2580. position: absolute;
  2581. right: 50%;
  2582. transform: translateX(50%);
  2583. top: -2.5rem;
  2584. }
  2585. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend {
  2586. display: flex;
  2587. align-items: center;
  2588. }
  2589. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend .line {
  2590. margin-left: 1.25rem;
  2591. width: 0.9375rem;
  2592. height: 0.1875rem;
  2593. border-radius: 6.25rem;
  2594. display: inline-block;
  2595. background-color: #55E074;
  2596. }
  2597. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend p {
  2598. color: #333;
  2599. font-size: 0.8125rem;
  2600. font-style: normal;
  2601. margin-left: 0.75rem;
  2602. font-weight: 400;
  2603. letter-spacing: -0.00813rem;
  2604. }
  2605. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend:first-child .line {
  2606. background-color: #FF531E;
  2607. }
  2608. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend:nth-child(2) .line {
  2609. background-color: #44C5FF;
  2610. }
  2611. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend:nth-child(3) .line {
  2612. background-color: #FF00C7;
  2613. }
  2614. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend:nth-child(4) .line {
  2615. background-color: #AF70FF;
  2616. }
  2617. .container .content .content--db--wrap .content--r .content--r--b .content--inner .chart--con .chart--in .chart--legend .legend:nth-child(5) .line {
  2618. background-color: #4862FF;
  2619. }
  2620. .container .content .content--db--wrap .content--inner--content.no--data {
  2621. display: flex;
  2622. justify-content: center;
  2623. align-items: center;
  2624. color: var(--gray2, #444);
  2625. font-size: 0.875rem;
  2626. font-weight: 700;
  2627. height: 100%;
  2628. }
  2629. .container .content .content--db--wrap .content--inner--content.no--data .ico {
  2630. width: 1.25rem;
  2631. height: 1.25rem;
  2632. margin-right: 0.62rem;
  2633. background-size: cover;
  2634. background-image: url(../img/ico_no_data_nw.svg);
  2635. }
  2636. .container .content .dash--board--wrapper.none--title {
  2637. height: calc(100vh - 6.5rem);
  2638. }
  2639. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap {
  2640. height: 100%;
  2641. }
  2642. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) {
  2643. height: auto;
  2644. }
  2645. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) .inner--content {
  2646. height: 100%;
  2647. }
  2648. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) .inner--content .oper--stat {
  2649. height: calc(66.6666666667% - 3.75rem);
  2650. }
  2651. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) .inner--content .oper--stat .card--alarm .card .ico {
  2652. width: 2rem;
  2653. height: 2rem;
  2654. }
  2655. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) .inner--content .oper--stat .card--alarm .card .alarm--txt {
  2656. display: flex;
  2657. flex-direction: column;
  2658. gap: 0.3rem;
  2659. }
  2660. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(1) .inner--content .oper--stat:nth-of-type(2) {
  2661. height: calc(33.3333333333% - 0.625rem);
  2662. }
  2663. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) {
  2664. padding-top: 1.25rem;
  2665. height: calc(100% - 15.7rem);
  2666. }
  2667. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content {
  2668. height: calc(100% - 1rem);
  2669. }
  2670. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper {
  2671. height: 100%;
  2672. }
  2673. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper {
  2674. height: 100%;
  2675. }
  2676. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide {
  2677. height: 100%;
  2678. }
  2679. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .tenant--card--wrap {
  2680. display: flex;
  2681. flex-wrap: wrap;
  2682. flex-direction: row;
  2683. height: 100%;
  2684. }
  2685. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .tenant--card--wrap .tenant--card {
  2686. width: calc(50% - 0.25rem);
  2687. height: calc((100% - 3.1rem) / 7);
  2688. display: flex;
  2689. flex-direction: column;
  2690. justify-content: space-between;
  2691. }
  2692. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents {
  2693. width: 100%;
  2694. padding-top: 0px;
  2695. height: 100%;
  2696. }
  2697. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul {
  2698. width: 100%;
  2699. height: 100%;
  2700. gap: 0.62rem;
  2701. }
  2702. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li {
  2703. padding: 0.54rem;
  2704. width: calc((100% - 0.62rem) / 2);
  2705. height: calc((100% - 1.86rem) / 4);
  2706. }
  2707. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li .chart--box {
  2708. margin-top: 0.5rem;
  2709. width: calc(100% - 6.2rem);
  2710. height: 50%;
  2711. }
  2712. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li.critical .current--value--ps {
  2713. color: #f00 !important;
  2714. }
  2715. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li.major .current--value--ps {
  2716. color: #C96103 !important;
  2717. }
  2718. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li.minor .current--value--ps {
  2719. color: #DDA405 !important;
  2720. }
  2721. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.user--list > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .user--list--contents > ul > li.normal .current--value--ps {
  2722. color: #2D8CFA !important;
  2723. }
  2724. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1) {
  2725. height: 50%;
  2726. }
  2727. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1).no--data {
  2728. height: 100%;
  2729. }
  2730. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1) .inner--content {
  2731. height: 100%;
  2732. }
  2733. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1) .inner--content > div {
  2734. height: calc((100% - 0.5rem) / 3);
  2735. display: flex;
  2736. flex-direction: column;
  2737. justify-content: space-between;
  2738. }
  2739. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1) .inner--content > div:nth-of-type(2) {
  2740. height: calc((100% - 0.5rem) / 3 - 1.2rem);
  2741. }
  2742. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(1) .inner--content > div:nth-of-type(3) {
  2743. height: calc((100% - 0.5rem) / 3 - 2.5rem);
  2744. }
  2745. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) {
  2746. height: 50%;
  2747. }
  2748. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content {
  2749. height: 100%;
  2750. }
  2751. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content .swiper {
  2752. height: 100%;
  2753. }
  2754. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper {
  2755. height: calc(100% - 1rem);
  2756. }
  2757. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide {
  2758. height: 100%;
  2759. }
  2760. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .equip--card--wrap {
  2761. height: 100%;
  2762. }
  2763. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap.core--tp > div:nth-of-type(2) .inner--content .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card {
  2764. height: 25% !important;
  2765. }
  2766. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--header--wrap.mt--15rem {
  2767. margin-top: 1rem;
  2768. }
  2769. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--header--wrap .inner--component--title.none--after::after {
  2770. display: none;
  2771. }
  2772. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--header--wrap .inner--component--date {
  2773. color: #8E8E8E;
  2774. font-size: 0.8125rem;
  2775. font-style: normal;
  2776. font-weight: 400;
  2777. }
  2778. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--header--wrap .inner--component--total {
  2779. color: #8E8E8E;
  2780. font-size: 0.8125rem;
  2781. font-weight: 400;
  2782. }
  2783. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--header--wrap .inner--component--total span {
  2784. color: #438DFF;
  2785. font-weight: 900;
  2786. }
  2787. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content {
  2788. gap: 0.5rem;
  2789. }
  2790. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.df--block {
  2791. display: block;
  2792. }
  2793. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.pt--125rem {
  2794. padding-top: 0.75rem;
  2795. }
  2796. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.pt--1rem {
  2797. padding-top: 0.75rem;
  2798. }
  2799. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat {
  2800. border-radius: 0.625rem;
  2801. border: 1px solid #EFEFEF;
  2802. background: #FFF;
  2803. width: 100%;
  2804. padding: 0.75rem 1rem;
  2805. }
  2806. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--title {
  2807. display: flex;
  2808. justify-content: space-between;
  2809. margin-bottom: 0.75rem;
  2810. }
  2811. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--title h3 {
  2812. color: #111;
  2813. font-size: 0.7rem;
  2814. font-style: normal;
  2815. font-weight: 700;
  2816. }
  2817. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--title p {
  2818. color: #555;
  2819. font-size: 0.7rem;
  2820. font-weight: 400;
  2821. }
  2822. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--title p span {
  2823. color: #111;
  2824. font-weight: 500;
  2825. }
  2826. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont {
  2827. display: flex;
  2828. justify-content: space-between;
  2829. gap: 2.12rem;
  2830. }
  2831. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card {
  2832. display: flex;
  2833. width: 33.3333333333%;
  2834. flex-direction: column;
  2835. gap: 0.5rem;
  2836. }
  2837. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card .card--count {
  2838. padding: 0.25rem 0.75rem;
  2839. border-radius: 6.25rem;
  2840. background-color: #eff2f4;
  2841. color: #444;
  2842. font-size: 0.6rem;
  2843. font-weight: 400;
  2844. text-align: center;
  2845. width: 5rem;
  2846. }
  2847. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card .card--count span {
  2848. font-weight: 700;
  2849. }
  2850. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card .card--txt {
  2851. display: flex;
  2852. justify-content: space-between;
  2853. color: #333;
  2854. font-size: 0.7rem;
  2855. align-items: center;
  2856. font-weight: 400;
  2857. }
  2858. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card .card--txt span {
  2859. color: #333;
  2860. font-size: 1.12rem;
  2861. font-weight: 900;
  2862. position: relative;
  2863. }
  2864. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card .card--txt span::after {
  2865. content: "";
  2866. width: 0.0625rem;
  2867. height: 1.0625rem;
  2868. background-color: #d2d2d2;
  2869. position: absolute;
  2870. right: -1.1rem;
  2871. top: 0.2rem;
  2872. }
  2873. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--cont .card:last-child .card--txt span::after {
  2874. display: none;
  2875. }
  2876. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm {
  2877. display: flex;
  2878. gap: 3.12rem;
  2879. }
  2880. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm.gap--0 {
  2881. gap: 0;
  2882. }
  2883. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm.mb--1rem {
  2884. margin-bottom: 0.94rem;
  2885. }
  2886. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card {
  2887. display: flex;
  2888. width: 50%;
  2889. gap: 0.94rem;
  2890. align-items: center;
  2891. position: relative;
  2892. }
  2893. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card .ico {
  2894. background-color: #E4EFFF;
  2895. border-radius: 50%;
  2896. width: 2.2rem;
  2897. height: 2.2rem;
  2898. background-image: url(../img/ico_core_alarm1.svg);
  2899. background-position: center;
  2900. background-repeat: no-repeat;
  2901. background-size: 1rem 1rem;
  2902. }
  2903. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.tenant1 .ico {
  2904. background-image: url(../img/ico_tenant1.svg);
  2905. }
  2906. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.tenant2 .ico {
  2907. background-image: url(../img/ico_tenant2.svg);
  2908. }
  2909. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.tenant3 .ico {
  2910. background-image: url(../img/ico_tenant3.svg);
  2911. }
  2912. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.tenant4 .ico {
  2913. background-image: url(../img/ico_tenant4.svg);
  2914. }
  2915. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.license1 .ico {
  2916. background-image: url(../img/ico_certify_y3.svg);
  2917. }
  2918. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.license2 .ico {
  2919. background-image: url(../img/ico_certify_n.svg) !important;
  2920. }
  2921. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card .alarm--txt p {
  2922. color: #222;
  2923. font-size: 0.65rem;
  2924. font-weight: 400;
  2925. }
  2926. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card .alarm--txt span {
  2927. color: #438DFF;
  2928. font-size: 0.8rem;
  2929. font-weight: 700;
  2930. }
  2931. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card:first-child::after {
  2932. content: "";
  2933. width: 0.0625rem;
  2934. height: 1.5rem;
  2935. background-color: #d2d2d2;
  2936. position: absolute;
  2937. right: -1.56rem;
  2938. top: 0.5rem;
  2939. }
  2940. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.no--alarm .ico {
  2941. background-color: #FFEBEA;
  2942. background-image: url(../img/ico_core_alarm2.svg);
  2943. }
  2944. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.no--alarm .alarm--txt span {
  2945. color: #E1473D;
  2946. }
  2947. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.gray--alarm .ico {
  2948. background-color: #F5F5F5;
  2949. }
  2950. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .oper--stat .card--alarm .card.gray--alarm .alarm--txt span {
  2951. color: #333333;
  2952. }
  2953. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat {
  2954. margin-bottom: 1rem;
  2955. width: 100%;
  2956. padding: 0.75rem 1rem;
  2957. border-radius: 0.625rem;
  2958. }
  2959. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--title {
  2960. display: flex;
  2961. justify-content: space-between;
  2962. margin-bottom: 0.75rem;
  2963. }
  2964. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--title h3 {
  2965. color: #111;
  2966. font-size: 0.7rem;
  2967. font-style: normal;
  2968. font-weight: 700;
  2969. }
  2970. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--cont {
  2971. display: flex;
  2972. align-items: center;
  2973. }
  2974. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--cont .ico {
  2975. width: 1.25rem;
  2976. height: 1.25rem;
  2977. background-position: center;
  2978. background-size: cover;
  2979. margin-right: 0.75rem;
  2980. background-repeat: no-repeat;
  2981. }
  2982. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--cont p {
  2983. color: #222;
  2984. font-size: 0.7rem;
  2985. font-weight: 400;
  2986. }
  2987. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat .card--cont span {
  2988. margin-left: auto;
  2989. color: #E1473D;
  2990. font-size: 1.12rem;
  2991. font-weight: 700;
  2992. }
  2993. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat.discon {
  2994. border: 1px solid #F4A19C;
  2995. background: #FFF4F3;
  2996. }
  2997. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .link--stat.discon .card--cont .ico {
  2998. background-image: url(../img/ico_link.svg);
  2999. }
  3000. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap {
  3001. display: flex;
  3002. flex-direction: column;
  3003. gap: 0.5rem;
  3004. }
  3005. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card {
  3006. border-radius: 0.625rem;
  3007. position: relative;
  3008. border: 1px solid #EFEFEF;
  3009. /*height: 4rem;*/
  3010. display: flex;
  3011. align-items: center;
  3012. width: 100%;
  3013. padding: 0 1.5rem;
  3014. }
  3015. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.critical {
  3016. border: 1px solid #F4A19C;
  3017. background-color: #FFF4F3;
  3018. }
  3019. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.major {
  3020. border: 1px solid #FFD3AC;
  3021. background-color: #FFF6EE;
  3022. }
  3023. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.minor {
  3024. border: 1px solid #FFE6A5;
  3025. background-color: #FFF7E2;
  3026. }
  3027. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.normal {
  3028. border: 1px solid #E3E3E3;
  3029. background-color: #ffffff;
  3030. }
  3031. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.discon {
  3032. position: relative;
  3033. }
  3034. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card.discon::after {
  3035. content: "";
  3036. width: 100%;
  3037. height: 100%;
  3038. background-color: rgba(255, 0, 0, 0.5);
  3039. border-radius: 0.625rem;
  3040. position: absolute;
  3041. top: 0;
  3042. left: 0;
  3043. background-image: url(../img/ico_wifi.svg);
  3044. background-size: 2.5rem 2.5rem;
  3045. background-position: center;
  3046. }
  3047. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--name {
  3048. color: #222;
  3049. font-size: 0.75rem;
  3050. font-style: normal;
  3051. font-weight: 700;
  3052. width: 7%;
  3053. margin-right: 1.5rem;
  3054. }
  3055. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st {
  3056. display: flex;
  3057. flex-wrap: wrap;
  3058. width: 93%;
  3059. row-gap: 1rem;
  3060. -moz-column-gap: 1.88rem;
  3061. column-gap: 1.88rem;
  3062. }
  3063. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li {
  3064. width: calc(50% - 1rem);
  3065. display: flex;
  3066. align-items: center;
  3067. }
  3068. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle {
  3069. width: 0.5625rem;
  3070. height: 0.5625rem;
  3071. border-radius: 50%;
  3072. margin-right: 0.62rem;
  3073. background-color: #55E074;
  3074. }
  3075. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle.critical {
  3076. background-color: #FF0000;
  3077. }
  3078. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle.major {
  3079. background-color: #C96103;
  3080. }
  3081. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle.minor {
  3082. background-color: #DDA405;
  3083. }
  3084. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle.warning {
  3085. background-color: #D1B568;
  3086. }
  3087. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li .circle.normal {
  3088. background-color: #2D8CFA;
  3089. }
  3090. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li > p {
  3091. color: #222;
  3092. font-size: 0.55rem;
  3093. font-weight: 500;
  3094. }
  3095. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li span {
  3096. color: #222;
  3097. font-size: 0.55rem;
  3098. font-weight: 500;
  3099. margin-left: auto;
  3100. }
  3101. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .equip--card--wrap .equip--card .equip--st > li span.active {
  3102. font-weight: 700;
  3103. }
  3104. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap {
  3105. display: flex;
  3106. flex-direction: column;
  3107. gap: 0.5rem;
  3108. }
  3109. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card {
  3110. border-radius: 0.625rem;
  3111. border: 1px solid #EFEFEF;
  3112. background: #F8F8F8;
  3113. padding: 0.6rem 1rem;
  3114. }
  3115. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name {
  3116. display: flex;
  3117. justify-content: space-between;
  3118. margin-bottom: 0.25rem;
  3119. }
  3120. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name p {
  3121. color: #222;
  3122. font-size: 0.7rem;
  3123. line-height: 0.8125rem;
  3124. font-weight: 500;
  3125. letter-spacing: -0.00813rem;
  3126. }
  3127. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name .ico {
  3128. width: 0.875rem;
  3129. height: 0.875rem;
  3130. background-image: url(../img/ico_pin_off.svg);
  3131. background-repeat: no-repeat;
  3132. background-size: cover;
  3133. cursor: pointer;
  3134. }
  3135. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name .ico.active {
  3136. background-image: url(../img/ico_pin_on.svg);
  3137. }
  3138. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap {
  3139. display: flex;
  3140. gap: 0.94rem;
  3141. justify-content: space-between;
  3142. }
  3143. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--num span:nth-child(1) {
  3144. color: #438DFF;
  3145. font-size: 1rem;
  3146. font-weight: 900;
  3147. letter-spacing: -0.01125rem;
  3148. margin-right: 0.2rem;
  3149. }
  3150. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--num span:nth-child(2) {
  3151. color: #8C8C8C;
  3152. font-size: 0.7rem;
  3153. font-weight: 500;
  3154. letter-spacing: -0.0075rem;
  3155. }
  3156. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar {
  3157. width: 100%;
  3158. position: relative;
  3159. }
  3160. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar .bg--bar {
  3161. position: absolute;
  3162. bottom: 0;
  3163. width: 100%;
  3164. background-color: #EAEAEA;
  3165. border-radius: 6.25rem;
  3166. height: 0.75rem;
  3167. }
  3168. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3169. height: 0.75rem;
  3170. line-height: 0.75rem;
  3171. background: #438DFF;
  3172. border-radius: 6.25rem;
  3173. color: #FFF;
  3174. text-align: center;
  3175. font-size: 0.625rem;
  3176. font-weight: 700;
  3177. letter-spacing: -0.00625rem;
  3178. }
  3179. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.discon .tenant--name p {
  3180. color: rgba(34, 34, 34, 0.3);
  3181. }
  3182. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.discon .tenant--name p::after {
  3183. content: "";
  3184. background-image: url(../img/ico_ban.svg);
  3185. width: 0.875rem;
  3186. height: 0.875rem;
  3187. background-size: cover;
  3188. position: absolute;
  3189. margin-left: 0.3rem;
  3190. }
  3191. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.critical .tenant--per--wrap .tenant--per--num span:first-child {
  3192. color: #f00;
  3193. }
  3194. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.critical .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3195. background-color: #f00;
  3196. }
  3197. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.major .tenant--per--wrap .tenant--per--num span:first-child {
  3198. color: #C96103;
  3199. }
  3200. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.major .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3201. background-color: #C96103;
  3202. }
  3203. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.minor .tenant--per--wrap .tenant--per--num span:first-child {
  3204. color: #DDA405;
  3205. }
  3206. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.minor .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3207. background-color: #DDA405;
  3208. }
  3209. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.normal .tenant--per--wrap .tenant--per--num span:first-child {
  3210. color: #2D8CFA;
  3211. }
  3212. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.normal .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3213. background-color: #2D8CFA;
  3214. }
  3215. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-pagination {
  3216. position: static;
  3217. width: auto;
  3218. margin-top: 0.75rem;
  3219. }
  3220. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-pagination .swiper-pagination-bullet {
  3221. margin-left: 0;
  3222. margin-right: 0.63rem;
  3223. width: 0.75rem;
  3224. height: 0.75rem;
  3225. background-color: #E9E9E9;
  3226. opacity: 1;
  3227. }
  3228. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  3229. background-color: #6F8AA6;
  3230. }
  3231. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content .swiper .swiper-pagination .swiper-pagination-bullet:last-child {
  3232. margin-right: 0;
  3233. }
  3234. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide {
  3235. display: flex;
  3236. gap: 0.5rem;
  3237. }
  3238. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap {
  3239. width: 50%;
  3240. }
  3241. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card {
  3242. padding: 0.5rem 0.94rem;
  3243. align-items: flex-start;
  3244. justify-content: space-between;
  3245. }
  3246. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--name {
  3247. font-size: 0.7rem;
  3248. font-style: normal;
  3249. font-weight: 700;
  3250. width: 25%;
  3251. word-break: keep-all;
  3252. margin-right: 0.5rem;
  3253. }
  3254. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--st {
  3255. display: flex;
  3256. flex-direction: column;
  3257. row-gap: 0.5rem;
  3258. width: calc(75% - 0.5rem);
  3259. }
  3260. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--st > li {
  3261. width: 100%;
  3262. display: flex;
  3263. align-items: center;
  3264. }
  3265. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--st > li .circle {
  3266. width: 0.375rem;
  3267. height: 0.375rem;
  3268. }
  3269. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--st > li > p {
  3270. font-size: 0.6rem;
  3271. }
  3272. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .swiper-slide .equip--card--wrap .equip--card .equip--st > li span {
  3273. font-size: 0.6rem;
  3274. }
  3275. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap {
  3276. display: flex;
  3277. flex-direction: column;
  3278. gap: 0.62rem;
  3279. }
  3280. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card {
  3281. border-radius: 0.625rem;
  3282. border: 1px solid #EFEFEF;
  3283. background: #F8F8F8;
  3284. padding: 0.94rem 1.25rem;
  3285. }
  3286. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name {
  3287. display: flex;
  3288. justify-content: space-between;
  3289. margin-bottom: 0.62rem;
  3290. }
  3291. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name p {
  3292. color: #222;
  3293. font-size: 0.8125rem;
  3294. font-weight: 500;
  3295. letter-spacing: -0.00813rem;
  3296. }
  3297. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name .ico {
  3298. width: 0.875rem;
  3299. height: 0.875rem;
  3300. background-image: url(../img/ico_pin_off.svg);
  3301. background-repeat: no-repeat;
  3302. background-size: cover;
  3303. cursor: pointer;
  3304. }
  3305. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--name .ico.active {
  3306. background-image: url(../img/ico_pin_on.svg);
  3307. }
  3308. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap {
  3309. display: flex;
  3310. gap: 0.94rem;
  3311. justify-content: space-between;
  3312. }
  3313. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--num span:nth-child(1) {
  3314. color: #438DFF;
  3315. font-size: 1.125rem;
  3316. font-weight: 900;
  3317. letter-spacing: -0.01125rem;
  3318. margin-right: 0.2rem;
  3319. }
  3320. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--num span:nth-child(2) {
  3321. color: #8C8C8C;
  3322. font-size: 0.75rem;
  3323. font-weight: 500;
  3324. letter-spacing: -0.0075rem;
  3325. }
  3326. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar {
  3327. width: 100%;
  3328. position: relative;
  3329. }
  3330. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar .bg--bar {
  3331. position: absolute;
  3332. bottom: 0;
  3333. width: 100%;
  3334. background-color: #EAEAEA;
  3335. border-radius: 6.25rem;
  3336. height: 0.75rem;
  3337. }
  3338. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3339. height: 0.75rem;
  3340. line-height: 0.75rem;
  3341. background: #438DFF;
  3342. border-radius: 6.25rem;
  3343. color: #FFF;
  3344. text-align: center;
  3345. font-size: 0.625rem;
  3346. font-weight: 700;
  3347. letter-spacing: -0.00625rem;
  3348. }
  3349. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.warning .tenant--per--wrap .tenant--per--num span:first-child {
  3350. color: #E1473D;
  3351. }
  3352. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-wrapper .tenant--card--wrap .tenant--card.warning .tenant--per--wrap .tenant--per--bar .bg--bar .fill--bar {
  3353. background-color: #e1473d;
  3354. }
  3355. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-pagination {
  3356. position: static;
  3357. width: auto;
  3358. margin-top: 0.75rem;
  3359. }
  3360. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-pagination .swiper-pagination-bullet {
  3361. margin-left: 0;
  3362. margin-right: 0.63rem;
  3363. width: 0.75rem;
  3364. height: 0.75rem;
  3365. background-color: #E9E9E9;
  3366. opacity: 1;
  3367. }
  3368. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  3369. background-color: #6F8AA6;
  3370. }
  3371. .container .content .dash--board--wrapper .dash--board--contents.type3 .core--component--wrap .inner--content.swiper--view--2 .swiper .swiper-pagination .swiper-pagination-bullet:last-child {
  3372. margin-right: 0;
  3373. }
  3374. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap.mt--15rem {
  3375. margin-top: 1.56rem;
  3376. }
  3377. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .inner--component--title.none--after::after {
  3378. display: none;
  3379. }
  3380. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box {
  3381. display: flex;
  3382. padding-left: 1.25rem;
  3383. position: relative;
  3384. gap: 0.63rem;
  3385. }
  3386. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box::before {
  3387. content: "";
  3388. width: 0.0625rem;
  3389. height: 1.125rem;
  3390. position: absolute;
  3391. top: 50%;
  3392. transform: translateY(-50%);
  3393. left: 0;
  3394. background-color: #E0E0E0;
  3395. }
  3396. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .custom-btn.sort-btn {
  3397. width: 2.25rem;
  3398. height: 2.25rem;
  3399. min-width: 2.25rem;
  3400. border-radius: 0.3125rem;
  3401. border: 1px solid #D1D1D1;
  3402. background-color: #FFF;
  3403. padding: 0;
  3404. background-size: 0.875rem 0.875rem;
  3405. background-image: url(../img/ico_sort.svg);
  3406. background-repeat: no-repeat;
  3407. background-position: center;
  3408. }
  3409. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv {
  3410. position: absolute;
  3411. right: 0;
  3412. background-color: #fff;
  3413. border-radius: 0.5rem;
  3414. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  3415. padding: 1.25rem 1.38rem;
  3416. z-index: 2;
  3417. top: 2.5rem;
  3418. }
  3419. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul {
  3420. display: flex;
  3421. flex-direction: column;
  3422. gap: 0.94rem;
  3423. }
  3424. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul li {
  3425. color: #000;
  3426. font-size: 0.8125rem;
  3427. font-style: normal;
  3428. font-weight: 400;
  3429. cursor: pointer;
  3430. }
  3431. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul li.atv {
  3432. font-weight: 700;
  3433. }
  3434. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content {
  3435. padding-top: 1rem;
  3436. }
  3437. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card {
  3438. display: flex;
  3439. gap: 0.94rem;
  3440. flex-wrap: wrap;
  3441. }
  3442. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li {
  3443. border-radius: 0.625rem;
  3444. border: 1px solid #EFEFEF;
  3445. background: #F8F8F8;
  3446. width: calc(11.1111111111% - 0.84rem);
  3447. padding: 1rem;
  3448. height: 7rem;
  3449. }
  3450. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li:hover {
  3451. border: 1px solid #b4d1ff;
  3452. }
  3453. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--title {
  3454. display: flex;
  3455. justify-content: space-between;
  3456. align-items: center;
  3457. margin-bottom: 0.5rem;
  3458. }
  3459. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--title .ran--area {
  3460. color: #222;
  3461. font-size: 0.8rem;
  3462. font-weight: 700;
  3463. }
  3464. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--title .more--btn {
  3465. width: 0.875rem;
  3466. height: 0.875rem;
  3467. min-width: 0.875rem;
  3468. padding: 0;
  3469. background: url(../img/ico_ran_arrow_gray.svg) no-repeat center;
  3470. background-size: cover;
  3471. }
  3472. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--stat {
  3473. display: flex;
  3474. flex-direction: column;
  3475. gap: 0.25rem;
  3476. }
  3477. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--stat p {
  3478. display: flex;
  3479. justify-content: space-between;
  3480. }
  3481. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--stat p span {
  3482. color: #222;
  3483. font-size: 0.7rem;
  3484. font-weight: 500;
  3485. }
  3486. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li .ran--stat p span:nth-child(2) {
  3487. font-weight: 700;
  3488. color: #111111;
  3489. }
  3490. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--blue {
  3491. border: 1px solid #1E76FF;
  3492. background: #438DFF;
  3493. }
  3494. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--blue .ran--title span {
  3495. color: #ffffff;
  3496. }
  3497. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--blue .ran--title .more--btn {
  3498. background-image: url(../img/ico_ran_arrow_white.svg);
  3499. }
  3500. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--blue .ran--stat p span {
  3501. color: #ffffff;
  3502. }
  3503. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--blue .ran--stat p span.color--yel {
  3504. color: #FAFF00;
  3505. }
  3506. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--red {
  3507. border: 1px solid #BB251B;
  3508. background: #E1473D;
  3509. }
  3510. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--red .ran--title span {
  3511. color: #ffffff;
  3512. }
  3513. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--red .ran--title .more--btn {
  3514. background-image: url(../img/ico_ran_arrow_white.svg);
  3515. }
  3516. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--red .ran--stat p span {
  3517. color: #ffffff;
  3518. }
  3519. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .ran--card > li.ran--red .ran--stat p span.color--yel {
  3520. color: #FAFF00;
  3521. }
  3522. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .core--card {
  3523. row-gap: 0.5rem;
  3524. }
  3525. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap .inner--content .core--card > li .card--header h2 {
  3526. font-size: 0.8rem;
  3527. }
  3528. .container .content .dash--board--wrapper .dash--board--contents.type2 .core--component--wrap.small .inner--content .equip--card--wrap {
  3529. height: calc(100% - 1.6rem);
  3530. }
  3531. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--wrap {
  3532. height: 100%;
  3533. }
  3534. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--wrap .current--value {
  3535. right: -4rem;
  3536. width: auto;
  3537. }
  3538. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents {
  3539. height: 100%;
  3540. }
  3541. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper {
  3542. box-shadow: none;
  3543. }
  3544. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--pin {
  3545. color: transparent;
  3546. background-image: url(../img/ico_pin_on.svg);
  3547. width: 1rem;
  3548. height: 1rem;
  3549. background-size: cover;
  3550. display: inline-block;
  3551. line-height: 1rem;
  3552. background-position: center;
  3553. }
  3554. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .none--pin {
  3555. color: #444444;
  3556. font-size: 0.875rem;
  3557. font-weight: 400;
  3558. }
  3559. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--ban {
  3560. color: rgba(34, 34, 34, 0.3);
  3561. }
  3562. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--ban::after {
  3563. content: "";
  3564. width: 0.875rem;
  3565. height: 0.875rem;
  3566. background-image: url(../img/ico_ban.svg);
  3567. display: inline-block;
  3568. background-size: cover;
  3569. margin-left: 0.5rem;
  3570. }
  3571. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--dis {
  3572. color: rgba(34, 34, 34, 0.3);
  3573. }
  3574. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--critical::before {
  3575. content: "";
  3576. display: inline-block;
  3577. margin-right: 0.62rem;
  3578. border-radius: 50%;
  3579. width: 0.75rem;
  3580. height: 0.75rem;
  3581. background-color: #f00;
  3582. }
  3583. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--major::before {
  3584. content: "";
  3585. display: inline-block;
  3586. margin-right: 0.62rem;
  3587. border-radius: 50%;
  3588. width: 0.75rem;
  3589. height: 0.75rem;
  3590. background-color: #C96103;
  3591. }
  3592. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--minor::before {
  3593. content: "";
  3594. display: inline-block;
  3595. margin-right: 0.62rem;
  3596. border-radius: 50%;
  3597. width: 0.75rem;
  3598. height: 0.75rem;
  3599. background-color: #DDA405;
  3600. }
  3601. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--contents .tbl-wrapper .user--list--normal::before {
  3602. content: "";
  3603. display: inline-block;
  3604. margin-right: 0.62rem;
  3605. border-radius: 50%;
  3606. width: 0.75rem;
  3607. height: 0.75rem;
  3608. background-color: #2D8CFA;
  3609. }
  3610. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph {
  3611. height: 100%;
  3612. padding: 1.25rem;
  3613. }
  3614. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap {
  3615. display: flex;
  3616. align-items: center;
  3617. justify-content: space-between;
  3618. }
  3619. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .current--date {
  3620. color: #8E8E8E;
  3621. font-size: 0.8125rem;
  3622. font-weight: 400;
  3623. }
  3624. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper {
  3625. display: flex;
  3626. align-items: center;
  3627. gap: 1.25rem;
  3628. }
  3629. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .total--wrapper {
  3630. color: #222;
  3631. font-size: 0.8125rem;
  3632. font-weight: 400;
  3633. }
  3634. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .total--wrapper .total--count {
  3635. color: #438DFF;
  3636. font-size: 0.8125rem;
  3637. font-weight: 700;
  3638. }
  3639. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap {
  3640. display: flex;
  3641. align-items: center;
  3642. justify-content: center;
  3643. gap: 0.94rem;
  3644. }
  3645. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap .page--numb {
  3646. height: 1.625rem;
  3647. line-height: 1.625rem;
  3648. display: flex;
  3649. align-items: center;
  3650. gap: 0.1rem;
  3651. color: #666;
  3652. font-size: 0.8125rem;
  3653. font-weight: 400;
  3654. }
  3655. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap .page--numb .current {
  3656. color: #333;
  3657. font-size: 0.8125rem;
  3658. font-weight: 700;
  3659. }
  3660. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap .page--btn {
  3661. border-radius: 0.5rem;
  3662. border: 1px solid #DDD !important;
  3663. background: #FFF;
  3664. width: 1.625rem !important;
  3665. min-width: 1.635rem !important;
  3666. height: 1.625rem !important;
  3667. padding: 0px !important;
  3668. }
  3669. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap .page--btn.prev--btn {
  3670. background: url(../img/ic_chv.svg) no-repeat center;
  3671. }
  3672. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .pager--btn--wrap .page--btn.next--btn {
  3673. background: url(../img/ic_chv.svg) no-repeat center;
  3674. transform: rotate(180deg);
  3675. }
  3676. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .search--box {
  3677. display: flex;
  3678. padding-left: 1.25rem;
  3679. position: relative;
  3680. gap: 0.63rem;
  3681. }
  3682. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .search--box::before {
  3683. content: "";
  3684. width: 0.0625rem;
  3685. height: 1.125rem;
  3686. position: absolute;
  3687. top: 50%;
  3688. transform: translateY(-50%);
  3689. left: 0;
  3690. background-color: #E0E0E0;
  3691. }
  3692. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .inner--header--wrap .pagenation--wrapper .search--box .custom-btn.sort-btn {
  3693. width: 2.25rem;
  3694. height: 2.25rem;
  3695. min-width: 2.25rem;
  3696. border-radius: 0.3125rem;
  3697. border: 1px solid #D1D1D1;
  3698. background-color: #FFF;
  3699. padding: 0;
  3700. background-size: 0.875rem 0.875rem;
  3701. background-image: url(../img/ico_sort.svg);
  3702. background-repeat: no-repeat;
  3703. background-position: center;
  3704. }
  3705. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents {
  3706. height: calc(100% - 1.25rem);
  3707. }
  3708. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal {
  3709. width: 100%;
  3710. display: flex;
  3711. align-items: flex-start;
  3712. justify-content: flex-start;
  3713. flex-wrap: wrap;
  3714. padding: 0;
  3715. padding-bottom: 1.25rem;
  3716. padding-top: 0.8rem;
  3717. gap: 0.45rem;
  3718. }
  3719. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li {
  3720. border-radius: 0.625rem;
  3721. border: 1px solid #EFEFEF;
  3722. background: #F8F8F8;
  3723. width: calc((100% - 2.82rem) / 4);
  3724. padding: 0.52rem;
  3725. }
  3726. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li > h2 {
  3727. display: flex;
  3728. align-items: center;
  3729. justify-content: space-between;
  3730. }
  3731. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li > h2 span {
  3732. color: #222;
  3733. font-size: 0.75rem;
  3734. font-weight: 500;
  3735. letter-spacing: -0.0075rem;
  3736. display: flex;
  3737. align-items: center;
  3738. justify-content: space-between;
  3739. gap: 0.31rem;
  3740. }
  3741. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li > h2 span .ico--disconnected {
  3742. display: inline-flex;
  3743. min-width: 0.875rem;
  3744. min-height: 0.8975rem;
  3745. width: 0.875rem;
  3746. height: 0.875rem;
  3747. background: url(../img/ic_ds.svg) no-repeat center;
  3748. }
  3749. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li > h2 .icon--control .pin--lock {
  3750. width: 0.875rem;
  3751. min-width: 0.875rem;
  3752. height: 0.875rem;
  3753. padding: 0px;
  3754. background: url(../img/ic_tack_off.svg) no-repeat center;
  3755. }
  3756. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li > h2 .icon--control .pin--lock.on {
  3757. background: url(../img/ic_tack_on.svg) no-repeat center;
  3758. }
  3759. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column {
  3760. padding-top: 0.25rem;
  3761. display: flex;
  3762. align-items: center;
  3763. width: 100%;
  3764. gap: 1rem;
  3765. }
  3766. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column .data--bar--chart {
  3767. width: 100%;
  3768. }
  3769. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column .data--bar--chart .data--bar--wrap {
  3770. width: 100%;
  3771. height: 0.75rem;
  3772. border-radius: 6.25rem;
  3773. background: #EAEAEA;
  3774. }
  3775. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column .data--bar--chart .data--bar--wrap .data--bar--current {
  3776. color: #FFF;
  3777. font-size: 0.625rem;
  3778. height: 0.75rem;
  3779. line-height: 0.75rem;
  3780. font-weight: 700;
  3781. letter-spacing: -0.00625rem;
  3782. background: #55E074;
  3783. border-radius: 6.25rem;
  3784. padding: 0rem 0.37rem;
  3785. }
  3786. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column .percent {
  3787. color: #43D263;
  3788. font-size: 0.9025rem;
  3789. font-weight: 900;
  3790. letter-spacing: -0.01125rem;
  3791. display: flex;
  3792. align-items: center;
  3793. gap: 0.22rem;
  3794. }
  3795. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li .data--column .percent .unit {
  3796. color: #8C8C8C;
  3797. font-size: 0.75rem;
  3798. font-weight: 500;
  3799. letter-spacing: -0.0075rem;
  3800. font-style: normal;
  3801. }
  3802. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.discon > h2 > span {
  3803. color: rgba(34, 34, 34, 0.3);
  3804. }
  3805. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.discon > h2 > span::after {
  3806. content: "";
  3807. width: 0.875rem;
  3808. height: 0.875rem;
  3809. background-image: url(../img/ico_ban.svg);
  3810. display: inline-block;
  3811. background-size: cover;
  3812. }
  3813. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.critical .data--column .percent {
  3814. color: #f00;
  3815. }
  3816. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.critical .data--column .data--bar--chart .data--bar--wrap .data--bar--current {
  3817. background: #f00;
  3818. }
  3819. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.major .data--column .percent {
  3820. color: #C96103;
  3821. }
  3822. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.major .data--column .data--bar--chart .data--bar--wrap .data--bar--current {
  3823. background: #C96103;
  3824. }
  3825. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.minor .data--column .percent {
  3826. color: #DDA405;
  3827. }
  3828. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.minor .data--column .data--bar--chart .data--bar--wrap .data--bar--current {
  3829. background: #DDA405;
  3830. }
  3831. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.normal .data--column .percent {
  3832. color: #2D8CFA;
  3833. }
  3834. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph .user--list--contents .data--list--content--modal > li.normal .data--column .data--bar--chart .data--bar--wrap .data--bar--current {
  3835. background: #2D8CFA;
  3836. }
  3837. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph.small {
  3838. height: 100%;
  3839. }
  3840. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph.small .data--list--content--modal {
  3841. height: 100%;
  3842. }
  3843. .container .content .dash--board--wrapper .dash--board--contents.type2 .user--list--bar--graph.small .data--list--content--modal > li {
  3844. width: calc((100% - 1.86rem) / 5);
  3845. height: calc((100% - 2.5rem) / 4) !important;
  3846. }
  3847. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper {
  3848. display: flex;
  3849. align-items: center;
  3850. gap: 1.25rem;
  3851. }
  3852. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .btn--list--content {
  3853. position: relative;
  3854. display: flex;
  3855. align-items: center;
  3856. gap: 0.62rem;
  3857. margin-left: 0.625rem;
  3858. }
  3859. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .btn--list--content:before {
  3860. content: "";
  3861. display: block;
  3862. width: 0.0625rem;
  3863. height: 1.125rem;
  3864. background: #E0E0E0;
  3865. position: absolute;
  3866. top: 50%;
  3867. transform: translateY(-50%);
  3868. left: -0.94rem;
  3869. }
  3870. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector {
  3871. display: flex;
  3872. align-items: center;
  3873. gap: 0.62rem;
  3874. position: relative;
  3875. margin-left: 0.625rem;
  3876. }
  3877. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector:before {
  3878. content: "";
  3879. display: block;
  3880. width: 0.0625rem;
  3881. height: 1.125rem;
  3882. background: #E0E0E0;
  3883. position: absolute;
  3884. top: 50%;
  3885. transform: translateY(-50%);
  3886. left: -0.94rem;
  3887. }
  3888. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector .v-btn {
  3889. border-radius: 0.5rem;
  3890. border: 1px solid #DDD;
  3891. background: #FFF;
  3892. width: 1.625rem;
  3893. min-width: 1.625rem !important;
  3894. height: 1.625rem;
  3895. padding: 0px;
  3896. }
  3897. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector .v-btn.card--type--btn {
  3898. background: url(../img/ic_card_off.svg) no-repeat center;
  3899. }
  3900. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector .v-btn.card--type--btn.on {
  3901. background: #6F8AA6 url(../img/ic_card_on.svg) no-repeat center;
  3902. }
  3903. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector .v-btn.list--type--btn {
  3904. background: url(../img/ic_list_off.svg) no-repeat center;
  3905. }
  3906. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .shape--selector .v-btn.list--type--btn.on {
  3907. background: #6F8AA6 url(../img/ic_list_on.svg) no-repeat center;
  3908. }
  3909. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .all--view--btn {
  3910. display: flex;
  3911. height: 1.875rem;
  3912. padding: 0.625rem;
  3913. align-items: center;
  3914. padding: 0px !important;
  3915. border-radius: 6.25rem;
  3916. background: #438DFF;
  3917. width: 5.625rem;
  3918. }
  3919. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .all--view--btn * {
  3920. color: #FFF !important;
  3921. font-size: 0.8125rem;
  3922. font-weight: 500;
  3923. letter-spacing: -0.00813rem;
  3924. }
  3925. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .all--view--btn .icon {
  3926. width: 0.875rem;
  3927. height: 0.875rem;
  3928. background: url(../img/ic_allview.svg) no-repeat center;
  3929. margin-right: 0.3125rem;
  3930. }
  3931. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .issue--cont {
  3932. display: flex;
  3933. align-items: center;
  3934. justify-content: center;
  3935. color: #444;
  3936. font-size: 0.8125rem;
  3937. font-weight: 500;
  3938. letter-spacing: -0.00813rem;
  3939. border-radius: 6.25rem;
  3940. border: 1px solid #EAB2AE;
  3941. background: #FFF;
  3942. height: 1.875rem;
  3943. padding: 0.625rem;
  3944. gap: 0.3125rem;
  3945. }
  3946. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .issue--cont .icon {
  3947. width: 0.875rem;
  3948. height: 0.875rem;
  3949. background: url(../img/ic_issue_flag.svg) no-repeat center;
  3950. }
  3951. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .issue--cont .current--value {
  3952. color: #E1473D;
  3953. font-size: 0.8125rem;
  3954. font-weight: 700;
  3955. letter-spacing: -0.00813rem;
  3956. }
  3957. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .total--wrapper {
  3958. color: #222;
  3959. font-size: 0.8125rem;
  3960. font-weight: 400;
  3961. }
  3962. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .total--wrapper .total--count {
  3963. color: #438DFF;
  3964. font-size: 0.8125rem;
  3965. font-weight: 700;
  3966. }
  3967. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap {
  3968. display: flex;
  3969. align-items: center;
  3970. justify-content: center;
  3971. gap: 0.94rem;
  3972. }
  3973. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap .page--numb {
  3974. height: 1.625rem;
  3975. line-height: 1.625rem;
  3976. display: flex;
  3977. align-items: center;
  3978. gap: 0.1rem;
  3979. color: #666;
  3980. font-size: 0.8125rem;
  3981. font-weight: 400;
  3982. }
  3983. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap .page--numb .current {
  3984. color: #333;
  3985. font-size: 0.8125rem;
  3986. font-weight: 700;
  3987. }
  3988. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap .page--btn {
  3989. border-radius: 0.5rem;
  3990. border: 1px solid #DDD !important;
  3991. background: #FFF;
  3992. width: 1.625rem !important;
  3993. min-width: 1.635rem !important;
  3994. height: 1.625rem !important;
  3995. padding: 0px !important;
  3996. }
  3997. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap .page--btn.prev--btn {
  3998. background: url(../img/ic_chv.svg) no-repeat center;
  3999. }
  4000. .container .content .dash--board--wrapper .dash--board--contents.type2 .pagenation--wrapper .pager--btn--wrap .page--btn.next--btn {
  4001. background: url(../img/ic_chv.svg) no-repeat center;
  4002. transform: rotate(180deg);
  4003. }
  4004. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box {
  4005. display: flex;
  4006. padding-left: 1.25rem;
  4007. position: relative;
  4008. gap: 0.63rem;
  4009. }
  4010. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box::before {
  4011. content: "";
  4012. width: 0.0625rem;
  4013. height: 1.125rem;
  4014. position: absolute;
  4015. top: 50%;
  4016. transform: translateY(-50%);
  4017. left: 0;
  4018. background-color: #E0E0E0;
  4019. }
  4020. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .custom-btn.sort-btn {
  4021. width: 2.25rem;
  4022. height: 2.25rem;
  4023. min-width: 2.25rem;
  4024. border-radius: 0.3125rem;
  4025. border: 1px solid #D1D1D1;
  4026. background-color: #ffffff;
  4027. padding: 0;
  4028. background-size: 0.875rem 0.875rem;
  4029. background-image: url(../img/ico_sort.svg);
  4030. background-repeat: no-repeat;
  4031. background-position: center;
  4032. }
  4033. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv {
  4034. position: absolute;
  4035. right: 0;
  4036. background-color: #fff;
  4037. border-radius: 0.5rem;
  4038. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  4039. padding: 1.25rem 1.38rem;
  4040. z-index: 2;
  4041. top: 2.5rem;
  4042. }
  4043. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul {
  4044. display: flex;
  4045. flex-direction: column;
  4046. gap: 0.94rem;
  4047. }
  4048. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul li {
  4049. color: #000;
  4050. font-size: 0.8125rem;
  4051. font-style: normal;
  4052. font-weight: 400;
  4053. cursor: pointer;
  4054. }
  4055. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--header--wrap .pagenation--wrapper .search--box .sort--atv ul li.atv {
  4056. font-weight: 700;
  4057. }
  4058. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap .inner--content {
  4059. padding-top: 0.8rem;
  4060. height: 100%;
  4061. }
  4062. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card.critical {
  4063. border: 1px solid #F4A19C;
  4064. background-color: #FFF4F3;
  4065. }
  4066. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card.major {
  4067. border: 1px solid #FFD3AC;
  4068. background-color: #FFF6EE;
  4069. }
  4070. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card.minor {
  4071. border: 1px solid #FFE6A5;
  4072. background-color: #FFF7E2;
  4073. }
  4074. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card.normal {
  4075. border: 1px solid #E3E3E3;
  4076. background-color: #ffffff;
  4077. }
  4078. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card.discon::after {
  4079. content: "";
  4080. width: 100%;
  4081. height: 100%;
  4082. background-color: rgba(255, 0, 0, 0.5);
  4083. border-radius: 0.625rem;
  4084. position: absolute;
  4085. top: 0;
  4086. left: 0;
  4087. background-image: url(../img/ico_wifi.svg);
  4088. background-size: 2.5rem 2.5rem;
  4089. background-position: center;
  4090. }
  4091. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card .equip--st .circle.critical {
  4092. background-color: #FF0000;
  4093. }
  4094. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card .equip--st .circle.major {
  4095. background-color: #C96103;
  4096. }
  4097. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card .equip--st .circle.minor {
  4098. background-color: #DDA405;
  4099. }
  4100. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card .equip--st .circle.warning {
  4101. background-color: #D1B568;
  4102. }
  4103. .container .content .dash--board--wrapper .dash--board--contents.type1 .core--component--wrap.small .inner--content .equip--card--wrap .equip--card .equip--st .circle.normal {
  4104. background-color: #2D8CFA;
  4105. }
  4106. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--wrap {
  4107. height: 100%;
  4108. }
  4109. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--wrap .current--value {
  4110. right: -4rem;
  4111. width: auto;
  4112. }
  4113. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--bar--graph {
  4114. height: 100%;
  4115. }
  4116. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents {
  4117. height: 100%;
  4118. }
  4119. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper {
  4120. box-shadow: none;
  4121. }
  4122. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--pin {
  4123. color: transparent;
  4124. background-image: url(../img/ico_pin_on.svg);
  4125. width: 1rem;
  4126. height: 1rem;
  4127. background-size: cover;
  4128. display: inline-block;
  4129. line-height: 1rem;
  4130. background-position: center;
  4131. }
  4132. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .none--pin {
  4133. color: #444444;
  4134. font-size: 0.875rem;
  4135. font-weight: 400;
  4136. }
  4137. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--ban {
  4138. color: rgba(34, 34, 34, 0.3);
  4139. }
  4140. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--ban::after {
  4141. content: "";
  4142. width: 0.875rem;
  4143. height: 0.875rem;
  4144. background-image: url(../img/ico_ban.svg);
  4145. display: inline-block;
  4146. background-size: cover;
  4147. margin-left: 0.5rem;
  4148. }
  4149. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--dis {
  4150. color: rgba(34, 34, 34, 0.3);
  4151. }
  4152. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--critical::before {
  4153. content: "";
  4154. display: inline-block;
  4155. margin-right: 0.62rem;
  4156. border-radius: 50%;
  4157. width: 0.75rem;
  4158. height: 0.75rem;
  4159. background-color: #f00;
  4160. }
  4161. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--major::before {
  4162. content: "";
  4163. display: inline-block;
  4164. margin-right: 0.62rem;
  4165. border-radius: 50%;
  4166. width: 0.75rem;
  4167. height: 0.75rem;
  4168. background-color: #C96103;
  4169. }
  4170. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--minor::before {
  4171. content: "";
  4172. display: inline-block;
  4173. margin-right: 0.62rem;
  4174. border-radius: 50%;
  4175. width: 0.75rem;
  4176. height: 0.75rem;
  4177. background-color: #DDA405;
  4178. }
  4179. .container .content .dash--board--wrapper .dash--board--contents.type1 .user--list--contents .tbl-wrapper .user--list--normal::before {
  4180. content: "";
  4181. display: inline-block;
  4182. margin-right: 0.62rem;
  4183. border-radius: 50%;
  4184. width: 0.75rem;
  4185. height: 0.75rem;
  4186. background-color: #2D8CFA;
  4187. }
  4188. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .header--wrapper .control--wrap .custom-btn {
  4189. background-color: #d4d4d4;
  4190. }
  4191. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .header--wrapper .control--wrap .custom-btn.on {
  4192. background-color: #438DFF;
  4193. }
  4194. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--row > ul > li .icon {
  4195. background-size: cover;
  4196. }
  4197. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list {
  4198. width: 15.625rem;
  4199. }
  4200. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header.active {
  4201. background-color: #6f8aa6;
  4202. }
  4203. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header.active > div {
  4204. color: #ffffff;
  4205. }
  4206. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header.active > div span {
  4207. color: #ffffff;
  4208. }
  4209. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header.active > div .drop--btn {
  4210. background-image: url(../img/ic_drop_down_on.svg);
  4211. }
  4212. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header.active .drp--titles::before {
  4213. background-image: url(../img/ic_tenant_small_white.svg);
  4214. }
  4215. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header .drp--titles::before {
  4216. background-size: cover;
  4217. }
  4218. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--header .drp--current--data .drop--btn {
  4219. background-size: cover;
  4220. }
  4221. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content {
  4222. border-top: none;
  4223. }
  4224. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.active {
  4225. height: auto;
  4226. }
  4227. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content ul {
  4228. padding: 0 1.25rem 1.25rem;
  4229. max-height: 20vh;
  4230. background-color: #F7F7F7;
  4231. overflow-y: auto;
  4232. }
  4233. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content ul li {
  4234. padding: 0.88rem 0;
  4235. border-bottom: 1px solid #E4E4E4;
  4236. }
  4237. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content ul li:last-child {
  4238. border-bottom: none;
  4239. }
  4240. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type1 li {
  4241. color: #333;
  4242. font-size: 0.8125rem;
  4243. font-weight: 400;
  4244. }
  4245. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type1 li span {
  4246. color: #111;
  4247. font-weight: 500;
  4248. margin-left: 0.1rem;
  4249. }
  4250. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li {
  4251. display: flex;
  4252. justify-content: space-between;
  4253. align-items: center;
  4254. }
  4255. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--l {
  4256. color: #333;
  4257. font-size: 0.8125rem;
  4258. width: 65%;
  4259. white-space: nowrap;
  4260. overflow: hidden;
  4261. text-overflow: ellipsis;
  4262. font-weight: 500;
  4263. }
  4264. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r {
  4265. display: flex;
  4266. align-items: center;
  4267. gap: 0.94rem;
  4268. }
  4269. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r span {
  4270. color: #333;
  4271. font-size: 0.8125rem;
  4272. font-weight: 400;
  4273. }
  4274. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r .alarm {
  4275. width: 0.875rem;
  4276. height: 0.875rem;
  4277. background-size: cover;
  4278. display: inline-block;
  4279. background-image: url(../img/ico_alarm_gray.svg);
  4280. }
  4281. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r .alarm.red {
  4282. background-image: url(../img/ico_alarm_red.svg);
  4283. }
  4284. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r .alarm.green {
  4285. background-image: url(../img/ico_alarm_green.svg);
  4286. }
  4287. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type2 li .li--r .alarm.blue {
  4288. background-image: url(../img/ico_alarm_blue.svg);
  4289. }
  4290. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type3 li {
  4291. display: flex;
  4292. justify-content: space-between;
  4293. align-items: center;
  4294. }
  4295. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type3 li .li--l {
  4296. color: #333;
  4297. font-size: 0.8125rem;
  4298. font-weight: 500;
  4299. width: 65%;
  4300. white-space: nowrap;
  4301. overflow: hidden;
  4302. text-overflow: ellipsis;
  4303. }
  4304. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content--wrapper .map--sub--info .status--list .drp--content.type3 li .li--r {
  4305. color: #666;
  4306. font-size: 0.8125rem;
  4307. font-weight: 400;
  4308. }
  4309. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content {
  4310. padding-top: 1.25rem;
  4311. }
  4312. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card {
  4313. display: flex;
  4314. gap: 0.94rem;
  4315. flex-wrap: wrap;
  4316. }
  4317. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li {
  4318. display: flex;
  4319. flex-direction: column;
  4320. border-radius: 0.625rem;
  4321. border: 1px solid #EFEFEF;
  4322. background: #F8F8F8;
  4323. width: calc((100% - 2.82rem) / 4);
  4324. padding: 1.25rem;
  4325. height: calc((100vh - 23.3rem) / 5);
  4326. }
  4327. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li:hover {
  4328. border: 1px solid #b4d1ff;
  4329. }
  4330. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--title {
  4331. display: flex;
  4332. justify-content: space-between;
  4333. align-items: center;
  4334. margin-bottom: 1rem;
  4335. }
  4336. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--title .ran--area {
  4337. color: #222;
  4338. font-size: 0.8125rem;
  4339. font-weight: 700;
  4340. }
  4341. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--title .more--btn {
  4342. width: 0.875rem;
  4343. height: 0.875rem;
  4344. min-width: 0.875rem;
  4345. padding: 0;
  4346. background: url(../img/ico_ran_arrow_gray.svg) no-repeat center;
  4347. background-size: cover;
  4348. }
  4349. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--stat {
  4350. display: flex;
  4351. flex-direction: column;
  4352. gap: 0.6rem;
  4353. }
  4354. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--stat p {
  4355. display: flex;
  4356. justify-content: space-between;
  4357. }
  4358. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--stat p span {
  4359. color: #222;
  4360. font-size: 0.75rem;
  4361. font-weight: 500;
  4362. }
  4363. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li .ran--stat p span:nth-child(2) {
  4364. font-weight: 700;
  4365. color: #111111;
  4366. }
  4367. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--blue {
  4368. border: 1px solid #1E76FF;
  4369. background: #438DFF;
  4370. }
  4371. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--blue .ran--title span {
  4372. color: #ffffff;
  4373. }
  4374. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--blue .ran--title .more--btn {
  4375. background-image: url(../img/ico_ran_arrow_white.svg);
  4376. }
  4377. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--blue .ran--stat p span {
  4378. color: #ffffff;
  4379. }
  4380. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--blue .ran--stat p span.color--yel {
  4381. color: #FAFF00;
  4382. }
  4383. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--red {
  4384. border: 1px solid #BB251B;
  4385. background: #E1473D;
  4386. }
  4387. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--red .ran--title span {
  4388. color: #ffffff;
  4389. }
  4390. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--red .ran--title .more--btn {
  4391. background-image: url(../img/ico_ran_arrow_white.svg);
  4392. }
  4393. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--red .ran--stat p span {
  4394. color: #ffffff;
  4395. }
  4396. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--red .ran--stat p span.color--yel {
  4397. color: #FAFF00;
  4398. }
  4399. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--all {
  4400. border: 1px solid #1E76FF;
  4401. background: #3f5984;
  4402. }
  4403. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--all .ran--title span {
  4404. color: #ffffff;
  4405. }
  4406. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--all .ran--title .more--btn {
  4407. background-image: url(../img/ico_ran_arrow_white.svg);
  4408. }
  4409. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--all .ran--stat p span {
  4410. color: #ffffff;
  4411. }
  4412. .container .content .dash--board--wrapper .dash--board--contents.type1 .map--contents--wrap .inner--content .ran--card > li.ran--all .ran--stat p span.color--yel {
  4413. color: #FAFF00;
  4414. }
  4415. .container .menu-flex-wrap {
  4416. gap: 1.88rem;
  4417. }
  4418. .container .menu-flex-wrap .system-menu {
  4419. width: 21.25rem;
  4420. padding: 1.25rem;
  4421. height: calc(100vh - 15rem);
  4422. border-radius: 0.5rem;
  4423. border: none;
  4424. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  4425. background: #fff;
  4426. }
  4427. .container .menu-flex-wrap .system-menu .system-menu-tit {
  4428. color: #111111;
  4429. font-size: 0.9375rem;
  4430. font-weight: 700;
  4431. line-height: 100%;
  4432. /* 0.9375rem */
  4433. letter-spacing: -0.01875rem;
  4434. background: #fff;
  4435. border-bottom: 1px solid #0B318B;
  4436. height: 2.8125rem;
  4437. padding: 0 1.12rem;
  4438. }
  4439. .container .menu-flex-wrap .system-menu .system-menu-tit .ico {
  4440. margin-right: 0.62rem;
  4441. width: 0.875rem;
  4442. height: 0.875rem;
  4443. background-size: cover;
  4444. background-position: center;
  4445. background-repeat: no-repeat;
  4446. background-image: url(../img/ico_cate.svg);
  4447. }
  4448. .container .menu-flex-wrap .system-menu .system-menu-in {
  4449. margin-top: 0;
  4450. padding: 0;
  4451. gap: 0;
  4452. }
  4453. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-tit {
  4454. padding: 1.12rem;
  4455. font-size: 0.9375rem;
  4456. font-weight: 600 !important;
  4457. gap: 0.66rem;
  4458. border-bottom: 1px solid #EBEBEB;
  4459. color: #333333;
  4460. position: relative;
  4461. }
  4462. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-tit > button:first-child {
  4463. background-image: none;
  4464. width: 0.4375rem;
  4465. height: 0.4375rem;
  4466. background-color: #9c9c9c;
  4467. border-radius: 50%;
  4468. }
  4469. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-tit > button:nth-child(2) {
  4470. background-image: url(../img/ico_plus.svg);
  4471. width: 0.875rem;
  4472. height: 0.875rem;
  4473. position: absolute;
  4474. right: 1.12rem;
  4475. }
  4476. .container .menu-flex-wrap .system-menu .system-menu-in .system-box.on .system-box-tit {
  4477. font-weight: 700 !important;
  4478. color: #0b318b;
  4479. }
  4480. .container .menu-flex-wrap .system-menu .system-menu-in .system-box.on .system-box-tit > button:first-child {
  4481. background-color: #0B318B;
  4482. }
  4483. .container .menu-flex-wrap .system-menu .system-menu-in .system-box.on .system-box-tit > button:nth-child(2) {
  4484. background-image: url(../img/ico_minus.svg);
  4485. }
  4486. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-sub {
  4487. padding: 1.25rem 1.69rem;
  4488. background: #F8FAFF;
  4489. }
  4490. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-sub ul {
  4491. gap: 1.5625rem;
  4492. }
  4493. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-sub ul li {
  4494. gap: 0;
  4495. color: #000000;
  4496. font-size: 0.8125rem;
  4497. font-weight: 400;
  4498. letter-spacing: -0.01625rem;
  4499. line-height: 100%;
  4500. }
  4501. .container .menu-flex-wrap .system-menu .system-menu-in .system-box .system-box-sub ul li::before {
  4502. display: none;
  4503. }
  4504. .container .menu-flex-wrap .menu-info {
  4505. height: calc(100vh - 15rem);
  4506. border: none;
  4507. border-radius: 0.5rem;
  4508. background-color: #fff;
  4509. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  4510. }
  4511. .container .menu-flex-wrap .menu-info .info-tit {
  4512. height: 4.6875rem;
  4513. background-color: #fff;
  4514. padding: 0 1.88rem;
  4515. letter-spacing: -0.01875rem;
  4516. font-size: 0.9375rem;
  4517. color: #111111;
  4518. border-radius: 0.5rem 0.5rem 0 0;
  4519. border-bottom: 1px solid #e9e9e9;
  4520. }
  4521. .container .menu-flex-wrap .menu-info .menu-info-view {
  4522. padding: 1.25rem;
  4523. margin-top: 0;
  4524. height: calc(100vh - 19.6875rem);
  4525. }
  4526. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type {
  4527. padding: 1.25rem 1.25rem 0.94rem 1.25rem;
  4528. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  4529. border-radius: 0.5rem;
  4530. }
  4531. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr th {
  4532. background-color: #fff;
  4533. padding: 1.13rem 0.62rem 1.13rem 0.62rem;
  4534. color: #444;
  4535. font-weight: 700;
  4536. font-size: 0.875rem;
  4537. border-right: none;
  4538. }
  4539. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr td {
  4540. color: #444444;
  4541. font-size: 0.875rem;
  4542. font-weight: 400;
  4543. line-height: 100%;
  4544. }
  4545. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr td .input-wrap {
  4546. flex-direction: column;
  4547. gap: 1.25rem;
  4548. }
  4549. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr td .input-wrap .custom-check.v-input.type2 .v-input__control .v-selection-control .v-label {
  4550. padding-left: 0.37rem;
  4551. color: #444444;
  4552. font-size: 0.875rem;
  4553. font-weight: 600;
  4554. }
  4555. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr td .input-wrap .custom-check.v-input.type2 .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon {
  4556. background-size: cover;
  4557. }
  4558. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr:last-child th {
  4559. border-bottom: none;
  4560. }
  4561. .container .menu-flex-wrap .menu-info .menu-info-view .info-tbl .form-style2.shadow--type table tr:last-child td {
  4562. border-bottom: none;
  4563. }
  4564. .container .menu-flex-wrap .menu-info .menu-info-view .no-data {
  4565. flex-direction: row;
  4566. gap: 0.63rem;
  4567. }
  4568. .container .menu-flex-wrap .menu-info .menu-info-view .no-data .ico {
  4569. background-image: url(../img/ico_no_data2.svg);
  4570. width: 1.25rem;
  4571. height: 1.25rem;
  4572. }
  4573. .container .menu-flex-wrap .menu-info .menu-info-view .no-data > p {
  4574. margin-top: 0;
  4575. color: #444444;
  4576. font-size: 0.875rem;
  4577. font-weight: 700;
  4578. }
  4579. .tbl-wrap .ag-theme-quartz.ag--line--type .ag-root-wrapper .ag-header-group-cell .ag-header-cell-comp-wrapper {
  4580. justify-content: center;
  4581. font-size: 0.875rem;
  4582. color: #444444;
  4583. font-weight: 700;
  4584. }
  4585. .tbl-wrap .ag-theme-quartz.ag--line--type .ag-root-wrapper .lock-pinned {
  4586. background: #F2F7FF;
  4587. font-size: 0.875rem;
  4588. color: #444444;
  4589. font-weight: 700;
  4590. line-height: 2.55rem;
  4591. padding: 0 1.25rem;
  4592. }
  4593. .tbl-wrap .ag-theme-quartz .ag-root-wrapper .ag-root .ag-sticky-bottom {
  4594. width: 0 !important;
  4595. }
  4596. .custom-input.v-text-field.v-input--error .v-input__details {
  4597. padding-inline: 0;
  4598. padding-top: 0.63rem;
  4599. }
  4600. .custom-input.v-text-field.v-input--error .v-input__details .v-messages .v-messages__message {
  4601. line-height: 100%;
  4602. color: #e50a0a;
  4603. font-size: 0.8125rem;
  4604. }
  4605. .custom-input.v-text-field .v-input__control .v-field--error .v-field__field .v-field__input {
  4606. border: 1px solid #FF8C8C !important;
  4607. position: relative;
  4608. background-image: url(../img/ico_error.svg);
  4609. background-repeat: no-repeat;
  4610. background-size: 0.875rem 0.875rem;
  4611. background-position: right 0.75rem center;
  4612. }
  4613. .login-wrap .login--header {
  4614. position: fixed;
  4615. top: 0;
  4616. left: 0;
  4617. display: flex;
  4618. justify-content: space-between;
  4619. align-items: center;
  4620. padding: 1.25rem 1.88rem;
  4621. width: 100%;
  4622. background-color: #0B318B;
  4623. height: 4.75rem;
  4624. z-index: 100;
  4625. }
  4626. .login-wrap .login--header .login--header--l {
  4627. display: flex;
  4628. gap: 0.9375rem;
  4629. align-items: center;
  4630. }
  4631. .login-wrap .login--header .login--header--l .logo {
  4632. height: 2rem;
  4633. color: #fff;
  4634. }
  4635. .login-wrap .login--header .login--header--l p {
  4636. color: #ffffff;
  4637. font-size: 1.125rem;
  4638. font-weight: 700;
  4639. line-height: 100%;
  4640. }
  4641. .login-wrap .login--header .login--header--r .custom-select.v-input .v-input__control .v-field {
  4642. border-radius: 0.375rem;
  4643. }
  4644. .login-wrap .login--header .login--header--r .custom-select.v-input .v-input__control .v-field .v-field__field {
  4645. padding-left: 0.75rem;
  4646. }
  4647. .login-wrap .login--header .login--header--r.dp--flex {
  4648. display: flex;
  4649. align-items: center;
  4650. }
  4651. .login-wrap .login--header .login--header--r.dp--flex .user-info {
  4652. display: flex;
  4653. position: relative;
  4654. }
  4655. .login-wrap .login--header .login--header--r.dp--flex .user-info .ico {
  4656. width: 1.625rem;
  4657. height: 1.625rem;
  4658. background: #fff;
  4659. border-radius: 100%;
  4660. color: #438DFF;
  4661. display: flex;
  4662. align-items: center;
  4663. justify-content: center;
  4664. font-weight: 700;
  4665. font-size: 1rem;
  4666. cursor: pointer;
  4667. }
  4668. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail {
  4669. position: absolute;
  4670. top: 2.7rem;
  4671. left: 50%;
  4672. width: 11.88rem;
  4673. padding: 1.25rem;
  4674. transform: translateX(-50%);
  4675. background: #FFF;
  4676. border: 1px solid #ddd;
  4677. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
  4678. border-radius: 0.625rem;
  4679. }
  4680. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail:after {
  4681. content: "";
  4682. display: block;
  4683. width: 0;
  4684. height: 0;
  4685. border-left: 0.40625rem solid transparent;
  4686. border-right: 0.40625rem solid transparent;
  4687. border-bottom: 0.6875rem solid #fff;
  4688. position: absolute;
  4689. top: -0.5875rem;
  4690. left: 50%;
  4691. transform: translateX(-50%);
  4692. }
  4693. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail:before {
  4694. content: "";
  4695. display: block;
  4696. width: 0;
  4697. height: 0;
  4698. border-left: 0.40625rem solid transparent;
  4699. border-right: 0.40625rem solid transparent;
  4700. border-bottom: 0.6875rem solid #ddd;
  4701. position: absolute;
  4702. top: -0.6875rem;
  4703. left: 50%;
  4704. transform: translateX(-50%);
  4705. }
  4706. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail .custom--btn--wrap {
  4707. display: flex;
  4708. flex-direction: column;
  4709. gap: 0.5rem;
  4710. }
  4711. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail p {
  4712. color: #111;
  4713. font-size: 0.94rem;
  4714. font-weight: 700;
  4715. margin-bottom: 0.94rem;
  4716. }
  4717. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail p span {
  4718. font-weight: 600;
  4719. }
  4720. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail ul {
  4721. padding-bottom: 1.25rem;
  4722. margin-bottom: 0.94rem;
  4723. border-bottom: 0.06rem solid #e1e1e1;
  4724. display: flex;
  4725. flex-direction: column;
  4726. gap: 0.25rem;
  4727. }
  4728. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail ul li {
  4729. color: #444444;
  4730. font-size: 0.81rem;
  4731. font-weight: 400;
  4732. }
  4733. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail ul.nw--btn--text--type {
  4734. gap: 0.6rem;
  4735. border-bottom: 0px;
  4736. }
  4737. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail .custom-btn.v-btn.v-btn--density-default {
  4738. border: 0.06rem solid #D0DDEA;
  4739. border-radius: 0.31rem;
  4740. width: 100%;
  4741. height: 2.5rem;
  4742. min-height: 2.5rem;
  4743. }
  4744. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail .custom-btn.v-btn.v-btn--density-default .v-btn__content {
  4745. color: #798592;
  4746. font-size: 0.75rem;
  4747. font-weight: 600;
  4748. letter-spacing: -0.01rem;
  4749. }
  4750. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail .custom-btn.v-btn.v-btn--density-default:hover {
  4751. border: 0.06rem solid rgba(6, 79, 158, 0.5);
  4752. }
  4753. .login-wrap .login--header .login--header--r.dp--flex .user-info .info-detail .custom-btn.v-btn.v-btn--density-default:hover .v-btn__content {
  4754. color: #064F9E !important;
  4755. }
  4756. .login-wrap .login--header .login--header--r.dp--flex .user-name {
  4757. color: #fff;
  4758. font-size: 0.81rem;
  4759. padding: 0 0.815rem;
  4760. font-weight: 700;
  4761. cursor: pointer;
  4762. }
  4763. .login-wrap .login--header .login--header--r.dp--flex .btn-logout {
  4764. width: 2rem;
  4765. height: 2rem;
  4766. background: url("../img/ico_logout.svg") no-repeat center/100%;
  4767. }
  4768. .login-wrap .login-box .login-l .login-l-center {
  4769. text-align: center;
  4770. }
  4771. .login-wrap .login-box .login-l .login-l-center .logo {
  4772. background: none;
  4773. font-size: 1.5625rem;
  4774. color: #0b318b;
  4775. font-weight: 700;
  4776. letter-spacing: -0.04688rem;
  4777. pointer-events: none;
  4778. line-height: 100%;
  4779. height: auto;
  4780. }
  4781. .login-wrap .login-box .login-l .login-l-center p {
  4782. color: #333;
  4783. text-align: center;
  4784. font-size: 0.875rem;
  4785. font-weight: 400;
  4786. line-height: 100%; /* 0.875rem */
  4787. letter-spacing: -0.00875rem;
  4788. pointer-events: none;
  4789. }
  4790. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box:first-of-type {
  4791. margin-bottom: 0.87rem;
  4792. }
  4793. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box .v-input.custom-input.v-text-field {
  4794. min-height: 2.25rem;
  4795. }
  4796. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box .v-input.custom-input.v-text-field .v-input__control {
  4797. height: 2.25rem;
  4798. }
  4799. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box .v-input.custom-input.v-text-field .v-input__control .v-field__field .v-field__input {
  4800. min-height: 2.25rem;
  4801. height: 2.25rem;
  4802. padding: 0 0.75rem;
  4803. }
  4804. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box.error .v-input.custom-input.v-text-field .v-input__control .v-field--appended .v-field__append-inner {
  4805. right: 2.6rem;
  4806. }
  4807. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box.error .ico-eye {
  4808. right: 2.5rem;
  4809. }
  4810. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box .ico-eye {
  4811. position: absolute;
  4812. background-size: cover;
  4813. background-image: url(../img/ico_eye.svg);
  4814. width: 1.125rem;
  4815. height: 1.125rem;
  4816. right: 0.75rem;
  4817. top: 50%;
  4818. transform: translateY(-50%);
  4819. }
  4820. .login-wrap .login-box .login-r .login-input-wrap .txt-field-box .ico-eye.eye-off {
  4821. background-image: url(../img/ico_eye2.svg);
  4822. }
  4823. .login-wrap .login-box .login-r .login-radio {
  4824. margin-top: 1.87rem;
  4825. }
  4826. .login-wrap .login-box .login-r .login-radio .custom-radio.v-input .v-input__control .v-selection-control-group .v-radio {
  4827. margin-right: 1.56rem;
  4828. }
  4829. .login-wrap .login-box .login-r .login-radio .custom-radio.v-input .v-input__control .v-selection-control-group .v-radio .v-label {
  4830. margin-left: 0.38rem;
  4831. font-weight: 500;
  4832. color: #444444;
  4833. font-size: 0.875rem;
  4834. }
  4835. .login-wrap .login-box .login-r .login-radio .custom-radio.v-input .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon {
  4836. border: 1px solid #c0c0c0;
  4837. width: 1rem;
  4838. height: 1rem;
  4839. }
  4840. .login-wrap .login-box .login-r .login-radio .custom-radio.v-input .v-input__control .v-selection-control-group .v-radio .v-selection-control__wrapper .v-selection-control__input .v-icon.mdi-radiobox-marked {
  4841. background-color: #438dff;
  4842. }
  4843. .login-wrap .login-box .login-r .login-otp {
  4844. margin-top: 1.87rem;
  4845. gap: 0.5rem;
  4846. }
  4847. .login-wrap .login-box .login-r .login-otp .custom-input.v-text-field {
  4848. min-height: 2.25rem;
  4849. }
  4850. .login-wrap .login-box .login-r .login-otp .custom-input.v-text-field .v-input__control {
  4851. height: 2.25rem;
  4852. }
  4853. .login-wrap .login-box .login-r .login-otp .custom-input.v-text-field .v-input__control .v-field__field .v-field__input {
  4854. min-height: 2.25rem;
  4855. height: 2.25rem;
  4856. padding: 0 0.75rem;
  4857. }
  4858. .login-wrap .login-box .login-r .login-otp .btn-gray {
  4859. width: 6.875rem;
  4860. height: 2.25rem;
  4861. }
  4862. .login-wrap .login-box .login-r .login-chk {
  4863. margin: 1.88rem 0 0;
  4864. }
  4865. .login-wrap .login-box .login-r .login-chk .custom-check.v-input .v-input__control .v-selection-control .v-selection-control__wrapper .v-selection-control__input .v-icon {
  4866. background-size: cover;
  4867. }
  4868. .login-wrap .login-box .login-r .login-chk .custom-check.v-input .v-input__control .v-selection-control .v-label {
  4869. padding-left: 0.38rem;
  4870. color: #444444;
  4871. font-size: 0.875rem;
  4872. font-weight: 500;
  4873. }
  4874. .login-wrap .login-box .login-r .login-find {
  4875. margin-top: 1.88rem;
  4876. padding-top: 1.88rem;
  4877. }
  4878. .login-wrap .login-box .login-r .login-btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue {
  4879. background-color: #0B318B;
  4880. border-radius: 0.5rem;
  4881. }
  4882. .login-wrap .login-box .login-r .login-btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue:hover {
  4883. background-color: #4875DE !important;
  4884. box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);
  4885. }
  4886. .login-wrap .login-box .login-r .login-btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue .v-btn__content {
  4887. font-size: 0.9375rem !important;
  4888. font-weight: 700 !important;
  4889. letter-spacing: -0.02813rem !important;
  4890. }
  4891. .login-wrap .login-box .login-r .login-btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.v-btn--disabled {
  4892. background-color: #e0e0e0 !important;
  4893. }
  4894. .login-wrap .login-box .login-r .login-btn-wrap .custom-btn.v-btn.v-btn--density-default.btn-blue.v-btn--disabled .v-btn__content {
  4895. color: #8e8e8e !important;
  4896. }
  4897. .login-wrap .login-box .login-r .login-find > button.color--blue {
  4898. color: #0b318b;
  4899. }
  4900. .login-wrap .login-box .login-r .login-find > button.ml--auto::after {
  4901. content: "";
  4902. width: 0.0625rem;
  4903. height: 0.875rem;
  4904. background-color: #e3e3e3;
  4905. margin-left: 0.94rem;
  4906. margin-right: 0.94rem;
  4907. }
  4908. .login-wrap .system--box {
  4909. display: flex;
  4910. align-items: center;
  4911. flex-direction: column;
  4912. }
  4913. .login-wrap .system--box .system--img {
  4914. width: 7.5rem;
  4915. height: 7.5rem;
  4916. background-image: url(../img/img_system.svg);
  4917. background-size: cover;
  4918. margin-bottom: 2.19rem;
  4919. }
  4920. .login-wrap .system--box > h2 {
  4921. color: #111;
  4922. text-align: center;
  4923. font-size: 1.75rem;
  4924. font-weight: 500;
  4925. margin-bottom: 1.56rem;
  4926. }
  4927. .login-wrap .system--box > p {
  4928. text-align: center;
  4929. color: #333;
  4930. text-align: center;
  4931. font-size: 1rem;
  4932. font-weight: 400;
  4933. line-height: 1.7;
  4934. margin-bottom: 1.87rem;
  4935. }
  4936. .login-wrap .system--box > span {
  4937. color: #444;
  4938. text-align: center;
  4939. font-size: 0.9375rem;
  4940. font-weight: 400;
  4941. }
  4942. .login-wrap .login-footer {
  4943. height: 5.5rem;
  4944. display: flex;
  4945. justify-content: space-between;
  4946. padding: 1.56rem 1.88rem;
  4947. }
  4948. .login-wrap .login-footer .login--footer--l {
  4949. display: flex;
  4950. color: rgba(51, 51, 51, 0.8);
  4951. flex-direction: column;
  4952. gap: 0.6rem;
  4953. }
  4954. .login-wrap .login-footer .login--footer--r {
  4955. display: flex;
  4956. gap: 3.75rem;
  4957. align-items: center;
  4958. }
  4959. .login-wrap .login-footer .login--footer--r .txt--btn > button {
  4960. color: #222;
  4961. font-size: 0.875rem;
  4962. font-weight: 400;
  4963. line-height: 100%; /* 0.875rem */
  4964. margin-left: 0.9rem;
  4965. }
  4966. .login-wrap .login-footer .login--footer--r .txt--btn > button:first-child {
  4967. margin-left: 0;
  4968. }
  4969. .login-wrap .login-footer .login--footer--r .txt--btn > button:first-child::after {
  4970. content: "";
  4971. width: 0.0625rem;
  4972. height: 0.875rem;
  4973. margin-left: 0.9rem;
  4974. vertical-align: -0.1rem;
  4975. background-color: #c5c5c5;
  4976. display: inline-block;
  4977. }
  4978. .login-wrap .login-footer .login--footer--r .logo--footer {
  4979. display: flex;
  4980. gap: 1.25rem;
  4981. align-items: center;
  4982. }
  4983. .login-wrap .login-footer .login--footer--r .logo--footer span {
  4984. font-size: 0;
  4985. display: inline-block;
  4986. background-repeat: no-repeat;
  4987. background-position: center;
  4988. background-size: contain;
  4989. }
  4990. .login-wrap .login-footer .login--footer--r .logo--footer span:first-child {
  4991. width: 8.125rem;
  4992. height: 0.9375rem;
  4993. background-image: url(../img/logo_sams_sds.svg);
  4994. }
  4995. .login-wrap .login-footer .login--footer--r .logo--footer span:nth-child(2) {
  4996. width: 6.0625rem;
  4997. height: 2rem;
  4998. background-image: url(../img/logo_sams.svg);
  4999. }
  5000. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd {
  5001. border-radius: 0.5rem;
  5002. background: #FFF;
  5003. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  5004. padding: 1.25rem;
  5005. }
  5006. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd p.error-txt {
  5007. margin: 0 0 0.63rem 9.875rem !important;
  5008. }
  5009. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box {
  5010. border-top: 1px solid #e0e0e0;
  5011. display: flex;
  5012. margin-bottom: 0;
  5013. }
  5014. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box.error .ico {
  5015. right: 1rem;
  5016. }
  5017. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > p {
  5018. width: 9.375rem;
  5019. padding: 1.13rem 0.62rem;
  5020. color: #444444;
  5021. font-size: 0.875rem;
  5022. font-weight: 700;
  5023. line-height: 1.4;
  5024. margin-bottom: 0;
  5025. }
  5026. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > p .cir {
  5027. width: 0.3125rem;
  5028. height: 0.3125rem;
  5029. display: inline-block;
  5030. background-color: #ff4f60;
  5031. border-radius: 50%;
  5032. margin-left: 0.37rem;
  5033. vertical-align: 0.2rem;
  5034. }
  5035. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div {
  5036. width: 35.625rem;
  5037. padding: 0.625rem 0.5rem;
  5038. }
  5039. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-btn.v-btn.v-btn--density-default.btn-password {
  5040. background: #6f8aa6;
  5041. height: 2.25rem;
  5042. width: 6.875rem;
  5043. }
  5044. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-btn.v-btn.v-btn--density-default.btn-black {
  5045. background: #6f8aa6;
  5046. font-weight: 600 !important;
  5047. }
  5048. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled {
  5049. background-color: #e0e0e0 !important;
  5050. }
  5051. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-btn.v-btn.v-btn--density-default.btn-black.v-btn--disabled .v-btn__content {
  5052. color: #8e8e8e !important;
  5053. }
  5054. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field {
  5055. min-height: 2.25rem;
  5056. }
  5057. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field .v-input__control {
  5058. height: 2.25rem;
  5059. }
  5060. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field .v-input__control .v-field__field .v-field__input {
  5061. padding: 0 0.75rem;
  5062. min-height: 2.25rem;
  5063. height: 2.25rem;
  5064. }
  5065. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  5066. color: #8e8e8e;
  5067. font-weight: 400;
  5068. }
  5069. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field .v-input__control .v-field__field .v-field__input::placeholder {
  5070. color: #8e8e8e;
  5071. font-weight: 400;
  5072. }
  5073. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field.mini2 {
  5074. min-height: 2.25rem;
  5075. }
  5076. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field.mini2 .v-input__control {
  5077. height: 2.25rem;
  5078. }
  5079. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input {
  5080. padding: 0 0.75rem;
  5081. color: #000000;
  5082. height: 2.25rem;
  5083. font-size: 0.875rem;
  5084. font-weight: 400;
  5085. min-height: 2.25rem;
  5086. }
  5087. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::-moz-placeholder {
  5088. color: #8e8e8e;
  5089. font-size: 0.875rem;
  5090. font-weight: 400;
  5091. }
  5092. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .txt-field-box > div .custom-input.v-text-field.mini2 .v-input__control .v-field__field .v-field__input::placeholder {
  5093. color: #8e8e8e;
  5094. font-size: 0.875rem;
  5095. font-weight: 400;
  5096. }
  5097. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .otp-box {
  5098. gap: 0;
  5099. }
  5100. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .otp-box .txt-field-box {
  5101. width: 100%;
  5102. }
  5103. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .otp-box .txt-field-box.error .ico {
  5104. right: 8.5rem;
  5105. }
  5106. .v-common-dialog-wrapper .v-common-dialog-content .find-pwd .otp-box .txt-field-box > div {
  5107. display: flex;
  5108. gap: 0.63rem;
  5109. }
  5110. .tab-style .tab-style-h button::after {
  5111. background-size: cover !important;
  5112. }
  5113. .tab-style .tab-style-h button .ico {
  5114. background-size: 0.75rem 0.75rem;
  5115. }
  5116. /**********************************************
  5117. | 2024-12-31 김민정 :
  5118. **********************************************/
  5119. .media--editor .caution {
  5120. color: #F00;
  5121. font-size: 16px;
  5122. display: inline-block;
  5123. margin-bottom: 10px;
  5124. }
  5125. .media--editor .ql-snow .ql-editor p img {
  5126. max-width: 400px;
  5127. max-height: 400px;
  5128. }
  5129. .table--wrap {
  5130. font-size: 24px;
  5131. }
  5132. .table--wrap .bul {
  5133. color: #f00;
  5134. }
  5135. .table--wrap .table--t {
  5136. display: flex;
  5137. justify-content: space-between;
  5138. align-items: flex-end;
  5139. margin-bottom: 30px;
  5140. }
  5141. .table--wrap .table--t > span {
  5142. font-size: 18px;
  5143. }
  5144. .table--wrap table {
  5145. width: 100%;
  5146. border-top: 1px solid #3F3F3F;
  5147. }
  5148. .table--wrap table .custom-input * {
  5149. text-align: center;
  5150. }
  5151. .table--wrap table .custom-input.left * {
  5152. text-align: left;
  5153. }
  5154. .table--wrap table th {
  5155. vertical-align: middle;
  5156. height: 50px;
  5157. padding: 10px 30px;
  5158. color: #000000;
  5159. font-size: 18px;
  5160. font-weight: 700;
  5161. border-bottom: 1px solid #e2e2e2;
  5162. border-right: 1px solid #E2E2E2;
  5163. }
  5164. .table--wrap table th.bg {
  5165. background-color: #f8f8f8;
  5166. }
  5167. .table--wrap table th.le {
  5168. text-align: left;
  5169. padding: 30px;
  5170. }
  5171. .table--wrap table th.type2 {
  5172. border-right: 1px solid #3F3F3F;
  5173. border-bottom: 1px solid #3f3f3f;
  5174. }
  5175. .table--wrap table th.type2.fz--16 {
  5176. font-size: 16px;
  5177. }
  5178. .table--wrap table th:last-child {
  5179. border-right: none;
  5180. }
  5181. .table--wrap table td {
  5182. height: 50px;
  5183. padding: 10px 30px;
  5184. text-align: center;
  5185. color: #000000;
  5186. vertical-align: middle;
  5187. border-bottom: 1px solid #e2e2e2;
  5188. border-right: 1px solid #E2E2E2;
  5189. white-space: pre-line;
  5190. font-size: 18px;
  5191. font-weight: 400;
  5192. }
  5193. .table--wrap table td .dp--tp-wrap {
  5194. display: none;
  5195. }
  5196. .table--wrap table td .input--wrap {
  5197. display: flex;
  5198. align-items: center;
  5199. gap: 10px;
  5200. }
  5201. .table--wrap table td .input--wrap .text {
  5202. font-size: 0.75rem;
  5203. color: #444;
  5204. font-weight: 400;
  5205. }
  5206. .table--wrap table td.bg {
  5207. background-color: #f8f8f8;
  5208. }
  5209. .table--wrap table td:last-child {
  5210. border-right: none;
  5211. }
  5212. .table--wrap table td.le {
  5213. text-align: left;
  5214. padding: 30px;
  5215. }
  5216. .dp__input::-moz-placeholder {
  5217. color: #b6b6b6 !important;
  5218. }
  5219. .dp__input::placeholder {
  5220. color: #b6b6b6 !important;
  5221. }
  5222. .dp__disabled {
  5223. background-color: #f0f0f0 !important;
  5224. }
  5225. .dp__disabled.dp__input {
  5226. color: #aaaaaa !important;
  5227. }
  5228. .btn--wrap.evt--btn {
  5229. display: flex;
  5230. }
  5231. .btn--wrap.evt--btn .custom-btn.v-btn.v-btn--density-default {
  5232. width: -moz-fit-content;
  5233. width: fit-content;
  5234. }
  5235. .btn--wrap.evt--btn .custom-btn.v-btn.v-btn--density-default.btn-sky {
  5236. background-color: #42A5F5;
  5237. height: 2.25rem;
  5238. min-height: 2.25rem;
  5239. }
  5240. .btn--wrap.evt--btn .custom-btn.v-btn.v-btn--density-default.btn-sky .v-btn__content {
  5241. color: #ffffff;
  5242. }
  5243. .btn--wrap.evt--btn .custom-btn.v-btn.v-btn--density-default.btn-red {
  5244. background-color: #DC143C;
  5245. height: 2.25rem;
  5246. min-height: 2.25rem;
  5247. }
  5248. .btn--wrap.evt--btn .custom-btn.v-btn.v-btn--density-default.btn-red .v-btn__content {
  5249. color: #ffffff;
  5250. }
  5251. .ms--pop {
  5252. display: flex;
  5253. gap: 30px;
  5254. }
  5255. .ms--pop .ms--input--wrap {
  5256. width: 60%;
  5257. }
  5258. .ms--pop .ms--desc--wrap {
  5259. width: 40%;
  5260. }
  5261. .ms--pop .ms--desc--wrap p {
  5262. font-size: 1rem;
  5263. font-weight: 200;
  5264. line-height: 1.4;
  5265. }
  5266. .ms--pop .ms--desc--wrap p strong {
  5267. font-size: 1.2rem;
  5268. font-weight: 600;
  5269. margin-bottom: 20px;
  5270. display: inline-block;
  5271. }
  5272. .tbl-wrapper .tbl-wrap .ag-checkbox-input-wrapper {
  5273. width: 20px;
  5274. height: 20px;
  5275. background-color: #ffffff;
  5276. border: 1px solid #b0b0b0;
  5277. }
  5278. .tbl-wrapper .tbl-wrap .ag-checkbox-input-wrapper.ag-checked::after {
  5279. display: block;
  5280. width: 20px;
  5281. height: 20px;
  5282. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%230094FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  5283. background-position: center;
  5284. }
  5285. .tbl-wrapper .tbl-wrap .ag-checkbox-input-wrapper:before,
  5286. .tbl-wrapper .tbl-wrap .ag-checkbox-input-wrapper:after {
  5287. display: none;
  5288. }/*# sourceMappingURL=mode-w-m.css.map */