@font-face {
  font-family: "Radikal";
  src: url(https://ogdb-cdn.intlgame.cn/front/pc/official/font/Radikal_Medium.f03989..otf) format("opentype");
  font-weight: normal;
  font-display: "auto";
  font-style: normal;
}

@font-face {
  font-family: "Radikal";
  src: url(https://ogdb-cdn.intlgame.cn/front/pc/official/font/Radikal_Light.73d33b..otf) format("opentype");
  font-weight: 300;
  font-display: "auto";
  font-style: normal;
}

@font-face {
  font-family: "Radikal";
  src: url(https://ogdb-cdn.intlgame.cn/front/pc/official/font/Radikal_Light_Italic.3ad648..otf) format("opentype");
  font-weight: 300;
  font-display: "auto";
  font-style: italic;
}

@font-face {
  font-family: "Radikal";
  src: url(https://ogdb-cdn.intlgame.cn/front/pc/official/font/Radikal_Bold_Italic.077fa4..otf) format("opentype");
  font-weight: 700, bold;
  font-display: "auto";
  font-style: italic;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Radikal", system-ui, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC";
  font-weight: 300;
  background: #040116;
  min-width: 90rem;
}

@media screen and (min-width: 1080px) {
  body {
    overflow-x: hidden;
  }
}

button {
  border-width: 0;
}

/* 一级标题 */
.title-h1 {
  text-align: center;
  font-size: 3.75rem;
  font-style: italic;
  font-weight: 700;
  line-height: 6.375rem;
  background: linear-gradient(178.83deg,
      #ffffff 26.62%,
      rgba(236, 236, 236, 0) 135.73%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.0625rem #fff;
  /* animation: 6s gradientTitle ease-in-out infinite; */
}

/* .db-official-header .header-title,
.db-official-header .header-italic,
.db-official-header .header-btn{
  transform: translateY(10px);
  animation: 0.6s transY ease-in-out;
  animation-delay: 0.4s;
} */
.header-titlebox {
  display: flex;
  align-items: center;
  flex-direction: column;
  animation: 0.4s transY ease-in-out;
}

@keyframes transY {
  0% {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientTitle {
  0% {
    background-size: 100%;
  }

  25% {
    background-size: 200%;
  }

  50% {
    background-size: 100%;
  }

  750% {
    background-size: 20%;
  }

  100% {
    background-size: 100%;
  }
}

/* 二级标题样式 */
.title-h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 3.5rem;
  transform: translateY(100%) rotateX(-60deg);
  opacity: 0;
  transform-origin: center top;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: opacity 0s cubic-bezier(.215, .61, .355, 1), transform 0s cubic-bezier(.215, .61, .355, 1);
}

.title-h2.is-inview {
  transform: none;
  opacity: 1;
  transition-duration: .3s;
}

/* 三级标题样式 */
.title-h3 {
  color: #fff;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.30625rem;
}

/* 通用按钮样式 */
.button-style {
  display: flex;
  padding: 0.75rem 1.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  background: #326ff0;
  font-weight: 300;
  font-family: inherit;
  box-sizing: border-box;
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.button-style span{
  padding-top: 1PX;
  z-index: 11;
}

@media screen and (max-width: 1440px) {
  .button-style span{
    padding-top: 2PX;
  }
}

.button-style:after {
  background: #fff;
  content: "";
  height: 12.5rem;
  left: -11.25rem;
  opacity: .4;
  position: absolute;
  top: -5rem;
  transform: rotate(35deg);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  width: 9.375rem;
}

.button-style:hover:after {
  left: 130%;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0.15s;
}

.button-style .gradient-move-deco {
    scale: 1;
    transition: all 0.6s ease-in-out;
    opacity: 0.75;
    position: absolute;
    transform: translateX(-1.875rem) translateY(0.3125rem);
    width: 37.5rem;
    height: 37.5rem;
    background: conic-gradient(from 268deg at 50% 50%, #1760FA 80.05deg, #FF521C 174.62deg, #1760FA 197.05deg,  #3733FF 245.5deg, #3733FF 337.5deg, #1760FA 348.05deg);
    filter: blur(0.875rem) brightness(1.1);
    animation: none;
    background-size: 108% 100%;
}

/* 渐变卡片 */
.gradient-card {
  border: 0.125rem solid transparent;
  border-radius: 0.5rem;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: var(--border-in-black), var(--border-out);
  box-sizing: border-box;
}

/* 版心 */
.type-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90rem;
  margin: auto;
}

.db-official-header {
  height: 65.5625rem;
}

#header {
  display: none;
}

#header, #maincontent {
  /* display: none; */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* transition-delay: 0.1s; */
}

.swiper {
  transform: translateY(1.25rem);
  width: 100%;
  opacity: 0;
}

.swiper.is-inview {
  transform: none;
  opacity: 1;
  transition-duration: .3s;
}

.swiper.show {
  animation-delay: 0.4s;
  opacity: 1;
  transform: none;
}

.swiper-slide {
  transition: all 0.3s ease-in-out;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}