traffic.css 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243
  1. ul, li {
  2. list-style: none;
  3. }
  4. .trafficWrap {
  5. overflow: auto;
  6. width: 100%;
  7. height: calc(100% - 200px);
  8. display: flex;
  9. -webkit-box-pack: center;
  10. justify-content: center;
  11. }
  12. .left-list-area {
  13. width: 275px;
  14. height: calc(100% - 70px);
  15. background-color: white;
  16. position: absolute;
  17. z-index: 12;
  18. border : 1px solid #c3c1c1;
  19. }
  20. .toggle-button{
  21. position: absolute;
  22. left: 275px;
  23. background-color: white;
  24. border-radius: 0 5px 5px 0;
  25. z-index: 20;
  26. width: 25px;
  27. height: 25px;
  28. text-align: center;
  29. line-height: 22px;
  30. font-weight: bold;
  31. cursor: pointer;
  32. border: 1px solid #c3c1c1;
  33. color: #a59d9d;
  34. user-select: none;
  35. }
  36. .location-btn {
  37. position: absolute;
  38. left: 302px;
  39. background-color: white;
  40. border-radius: 5px;
  41. z-index: 20;
  42. width: 73px;
  43. height: 25px;
  44. text-align: center;
  45. font-weight: bold;
  46. cursor: pointer;
  47. border: 1px solid #c3c1c1;
  48. color: black;
  49. user-select: none;
  50. display: none;
  51. align-items: center;
  52. justify-content: center;
  53. gap: 2px;
  54. font-size: 13px;
  55. }
  56. .location-btn.on {
  57. background-color: #dbdbdb;
  58. }
  59. .location-box {
  60. position: absolute;
  61. left: 302px;
  62. background-color: white;
  63. border-radius: 5px;
  64. z-index: 20;
  65. text-align: center;
  66. font-weight: bold;
  67. color: #938f8f;
  68. top: 25px;
  69. display: none;
  70. width: 325px;
  71. height: calc(100% - 95px);
  72. border: 1px solid #c3c1c1;
  73. opacity: 0.6;
  74. }
  75. .location-box .top {
  76. width: 100%;
  77. height: 40px;
  78. display: flex;
  79. align-items: center;
  80. justify-content: center;
  81. gap: 5px;
  82. border-bottom: 1px solid #c3c1c1;
  83. }
  84. .location-box .top .search-btn {
  85. width: 80px;
  86. height: 30px;
  87. border-radius: 5px;
  88. background-color: #3396ff;
  89. color: white;
  90. line-height: 30px;
  91. user-select: none;
  92. cursor: pointer;
  93. }
  94. .location-box:hover{
  95. opacity: 1;
  96. }
  97. .location-box input {
  98. padding: 5px;
  99. width: calc(100% - 100px);
  100. }
  101. .arrow.LTC1{
  102. background-color: #2fba2c;
  103. }
  104. .arrow.LTC1::after {
  105. border-top-color: #2fba2c !important;
  106. }
  107. .arrow.LTC1::before {
  108. border-bottom-color: #2fba2c !important;
  109. }
  110. .arrow.LTC2{
  111. background-color : #ffc500;
  112. }
  113. .arrow.LTC2::after{
  114. border-top-color: #ffc500 !important;
  115. }
  116. .arrow.LTC2::before{
  117. border-bottom-color: #ffc500 !important;
  118. }
  119. .arrow.LTC3{
  120. background-color : #ee0000;
  121. }
  122. .arrow.LTC3::before {
  123. border-bottom-color: #ee0000 !important;
  124. }
  125. .arrow.LTC3::after{
  126. border-top-color: #ee0000 !important;
  127. }
  128. .arrow.LTC0{
  129. background-color : #888888;
  130. }
  131. .arrow.LTC0::before {
  132. border-bottom-color: #888888 !important;
  133. }
  134. .arrow.LTC0::after{
  135. border-top-color: #888888 !important;
  136. }
  137. .tab-title {
  138. padding: 10px;
  139. height: 35px;
  140. font-size: 12px;
  141. font-weight: bold;
  142. border-bottom: 1px solid #c3c1c1;
  143. /*color: white;*/
  144. /*background-color: black;*/
  145. display: flex;
  146. align-items: center;
  147. justify-content: flex-end;
  148. }
  149. .down{
  150. width: 16px;
  151. height: calc(100% - 5px);
  152. margin-right: 10px;
  153. margin-bottom: 5px;
  154. position: relative;
  155. }
  156. .down.arrow::after{
  157. position: absolute;
  158. border-top: 13px solid ;
  159. border-left: 13px solid transparent;
  160. border-right: 13px solid transparent;
  161. width: 0px;
  162. height: 0px;
  163. bottom: -9px;
  164. left: -5px;
  165. /*width: 26px;*/
  166. /*height: 16px;*/
  167. content: "";
  168. z-index: 3;
  169. }
  170. .up {
  171. width: 16px;
  172. height: calc(100% - 5px);
  173. margin-right: 10px;
  174. margin-top: 5px;
  175. position: relative;
  176. }
  177. .up.arrow::before {
  178. position: absolute;
  179. top: -8px;
  180. left: -5px;
  181. border-bottom: 13px solid ;
  182. border-left: 13px solid transparent;
  183. border-right: 13px solid transparent;
  184. /*width: 26px;*/
  185. /*height: 16px;*/
  186. /*transform: rotate(180deg);*/
  187. content: "";
  188. z-index: 3;
  189. }
  190. .tab-title > div {
  191. padding: 5px;
  192. border: 1px solid #c3c1c1;
  193. background-color: white;
  194. color: black;
  195. -moz-user-select: none;
  196. -webkit-user-select: none;
  197. -ms-user-select: none;
  198. user-select: none;
  199. }
  200. .tab-title > div:hover{
  201. cursor: pointer;
  202. filter: brightness(1.1);
  203. }
  204. .tab-title > div.active {
  205. background-color: rgb(51, 102, 171);
  206. color : white;
  207. border: 1px solid rgb(51, 102, 171);
  208. }
  209. .location-btn:hover{
  210. background-color: #dbdbdb;
  211. }
  212. .location-box .top .search-btn:hover,
  213. .toggle-button:hover{
  214. filter: brightness(1.1);
  215. }
  216. .left-list-area .list-tab{
  217. width: 100%;
  218. height: 55px;
  219. background-color: white;
  220. display: flex;
  221. border-bottom: 1px solid #c3c1c1;
  222. }
  223. .left-list-area .list-tab > li {
  224. width: calc(100% / 5);
  225. height: 100%;
  226. display: flex;
  227. align-items: center;
  228. justify-content: center;
  229. cursor: pointer;
  230. font-weight: bold;
  231. flex-direction: column;
  232. }
  233. .left-list-area .list-tab > li:not(:last-child) {
  234. border-right: 1px solid #c3c1c1;
  235. }
  236. .left-list-area .list-tab > li > div:nth-child(1) {
  237. width: 25px;
  238. height: 25px;
  239. background-repeat: no-repeat;
  240. background-size: 25px 25px;
  241. background-position: center;
  242. margin-bottom: 5px;
  243. }
  244. .left-list-area .list-tab > li > div:nth-child(2){
  245. font-size: 7px;
  246. }
  247. .left-list-area .list-tab > li{
  248. color: #a59d9d;
  249. }
  250. .left-list-area .list-content > ul > li .traffic-list {
  251. display: flex; padding: 10px; border-bottom: 1px solid #c3c1c1; cursor: pointer; box-sizing: border-box;
  252. }
  253. .left-list-area .list-content > ul > li .traffic-list.on {
  254. border-bottom: 2px solid #0054ba;
  255. }
  256. .left-list-area .list-content > ul > li {
  257. padding: 0 15px;
  258. border-bottom: 1px solid #c3c1c1;
  259. font-size: 13px;
  260. }
  261. .left-list-area .list-content > ul > li > div {
  262. display: flex;
  263. gap: 5px;
  264. }
  265. .left-list-area .list-content > ul > li > div > div {
  266. width: 50%;
  267. }
  268. .left-list-area .list-content > ul {
  269. display: none;
  270. }
  271. .left-list-area .list-content > ul.on {
  272. display: block;
  273. }
  274. .location-box .list-content > li:hover,
  275. .left-list-area .list-content > li:hover,
  276. .left-list-area .list-tab > li:hover {
  277. filter:brightness(1.1);
  278. color:rgb(51, 102, 171);
  279. }
  280. .left-list-area .list-tab > li.active {
  281. background-color: rgb(51, 102, 171);
  282. color: white;
  283. }
  284. .left-list-area .list-search {
  285. width: 100%;
  286. height: 35px;
  287. padding : 0px 15px;
  288. border-bottom: 1px solid #c3c1c1;
  289. display: flex;
  290. align-items: center;
  291. }
  292. .left-list-area .list-search > div:nth-child(1) {
  293. margin-right: 10px;
  294. font-size: 12px;
  295. }
  296. .left-list-area .list-search > input {
  297. padding: 5px;
  298. height: 28px;
  299. width: 210px;
  300. }
  301. .location-box .list-content {
  302. width: 100%;
  303. height: calc(100% - 39px);
  304. overflow: auto;
  305. }
  306. .left-list-area .list-content {
  307. width: 100%;
  308. /*height: calc(100% - 125px);*/
  309. height: calc(100% - 91px);
  310. overflow: auto;
  311. }
  312. .location-box .list-content > li,
  313. .left-list-area .list-content > li {
  314. width: 100%;
  315. min-height: 35px;
  316. color: black;
  317. border-bottom: 1px solid #c3c1c1;
  318. padding: 5px 10px;
  319. cursor: pointer;
  320. display: flex;
  321. align-items: center;
  322. font-size: 12px;
  323. }
  324. .location-box .list-content > li.click,
  325. .left-list-area .list-content > li.click {
  326. background-color: #eeeeee;
  327. font-weight: bold;
  328. color:rgb(51, 102, 171);
  329. }
  330. .location-box .list-content > li.click:hover,
  331. .left-list-area .list-content > li.click:hover {
  332. filter:brightness(1);
  333. }
  334. /*.check {*/
  335. /* filter: drop-shadow(black 2px 4px 6px);*/
  336. /*}*/
  337. #map {
  338. width: 100%;
  339. height: 100%;
  340. }
  341. .traffic-color-legend {
  342. position: absolute;
  343. border-radius: 8px;
  344. border: 1px solid rgb(192, 194, 197);
  345. display: inline-flex;
  346. background-color: rgb(255, 255, 255);
  347. overflow: hidden;
  348. transition: left 0.3s ease 0s;
  349. z-index: 100;
  350. padding: 9px;
  351. right: 10px;
  352. bottom: 70px;
  353. }
  354. .traffic-color-legend > span:nth-child(1),
  355. .traffic-color-legend > span:nth-child(3){
  356. font-size: 13px;
  357. line-height: 23px;
  358. }
  359. .traffic-color-legend .gradation {
  360. margin: 7px;
  361. width: 70px;
  362. height: 10px;
  363. border-radius: 5px;
  364. background: linear-gradient(90deg, rgb(79, 220, 74) 0%, rgb(208, 222, 33) 35%, rgb(255, 154, 0) 70%, rgb(255, 0, 0) 100%);
  365. }
  366. .legend-bottom {
  367. display: flex;
  368. position: absolute;
  369. z-index: 99;
  370. right: 10px;
  371. bottom: 10px;
  372. width: auto;
  373. height: 80px;
  374. border: 1px solid rgb(140, 140, 140);
  375. background: rgb(255, 255, 255);
  376. border-radius: 2px;
  377. overflow: hidden;
  378. box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px;
  379. }
  380. .legend-bottom h5 {
  381. width: 19px;
  382. color: rgb(127, 127, 127);
  383. font-size: 12px;
  384. text-align: center;
  385. padding-top: 15px;
  386. box-sizing: border-box;
  387. line-height: 24px;
  388. }
  389. .legend-bottom ul {
  390. width: 390px;
  391. padding-left: 0px;
  392. margin-bottom: 0px !important;
  393. }
  394. .legend-bottom ul li {
  395. list-style: none;
  396. outline-width: 0px;
  397. float: left;
  398. /*width: calc(100% / 6);*/
  399. width: calc(100% / 5);
  400. height: 100%;
  401. border-left: 1px solid rgb(209, 209, 209);
  402. box-sizing: border-box;
  403. }
  404. .legend-bottom button > div:nth-child(1) {
  405. height: 31%;
  406. margin-bottom: 5px;
  407. background-position: center;
  408. background-size: 25px 25px;
  409. background-repeat: no-repeat;
  410. }
  411. .legend-bottom button.active {
  412. color: white;
  413. }
  414. .legend-bottom button.active:hover {
  415. color: white;
  416. }
  417. .left-list-area .list-tab .parking-tab-icon,
  418. .legend-bottom .parking-legend-icon {
  419. /*background-image : url(/images/icon/parking-legend1.png);*/
  420. background-image : url(/images/icon/parking-legend-1.png);
  421. }
  422. .left-list-area .list-tab .parking-tab-icon.hover,
  423. .legend-bottom .parking-legend-icon.hover {
  424. /*background-image : url(/images/icon/parking-legend2.png);*/
  425. background-image : url(/images/icon/parking-legend-2.png);
  426. }
  427. .left-list-area .list-tab .parking-tab-icon.active,
  428. .legend-bottom .parking-legend-icon.active {
  429. /*background-image : url(/images/icon/parking-legend3.png);*/
  430. background-image : url(/images/icon/parking-legend-3.png);
  431. }
  432. .left-list-area .list-tab .cctv-tab-icon,
  433. .legend-bottom .cctv-legend-icon {
  434. background-image : url(/images/icon/cctv-legend1.png);
  435. }
  436. .left-list-area .list-tab .cctv-tab-icon.hover,
  437. .legend-bottom .cctv-legend-icon.hover {
  438. background-image : url(/images/icon/cctv-legend2.png);
  439. }
  440. .left-list-area .list-tab .cctv-tab-icon.active,
  441. .legend-bottom .cctv-legend-icon.active {
  442. background-image : url(/images/icon/cctv-legend3.png);
  443. }
  444. .left-list-area .list-tab .intersection-tab-icon,
  445. .legend-bottom .intersection-legend-icon {
  446. background-image : url(/images/icon/intersection-legend1.png);
  447. }
  448. .left-list-area .list-tab .intersection-tab-icon.hover,
  449. .legend-bottom .intersection-legend-icon.hover {
  450. background-image : url(/images/icon/intersection-legend2.png);
  451. }
  452. .left-list-area .list-tab .intersection-tab-icon.active,
  453. .legend-bottom .intersection-legend-icon.active {
  454. background-image : url(/images/icon/intersection-legend3.png);
  455. }
  456. .left-list-area .list-tab .vms-tab-icon,
  457. .legend-bottom .vms-legend-icon {
  458. background-image : url(/images/icon/vms-legend1.png);
  459. }
  460. .left-list-area .list-tab .vms-tab-icon.hover,
  461. .legend-bottom .vms-legend-icon.hover {
  462. background-image : url(/images/icon/vms-legend2.png);
  463. }
  464. .left-list-area .list-tab .vms-tab-icon.active,
  465. .legend-bottom .vms-legend-icon.active {
  466. background-image : url(/images/icon/vms-legend3.png);
  467. }
  468. .left-list-area .list-tab .incident-tab-icon,
  469. .legend-bottom .incident-legend-icon {
  470. background-image : url(/images/icon/incident-legend1.png);
  471. }
  472. .left-list-area .list-tab .incident-tab-icon.hover,
  473. .legend-bottom .incident-legend-icon.hover {
  474. background-image : url(/images/icon/incident-legend2.png);
  475. }
  476. .left-list-area .list-tab .incident-tab-icon.active,
  477. .legend-bottom .incident-legend-icon.active {
  478. background-image : url(/images/icon/incident-legend3.png);
  479. }
  480. .left-list-area .list-tab .traffic-tab-icon,
  481. .legend-bottom .traffic-legend-icon {
  482. background-image : url(/images/icon/traffic-legend1.png);
  483. }
  484. .left-list-area .list-tab .traffic-tab-icon.hover,
  485. .legend-bottom .traffic-legend-icon.hover {
  486. background-image : url(/images/icon/traffic-legend2.png);
  487. }
  488. .left-list-area .list-tab .traffic-tab-icon.active,
  489. .legend-bottom .traffic-legend-icon.active {
  490. background-image : url(/images/icon/traffic-legend3.png);
  491. }
  492. .legend-bottom ul li:nth-child(1) > button.active {
  493. background: rgb(0, 186, 153) !important;
  494. }
  495. .legend-bottom ul li:nth-child(2) > button.active{
  496. background: rgb(0, 153, 204) !important;
  497. }
  498. .legend-bottom ul li:nth-child(3) > button.active{
  499. background: rgb(255, 153, 51) !important;
  500. }
  501. .legend-bottom ul li:nth-child(4) > button.active{
  502. background: rgb(255, 51, 51) !important;
  503. }
  504. .legend-bottom ul li:nth-child(5) > button.active{
  505. background: rgb(51, 102, 171) !important;
  506. }
  507. .legend-bottom ul li:nth-child(6) > button.active{
  508. background: rgb(37, 143, 47) !important;
  509. }
  510. .legend-bottom ul li button {
  511. width: 100%;
  512. height: 100%;
  513. border: none;
  514. font-size: 11px;
  515. color: rgb(72, 72, 72);
  516. letter-spacing: -0.5px;
  517. box-sizing: border-box;
  518. }
  519. .legend-bottom ul li button:hover{
  520. filter:brightness(1.1);
  521. color:rgb(51, 102, 171);
  522. cursor: pointer;
  523. }
  524. .cctv-info-window{
  525. width: 400px;
  526. height: 330px;
  527. background-color: white;
  528. box-shadow: 2px 2px 2px 2px #2b333f;
  529. padding: 5px;
  530. z-index: 999;
  531. }
  532. .parking-info-window{
  533. width: 300px;
  534. /*height: 240px;*/
  535. background-color: white;
  536. box-shadow: 2px 2px 2px 2px #2b333f;
  537. z-index: 999;
  538. position: absolute;
  539. }
  540. .parking-info-window > .title > div:nth-child(2) {
  541. width: 40px;
  542. height: 50px;
  543. background-image: url("/images/icon/btn_close.png");
  544. background-repeat: no-repeat;
  545. background-position: center;
  546. background-size: 16px auto;
  547. }
  548. .parking-info-window > .title > div:nth-child(2):hover{
  549. cursor: pointer;
  550. filter: brightness(1.1);
  551. }
  552. .parking-info-window > .title > div:nth-child(1) {
  553. width: calc(100% - 40px);
  554. height: 100%;
  555. line-height: 50px;
  556. color: white;
  557. text-overflow: ellipsis;
  558. white-space: nowrap;
  559. overflow: hidden;
  560. padding: 0 20px;
  561. cursor: default;
  562. }
  563. .parking-info-window > .content .row {
  564. display: flex;
  565. }
  566. .parking-info-window > .content .row > div:nth-child(1){
  567. display: inline-block;
  568. width: 90px;
  569. height: 30px;
  570. line-height: 30px;
  571. border-radius: 6px;
  572. background-color: #5f728b;
  573. text-align: center;
  574. color: #fff;
  575. margin: 0 10px;
  576. font-size: 14px;
  577. }
  578. .parking-info-window > .content .row > div:nth-child(2) {
  579. width: calc(100% - 110px);
  580. height: 100%;
  581. line-height: 30px;
  582. border-bottom: 1px solid #d4d4d4;
  583. /*overflow: hidden;*/
  584. /*text-overflow: ellipsis;*/
  585. /*white-space: nowrap;*/
  586. overflow: hidden;
  587. text-overflow: ellipsis;
  588. display: -webkit-box;
  589. -webkit-line-clamp: 2;
  590. -webkit-box-orient: vertical;
  591. }
  592. .parking-info-window > .content {
  593. padding: 5px;
  594. display: flex;
  595. flex-direction: column;
  596. justify-content: space-around;
  597. height: calc(100% - 50px);
  598. background-color: #f5f5f5;
  599. border : 1px solid #5f728b;
  600. }
  601. .parking-info-window > .title {
  602. background-color: #293347;
  603. height: 50px;
  604. display: flex;
  605. }
  606. .vms-info-window {
  607. background-color: white;
  608. box-shadow: 2px 2px 2px 2px #2b333f;
  609. padding : 5px;
  610. }
  611. .incident-info-window {
  612. padding: 5px;
  613. background-color: white;
  614. box-shadow: 2px 2px 2px 2px #2b333f;
  615. width: 450px;
  616. }
  617. .incident-info-window .title {
  618. display: flex;
  619. padding: 5px;
  620. border-bottom: 1px solid #c7c6c6;
  621. }
  622. .incident-info-window .title > div:nth-child(1) {
  623. /*line-height: 30px;*/
  624. /*overflow: hidden;*/
  625. /*text-overflow: ellipsis;*/
  626. /*white-space: nowrap;*/
  627. word-break: break-all;
  628. white-space: normal;
  629. }
  630. .incident-info-window .content > div {
  631. padding : 5px;
  632. width: 100%;
  633. /*text-overflow: ellipsis;*/
  634. /*overflow: hidden;*/
  635. /*white-space: nowrap;*/
  636. word-break: break-all;
  637. white-space: normal;
  638. }
  639. .incident-info-window .content > div:nth-child(2) {
  640. word-break: break-all;
  641. white-space: normal;
  642. }
  643. .vms-info-window .title,
  644. .cctv-info-window .title {
  645. width: 100%;
  646. height: 25px;
  647. display: flex;
  648. align-items: center;
  649. border-bottom: 1px solid #c7c6c6;
  650. }
  651. .incident-info-window .title > div:nth-child(1),
  652. .vms-info-window .title > div:nth-child(1),
  653. .cctv-info-window .title > div:nth-child(1) {
  654. width: calc(100% - 30px);
  655. height: 100%;
  656. cursor: default;
  657. font-weight: bold;
  658. }
  659. .incident-info-window .title > div:nth-child(2),
  660. .vms-info-window .title > div:nth-child(2),
  661. .cctv-info-window .title > div:nth-child(2) {
  662. margin-left: auto;
  663. width: 30px;
  664. height: 30px;
  665. text-align: center;
  666. line-height: 28px;
  667. font-weight: bold;
  668. cursor: pointer;
  669. }
  670. .incident-info-window .title > div:nth-child(2):hover,
  671. .vms-info-window .title > div:nth-child(2):hover,
  672. .cctv-info-window .title > div:nth-child(2):hover{
  673. color : rgb(51, 102, 171);
  674. }
  675. .vms-info-window .content {
  676. margin-top : 5px;
  677. background-color: black;
  678. text-align: center;
  679. line-height: 50px;
  680. color : #999898;
  681. font-weight: bold;
  682. font-size: 14px;
  683. }
  684. .vms-info-window .content > img.active {
  685. display: block;
  686. }
  687. .vms-info-window .content > img{
  688. display: none;
  689. }
  690. .cctv-info-window .content{
  691. width: 100%;
  692. height: calc(100% - 25px);
  693. }
  694. .cctv-info-window .content > div:nth-child(1){
  695. width: 100%;
  696. height: calc(100% - 35px);
  697. background-color: black;
  698. }
  699. .cctv-info-window .content video {
  700. width: 100%;
  701. height: 100%;
  702. object-fit : cover;
  703. }
  704. .cctv-info-window .content > div:nth-child(2){
  705. width: 100%;
  706. height: 25px;
  707. display: flex;
  708. align-items: center;
  709. justify-content: space-between;
  710. margin-top: 5px;
  711. }
  712. .cctv-info-window .content > div > div:nth-child(1) {
  713. font-size: 14px;
  714. -moz-user-select: none;
  715. -webkit-user-select: none;
  716. -ms-user-select: none;
  717. user-select: none;
  718. }
  719. .cctv-info-window .content > div > div:nth-child(1) .timer {
  720. font-weight: bold;
  721. }
  722. .cctv-info-window .content > div > div:nth-child(2) {
  723. margin-left: 5px;
  724. width: 100px;
  725. height: 25px;
  726. text-align: center;
  727. line-height: 25px;
  728. background-color: rgb(51, 102, 171);
  729. color: white;
  730. cursor: pointer;
  731. }
  732. .cctv-info-window .content > div > div:nth-child(2):hover{
  733. filter: brightness(1.1);
  734. }
  735. /*.trafficPop{position:absolute; bottom:-50px; margin-left:45px;left:50%; min-width:250px; width: auto; height:80px; padding:10px 10px 10px 7px; border:1px solid #a0a0a0;background:#fff;box-shadow:5px 5px 5px grey}*/
  736. .trafficPop{min-width:250px; width: auto; height:80px; padding:10px 10px 10px 7px; border:1px solid #a0a0a0;background:#fff;box-shadow:5px 5px 5px grey}
  737. .trafficPop .close-btn{position:absolute; top:13px; right:14px;}
  738. .traffic-speed{overflow:hidden; padding-bottom:6px; margin-bottom:5px; border-bottom: 3px solid; color: black;}
  739. .traffic-speed.LTC0{border-color: #888888;}
  740. .traffic-speed.LTC1{border-color: #2fba2c;}
  741. .traffic-speed.LTC2{border-color: #ffc500;}
  742. .traffic-speed.LTC3{border-color: #ee0000;}
  743. .traffic-speed-line-grey{border-bottom:3px solid #888888;}
  744. .traffic-speed-line-green{border-bottom:3px solid #0ebe38;}
  745. .traffic-speed-line-yellow{border-bottom:3px solid #ffc500;}
  746. .traffic-speed-line-red{border-bottom:3px solid #ee0000;}
  747. .traffic-speed span.traffic-speed-info{float:right; display:block; width:60px; height:21px; color:#fff; text-align:center; line-height:21px;font-size:11px; font-weight:600;}
  748. .traffic-name{font-family:'Nanum Gothic';font-weight:600; font-size:15px}
  749. .traffic-info{font-size:12px}
  750. .detail1{font-weight:900;color:#777;margin-bottom:5px;display:block;overflow: hidden;width:250px;text-overflow: ellipsis;white-space: nowrap}
  751. .detail2{font-weight:900;color:#777;margin-bottom:5px;width:200px;padding-left:32px;}
  752. .border-back,
  753. .border-back.LTC0{background-color:#888888;}
  754. .border-back.LTC1{background-color:#2fba2c;}
  755. .border-back.LTC2{background-color:#ffc500;}
  756. .border-back.LTC3{background-color:#ee0000;}
  757. .border-back-green{background-color:#2fba2c;}
  758. .border-back-red {background-color:#ee0000;}
  759. .border-back-yellow {background-color:#ffc500;}
  760. .border-back-gray {background-color:#888888;}
  761. .mobile-traffic {
  762. padding: 0.6rem 1rem;
  763. border-top: 1px solid rgb(230, 230, 230);
  764. display: none;
  765. justify-content: space-between;
  766. }
  767. .mobile-traffic > a {
  768. width: calc(100% / 5);
  769. word-break: keep-all;
  770. text-align: center;
  771. line-height: 1.1;
  772. font-weight: bold;
  773. font-size: 11px;
  774. height: 60px;
  775. padding: 5px;
  776. }
  777. .mobile-traffic > a > div {
  778. filter: grayscale(1);
  779. height: inherit;
  780. background-position: center;
  781. background-repeat: no-repeat;
  782. background-size: 35px 35px;
  783. height: 35px;
  784. }
  785. .mobile-traffic > a.click {
  786. color: rgb(51, 102, 171);
  787. }
  788. .mobile-traffic > a > div.click{
  789. filter: grayscale(0);
  790. }
  791. .mobile-traffic > a > #cctv {
  792. background-image: url("/images/icon/cctv-legend2.png");
  793. }
  794. .mobile-traffic > a > #intersection {
  795. background-image: url("/images/icon/intersection-legend2.png");
  796. }
  797. .mobile-traffic > a > #vms {
  798. background-image: url("/images/icon/vms-legend2.png");
  799. }
  800. .mobile-traffic > a > #incident {
  801. background-image: url("/images/icon/incident-legend2.png");
  802. }
  803. .mobile-traffic > a > #traffic {
  804. background-image: url("/images/icon/traffic-legend2.png");
  805. }
  806. .mobile-select {
  807. display: none;
  808. border: none;
  809. padding-left: 5px;
  810. background-color : white;
  811. }
  812. .mobile-select:focus {
  813. outline: none !important;
  814. }
  815. @media (max-width: 920px) {
  816. .cctv-info-window {
  817. width: 240px;
  818. height: 195px;
  819. }
  820. .parking-info-window{
  821. width: 216px;
  822. height: 200px;
  823. }
  824. .parking-info-window > .title{
  825. height: 35px;
  826. }
  827. .parking-info-window > .title > div:nth-child(1) {
  828. width: calc(100% - 30px);
  829. line-height: 35px;
  830. padding: 0 10px;
  831. font-size: 12px;
  832. }
  833. .parking-info-window > .title > div:nth-child(2) {
  834. width: 30px;
  835. height: 35px;
  836. }
  837. .parking-info-window > .content {
  838. padding: 0;
  839. height: calc(100% - 35px);
  840. }
  841. .vms-info-window .title, .cctv-info-window .title{
  842. height: 25px;
  843. font-size: 12px;
  844. font-weight: bold;
  845. }
  846. .cctv-info-window .content{
  847. height: 130px;
  848. }
  849. .parking-info-window > .content .row > div:nth-child(1) {
  850. width: 50px;
  851. height: 25px;
  852. line-height: 25px;
  853. font-size: 12px;
  854. }
  855. .parking-info-window > .content .row > div:nth-child(2) {
  856. width: calc(100% - 80px);
  857. line-height: 25px;
  858. font-size: 12px;
  859. }
  860. .cctv-info-window .content > div:nth-child(1),
  861. .cctv-info-window .content video {
  862. height: 100%;
  863. }
  864. .cctv-info-window .content > div > div:nth-child(1) {
  865. font-size: 11px;
  866. }
  867. .cctv-info-window .content > div > div:nth-child(2) {
  868. width: 70px;
  869. height: 25px;
  870. line-height: 25px;
  871. font-size: 12px;
  872. }
  873. .cctv-info-window .content > div:nth-child(2) {
  874. height: 25px;
  875. }
  876. .incident-info-window {
  877. max-width: 250px;
  878. font-size: 11px;
  879. }
  880. .legend-bottom {
  881. height: 55px;
  882. }
  883. .legend-bottom h5 {
  884. padding-top : 3px;
  885. font-size: 11px;
  886. }
  887. .legend-bottom ul {
  888. width: 300px;
  889. }
  890. .legend-bottom button > div:nth-child(2) {
  891. font-size: 8px;
  892. }
  893. .legend-bottom button > div:nth-child(1) {
  894. background-size: 20px 20px;
  895. }
  896. .incident-info-window {
  897. width: 250px !important;
  898. font-size: 11px !important;
  899. padding: 0;
  900. }
  901. .incident-info-window .title > div:nth-child(2) {
  902. height: 20px;
  903. }
  904. .incident-info-window .content > div {
  905. white-space: normal;
  906. }
  907. .incident-info-window .title > div:nth-child(1) {
  908. line-height: 15px;
  909. white-space: normal;
  910. }
  911. }
  912. @media (max-width: 450px) {
  913. .mobile-select {
  914. display: block;
  915. height: 40px;
  916. position: absolute;
  917. bottom : 78px;
  918. width: 100%;
  919. z-index: 12;
  920. }
  921. .mobile-traffic{
  922. display: flex;
  923. }
  924. .traffic-color-legend {
  925. display: none;
  926. }
  927. .traffic-color-legend.traffic,
  928. .traffic-color-legend.intersection{
  929. display: flex;
  930. right: 10px;
  931. bottom : 10px;
  932. }
  933. .left-list-area .list-content {
  934. height: calc(100% - 90px)
  935. }
  936. .left-list-area {
  937. /*height: 276px;*/
  938. /*width: 53px;*/
  939. height: calc(100% - 20px);
  940. }
  941. .location-box .list-content > div.empty, .left-list-area .list-content > div.empty {
  942. width: 100%;
  943. height: 100%;
  944. display: flex;
  945. align-items: center;
  946. justify-content: center;
  947. }
  948. .left-list-area .list-tab {
  949. /*flex-direction: column;*/
  950. /*height: 276px;*/
  951. }
  952. .left-list-area .list-tab > li {
  953. width: 100%;
  954. height: 55px;
  955. }
  956. .left-list-area .list-tab > li:not(:last-child) {
  957. /*border-right: 0px;*/
  958. /*border-bottom: 1px solid #c3c1c1;*/
  959. }
  960. .left-list-area .list-search,
  961. .tab-title,
  962. .left-list-area .list-content,
  963. .toggle-button,
  964. .location-btn,
  965. .location-box,
  966. .legend-bottom {
  967. /*display: none;*/
  968. }
  969. .cctv-info-window {
  970. width: 240px;
  971. height: 195px;
  972. }
  973. .vms-info-window .title, .cctv-info-window .title{
  974. height: 25px;
  975. font-size: 9px;
  976. font-weight: bold;
  977. padding: 0;
  978. }
  979. .cctv-info-window .content{
  980. height: 130px;
  981. }
  982. .cctv-info-window .content > div:nth-child(1),
  983. .cctv-info-window .content video {
  984. height: 100%;
  985. }
  986. .trafficWrap {
  987. /*height: calc(100% - 71.19px);*/
  988. height: calc(100% - 189px);
  989. flex-direction: column;
  990. }
  991. .legend-bottom{
  992. display: none;
  993. }
  994. .cctv-info-window .content > div > div:nth-child(1) {
  995. font-size: 11px;
  996. }
  997. .cctv-info-window .content > div > div:nth-child(2) {
  998. width: 70px;
  999. height: 25px;
  1000. line-height: 25px;
  1001. font-size: 12px;
  1002. }
  1003. .cctv-info-window .content > div:nth-child(2) {
  1004. height: 25px;
  1005. }
  1006. .incident-info-window .title > div:nth-child(2),
  1007. .vms-info-window .title > div:nth-child(2),
  1008. .cctv-info-window .title > div:nth-child(2) {
  1009. width: 30px;
  1010. }
  1011. }
  1012. @media (min-width: 420px) {
  1013. }
  1014. @media (min-width: 795px) {
  1015. .location-btn {
  1016. display: flex;
  1017. }
  1018. }
  1019. @media (min-width: 765px) {
  1020. .traffic-color-legend {
  1021. right: 345px;
  1022. bottom: 10px;
  1023. }
  1024. }
  1025. @media (min-width: 1090px){
  1026. .location-box {
  1027. height: calc(100% - 53px)
  1028. }
  1029. }
  1030. @media (min-width: 605px) {
  1031. .left-list-area {
  1032. height: calc(100% - 27px);
  1033. }
  1034. }
  1035. @media (min-width: 990px) {
  1036. /*.traffic-color-legend{*/
  1037. /* right: 430px;*/
  1038. /* bottom: 10px;*/
  1039. /*}*/
  1040. }
  1041. @media (min-width: 920px) {
  1042. .location-box .list-content > div.empty,
  1043. .left-list-area .list-content > div.empty{
  1044. width: 100%;
  1045. height: 100%;
  1046. display: flex;
  1047. align-items: center;
  1048. justify-content: center;
  1049. }
  1050. .left-list-area {
  1051. width: 400px;
  1052. }
  1053. .left-list-area .list-tab > li > div:nth-child(1) {
  1054. width: 35px;
  1055. height: 35px;
  1056. background-size: 35px 35px;
  1057. }
  1058. .left-list-area .list-tab > li > div:nth-child(2){
  1059. font-size: 10px;
  1060. }
  1061. .left-list-area .list-tab {
  1062. height : 80px;
  1063. }
  1064. .toggle-button {
  1065. left : 400px;
  1066. }
  1067. .location-box,
  1068. .location-btn {
  1069. left: 427px;
  1070. }
  1071. .tab-title {
  1072. height: 40px;
  1073. font-size: 16px;
  1074. }
  1075. .left-list-area .list-search {
  1076. height: 50px;
  1077. padding : 10px 15px;
  1078. }
  1079. .left-list-area .list-search > div:nth-child(1) {
  1080. font-size: 14px;
  1081. }
  1082. .left-list-area .list-search > input {
  1083. width: 325px;
  1084. height: 35px;
  1085. }
  1086. .left-list-area .list-content {
  1087. /*height: calc(100% - 170px);*/
  1088. height: calc(100% - 131px);
  1089. }
  1090. .location-box .list-content > li,
  1091. .left-list-area .list-content > li {
  1092. min-height: 40px;
  1093. padding: 10px;
  1094. font-size: 14px;
  1095. }
  1096. .traffic-color-legend {
  1097. right: 430px;
  1098. }
  1099. }
  1100. @media (max-height: 900px) {
  1101. /*.cctv-info-window {*/
  1102. /* width: 240px;*/
  1103. /* height: 195px;*/
  1104. /*}*/
  1105. /*.vms-info-window .title*/
  1106. /*, .cctv-info-window .title*/
  1107. /*{*/
  1108. /* height: 25px;*/
  1109. /* font-size: 12px;*/
  1110. /* font-weight: bold;*/
  1111. /*}*/
  1112. /*.cctv-info-window .content{*/
  1113. /* height: 130px;*/
  1114. /*}*/
  1115. /*.cctv-info-window .content > div:nth-child(1),*/
  1116. /*.cctv-info-window .content video {*/
  1117. /* height: 100%;*/
  1118. /*}*/
  1119. /*.cctv-info-window .content > div > div:nth-child(1) {*/
  1120. /* font-size: 11px;*/
  1121. /*}*/
  1122. /*.cctv-info-window .content > div > div:nth-child(2) {*/
  1123. /* width: 70px;*/
  1124. /* height: 25px;*/
  1125. /* line-height: 25px;*/
  1126. /* font-size: 12px;*/
  1127. /*}*/
  1128. /*.cctv-info-window .content > div:nth-child(2) {*/
  1129. /* height: 25px;*/
  1130. /*}*/
  1131. /*.incident-info-window {*/
  1132. /* max-width: 350px;*/
  1133. /* font-size: 11px;*/
  1134. /*}*/
  1135. .legend-bottom {
  1136. height: 55px;
  1137. }
  1138. .legend-bottom h5 {
  1139. padding-top : 3px;
  1140. font-size: 11px;
  1141. }
  1142. .legend-bottom ul {
  1143. width: 300px;
  1144. }
  1145. .legend-bottom button > div:nth-child(2) {
  1146. font-size: 8px;
  1147. }
  1148. .legend-bottom button > div:nth-child(1) {
  1149. background-size: 20px 20px;
  1150. }
  1151. .traffic-color-legend {
  1152. right: 10px;
  1153. bottom : 70px;
  1154. }
  1155. }