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

@font-face {
  font-family: "OPPOSans2_En_design-Heavy";
  src:
    url("../font/OPPOSans2_En_design-Heavy/OPPOSans2_En_design-Heavy.woff") format("woff"),
    url("../font/OPPOSans2_En_design-Heavy/OPPOSans2_En_design-Heavy.ttf") format("truetype"),
    url("../font/OPPOSans2_En_design-Heavy/OPPOSans2_En_design-Heavy.eot") format("embedded-opentype"),
    url("../font/OPPOSans2_En_design-Heavy/OPPOSans2_En_design-Heavy.svg") format("svg");
}

@font-face {
  font-family: "OPPOSansWeb2";
  src: url("../font/OPPOSansWeb2/OPPOSansWeb2.woff2") format("woff2"),
    url("../font/OPPOSansWeb2/OPPOSansWeb2.woff") format("woff"),
    url("../font/OPPOSansWeb2/OPPOSansWeb2.ttf") format("truetype"),
    url("../font/OPPOSansWeb2/OPPOSansWeb2.eot") format("embedded-opentype"),
    url("../font/OPPOSansWeb2/OPPOSansWeb2.svg") format("svg");
}

body {
  background: #f1f1f1;
  width: 100%;
  overflow: hidden;
  color: #0028aa;
  margin: 0 !important;
}

.wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.he_content {
  width: 100%;
}

.he_cont1200 {
  width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
  max-width: 100%;
}

.he_logobox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 25px 0;
}


h1 {
  margin: 0;
  font-size: 6em;
  font-weight: 600;
  color: #0028aa;
  font-family: "OPPOSans2_En_design-Heavy";
}

p {
  width: 100%;
  font-size: 1.8em;
  line-height: 1.4;
  color: #0028aa;
  font-family: "OPPOSans2_En_design-Heavy";
}

.buttons {
  white-space: nowrap;
  display: inline-block;
}

span {
  display: block;
  text-transform: uppercase;
  color: #B9DDFB;
  letter-spacing: 1.5px;
  text-align: center;
  font-family: "OPPOSansWeb2";
}

a {
  display: inline-block;
  padding: 0.6em 0.8em;
  margin-right: 1em;
  margin-bottom: 1em;
  border: 3px solid #0028aa;
  color: #0028aa;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  /* letter-spacing: 0.2em; */
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  color: #0028aa;
  font-size: 14px;
  font-family: "OPPOSans2_En_design-Heavy";
}

a:hover {
  color: #E3F2FD;
}

a:hover:before {
  top: 0;
}

a:before {
  content: "";
  background: #0028aa;
  height: 100%;
  width: 100%;
  position: absolute;
  top: -100%;
  left: 0;
  transition: 0.3s;
  z-index: -1;
}

.space {
  width: 75px;
  height: calc(50vh + 37.5px);
  /* border-top-left-radius: 37.5px;
  border-top-right-radius: 37.5px; */
  overflow: hidden;
  margin: calc(50vh - 37.5px) auto 0 auto;
  position: relative;
  /* pointer-events: none; */
  /* -webkit-transform: translateZ(0); */
}

/* .blackhole {
  border: 5px solid #1674D1;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.blackhole:after {
  content: "";
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  border: 5px solid #1674D1;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 5;
  transform: rotate(45deg);
} */

.ship {
  height: 150px;
  width: 55px;
  margin-left: 10px;
  animation: blackhole 4s infinite linear;
  position: absolute;
  bottom: -150px;
}



@keyframes blackhole {
  to {
    transform: translateY(-100vh);
  }
}

/* </style><script>window.console=window.console || function(t) {}

;

</script><script>if (document.location.search.match(/type=embed/gi)) {
  window.parent.postMessage("resize", "*");
} */

.blackhole img {
  width: 100%;
}

.blackhole a {
  border: none;
  color: transparent;
  width: 100%;
}

.he_phbx a {
  border: none;
  color: transparent;
  padding-left: 0;
}


.blackhole a:before {
  display: none;
}

.he_phbx a:before {
  display: none;
}

.space {
  width: 220px;
}

.blackhole {
  width: 100%;
}

.he_phbx {
  display: block;
  width: 216px;
}

.he_phbx a {
  width: 100%;
  margin-bottom: 0;
}

.he_phbx img {
  width: 100%;
}




@media screen and (max-width: 768px) {
  .he_phbx {
    width: 160px;
  }

  .he_phbx a {
    padding: 0;
  }

  .he_content {
    font-size: 10px;
  }

  .he_cont1200 {
    padding: 0 20px;
  }

  .buttons a {
    font-size: 12px;
  }
}