*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
}

.main_body {
  height: 100%;
  width: 100%;
  position: relative;
}

.base_container {
  height: 100%;
  width: 100%;
  position: fixed;
}

.base_container .top {
  height: 25%;
  width: 100%;
  background-color: maroon;
  pointer-events: none;
}

.top {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.main_container {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  opacity: 0.5;
}

.main_container .left {
  width: 52%;
  height: 100%;
  background-color: yellow;
}

.main_container .right {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
}