.master-header-viewport-box {
  height: 100vh;
  max-height: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  color: #141414;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  position: relative;
}
.master-header-viewport-box .viewport-wrapper {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.master-header-viewport-box .viewport-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  width: 1px;
  background: #DBDAD6;
  z-index: -1;
}
.master-header-viewport-box .viewport-wrapper .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1440px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 100%;
}
.master-header-viewport-box .gfx-element {
  width: 240px;
  height: 72px;
  border-radius: 149.051px;
  background: #141414;
  position: absolute;
}
.master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-1 {
  top: 122px;
  left: -50px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-1 {
    top: 45px;
    left: -50px;
  }
}
.master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-2 {
  top: 50px;
  left: 494px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-2 {
    top: 134px;
    left: 313px;
  }
}
.master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-3 {
  top: 194px;
  left: 915px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.top-elements .gfx-element.element-3 {
    top: 137px;
    left: 915px;
  }
}
.master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-1 {
  bottom: 234px;
  left: -60px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-1 {
    display: none;
  }
}
.master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-2 {
  bottom: 90px;
  left: 450px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-2 {
    display: none;
  }
}
.master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-3 {
  bottom: 162px;
  left: 1145px;
}
@media (max-width: 767px) {
  .master-header-viewport-box .gfx-elements.bottom-elements .gfx-element.element-3 {
    bottom: 45px;
    left: 240px;
  }
}
.master-header-viewport-box#offer-why-resona-2 {
  border-top: 1px solid #DBDAD6;
}