.mapBox { width: 100%; height: 100vh; position: relative; overflow: hidden; .l7-control-container { .l7-bottom { .l7-control-logo { .l7-control-logo-link { display: none; } } } } .RobotBox { width: 40%; position: absolute; top: 16px; left: 16px; z-index: 10; } .rightSearchBox { position: absolute; top: 16px; right: 16px; z-index: 10; } .serverpartDetail { width: 25%; height: calc(100vh - 20px); position: absolute; top: 0; right: 0; z-index: 10; } .realBox { width: 45%; height: 100px; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; } .revenueRate { width: 400px; height: 400px; border: 1px solid #5F5F5F; position: absolute; bottom: 16px; left: 16px; z-index: 10; border-radius: 8px; box-sizing: border-box; padding: 16px; } .BusyRanking { width: 400px; height: 400px; border: 1px solid #5F5F5F; position: absolute; bottom: 16px; right: 16px; z-index: 10; border-radius: 8px; box-sizing: border-box; padding: 16px; } .areaListLegend { box-sizing: border-box; padding: 16px; border: 1px solid #5F5F5F; border-radius: 8px; z-index: 10; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; .areaItem { margin-right: 16px; .color { width: 16px; height: 16px; border-radius: 50%; margin-right: 8px; display: inline-block; } .text { color: #fff; } } } }