/* Extracted from https://www.starlumenmotor.com/default/static/css/main.css
   Section: .globWrap (Global layout)
   No dedicated JS. Dot pulse is CSS keyframes. */

/* @font-face {
  font-family: "Goldman";
  font-display: swap;
  src: url("assets/fonts/GoldmanRegular.woff2") format("woff2"),
       url("assets/fonts/GoldmanRegular.woff") format("woff");
}

@font-face {
  font-family: "Google Sans4";
  font-display: swap;
  src: url("assets/fonts/GoogleSans-Regular.woff2") format("woff2"),
       url("assets/fonts/GoogleSans-Regular.woff") format("woff");
} */

/* body {
  margin: 0;
  background: #000;
} */

.contSafe {
  width: 1600px;
  margin: 0 auto;
}

.biao50 {
  color: #ffffff;
  font-family: Goldman, Arial, Helvetica, sans-serif;
  font-size: 50px;
  line-height: 64px;
  text-align: center;
  margin: 0;
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes breatheInner {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.globWrap {
  position: relative;
  overflow: hidden;
}

.globWrap .globBc {
  width: 100%;
  display: block;
}

.globWrap .globVideo {
  width: 100%;
  display: block;
}

.globWrap .globBox {
  display: flex;
  align-items: start;
  justify-content: space-between;
  position: relative;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 84px;
}

.globWrap .globLeft {
  width: 36.56%;
  flex-shrink: 0;
  position: relative;
  z-index: 200;
}

.globWrap .biao50 {
  text-align: left;
}

.globWrap .globTxt {
  color: #999999;
  font-family: "Google Sans4", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 32px;
  margin-top: 32px;
}

.globWrap .globRight {
  width: 68%;
  flex-shrink: 0;
  margin-left: -4.56%;
  position: relative;
  margin-top: 45px;
}

.globWrap .globRight img {
  width: 100%;
  display: block;
}

.globWrap .globItem {
  display: flex;
  align-items: center;
  width: max-content;
  position: absolute;
  color: #ffffff;
  font-family: "Google Sans4", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 28px;
}

.globWrap .globItem p {
  margin: 0;
}

.globWrap .globItem span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(125, 85, 233, 0.5);
  position: relative;
  display: block;
  margin-right: 2px;
  animation: breathe 2s infinite ease-in-out;
  flex-shrink: 0;
}

.globWrap .globItem span::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #7d55e9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  animation: breatheInner 2s infinite ease-in-out;
}

.globWrap .point1  { top: 25.3%; left: 14.2%; }
.globWrap .point2  { top: 39.3%; left: 15.6%; }
.globWrap .point3  { top: 34.8%; left: 26.9%; }
.globWrap .point4  { top: 69.8%; left: 27.9%; }
.globWrap .point5  { top: 27.3%; left: 50.2%; font-size: 16px; }
.globWrap .point6  { top: 55.6%; left: 52%; }
.globWrap .point7  { top: 24.8%; left: 59.4%; }
.globWrap .point8  { top: 46%;   left: 59.1%; }
.globWrap .point9  { top: 38.7%; left: 80.1%; }
.globWrap .point10 { top: 42%;   left: 76%; }
.globWrap .point11 { top: 46%;   left: 79.8%; }
.globWrap .point12 { top: 53.1%; left: 76.5%; }
.globWrap .point13 { top: 75.9%; left: 92.1%; font-size: 16px; }

/* Commented out on the source site. No matching DOM nodes.
.globWrap .point14 { top: 35.7%; left: 79.1%; }
.globWrap .point15 { top: 39.3%; left: 80.4%; }
.globWrap .point16 { top: 43%;   left: 77.8%; }
.globWrap .point17 { top: 46.1%; left: 79.5%; }
.globWrap .point18 { top: 50.9%; left: 76.6%; }
*/

@media (max-width: 1700px) {
  .contSafe { width: calc(100% - 160px); }
  .biao50 { font-size: 40px; line-height: 1.2 !important; }
}

@media (max-width: 1280px) {
  .biao50 { font-size: 34px; }
  .globWrap .globBox { padding-top: 50px; }
}

@media (max-width: 1000px) {
  .contSafe { width: calc(100% - 60px); }
  .biao50 { font-size: 26px; }
  .globWrap {
    background-color: #121212;
    padding-bottom: 50px;
  }
  .globWrap .globBox {
    flex-direction: column;
    padding-top: 30px;
    position: unset;
    transform: unset;
  }
  .globWrap .globVideo { display: none; }
  .globWrap .globLeft { width: 100%; }
  .globWrap .biao50 { text-align: center; }
  .globWrap .globTxt {
    text-align: center;
    margin-top: 10px;
  }
  .globWrap .globRight {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .contSafe { width: calc(100% - 30px); }
  .biao50 { font-size: 22px; }
}