* {
  padding: 0px;
  margin: 0px;
}
body {
  font-size: 14px;
  color: #555;
  font-family: "Microsoft YaHei", Arial, Tahoma, sans-serif;
}
body,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
i,
b,
em,
span,
form,
fieldset,
legend,
input,
textarea,
select,
button,
th,
td {
  margin: 0;
  padding: 0;
  font-style: normal;
}
li {
  list-style: none;
}
.footer {
  width: 100%;
  height: 300px;
  padding: 50px 0;
  background-color: #0e131d;
  color: #aaa;
  font-size: 14px;
}
.footer h3 {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  color: #fff;
  margin-bottom: 10px;
}
.footer .tel {
  margin-bottom: 10px;
  font-size: 18px;
  color: #fff;
  line-height: 26px;
}
.footer .tel strong {
  font-size: 28px;
  line-height: 38px;
  font-weight: bold;
  color: #f88407;
  display: block;
  margin-top: 5px;
}
.footer .ft_lx {
  margin-bottom: 15px;
  line-height: 26px;
}
.footer .ft_dh ul {
  margin: 0 -25px;
}
.footer .ft_dh ul li {
  float: left;
  padding: 0 25px;
}
.footer .ft_dh ul li a {
  line-height: 32px;
  color: #aaa;
}
.footer .ft_dh ul li a:hover {
  color: #ddd;
}
.footer .ewm img {
  max-width: 110px;
  height: auto;
  display: block;
}
.footer .ewm p {
  font-size: 12px;
  margin-top: 8px;
}
.banquan {
  position: relative;
  width: 100vw;
  top: 0;
  left: calc(-1 * (100vw - 1280px) / 2);
  right: calc(-1 * (100vw - 1280px) / 2);
  padding: 25px 0;
  background-color: #03050b;
  text-align: center;
  line-height: 26px;
  color: #aaa;
}
.banquan-box {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1280px;
}
.banquan a {
  color: #aaa;
}
.banquan span {
  padding: 0 6px;
}

@media only screen and (max-width: 1280px) {
  .banquan {
    left: 0;
    right: 0;
  }
  .banquan-box {
    width: 100%;
  }
  .footer {
    padding: 35px 0;
  }
  .container {
    max-width: 540px !important;
  }
  .col-md-5 {
    flex: initial !important;
    max-width: 100% !important;
  }
  .footer .col-md-7 {
    display: none;
  }
  .footer h3 {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 6px;
  }
  .footer .tel {
    margin-bottom: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 28px;
  }
  .footer .tel strong {
    font-size: 22px;
    line-height: 32px;
  }
  .footer .ft_lx {
    text-align: center;
  }
  .footer .ft_dh ul {
    margin: 0 -15px;
  }
  .footer .ft_dh ul li {
    padding: 0 15px;
    text-align: center;
  }
  .footer .ft_dh ul li a {
    line-height: 28px;
  }
  .footer .ewm {
    text-align: center;
  }
  .footer .ewm img {
    margin: 0 auto;
  }
  .footer .ewm p {
    font-size: 14px;
    margin-top: 12px;
  }
  .box-page-pc {
    display: none;
  }
  .box-page-mobile {
    display: block;
  }
}

@media only screen and (max-width: 640px) {
  .banquan {
    padding: 15px 0;
    line-height: 26px;
  }
  .banquan span {
    display: block;
    padding: 0;
  }
}

.nav {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 180px;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
}
.nav-center {
  position: absolute;
  z-index: 1;
  max-width: 1280px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.nav-logo {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 0;
  width: 272px;
  height: 79px;
  transform: scale(0.75);
}
.nav-txt {
  position: absolute;
  z-index: 1;
  top: 64px;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
  font-weight: 100;
}
.nav-txt:hover {
  text-decoration: none;
  color: #fff;
}
.nav-txt:focus {
  text-decoration: none;
  color: #fff;
}
.nav-txt:disabled {
  text-decoration: none;
  color: #fff;
}
.nav-txt-1 {
  right: 600px;
}
.nav-txt-2 {
  right: 450px;
}
.nav-txt-3 {
  right: 300px;
}
.nav-txt-4 {
  right: 150px;
}
.nav-txt-5 {
  right: 0;
}
.dot {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 40px;
  bottom: 0;
  margin: auto 0;
  width: 10px;
  height: 175px;
}
.dot-item {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 10px;
}
.dot-item.on {
  background-color: #fff;
  border: 1px solid transparent;
}

.m-nav {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0.1rem;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0)
  );
}

.m-nav-logo {
  position: absolute;
  z-index: 1;
  top: 0.03rem;
  left: 0.026rem;
  width: 0.213rem;
  height: 0.044rem;
}
.m-nav-menu {
  position: absolute;
  z-index: 1;
  top: 0.036rem;
  right: 0.034rem;
  width: 0.033rem;
  height: 0.028rem;
  cursor: pointer;
}
.m-menu {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  padding: 0.14rem 0.078rem 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}
.m-menu.on {
  left: 0;
}
.m-menu-line {
  position: relative;
  z-index: 1;
  display: block;
  width: 0.594rem;
  height: 0.095rem;
  line-height: 0.095rem;
  font-size: 0.026rem;
  color: #fff !important;
  text-align: center;
  border-bottom: 1px solid #fff;
  cursor: pointer;
}
.m-menu-line:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #1a1a1a;
}
.m-menu-line:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
}

* {
  user-select: none;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  background-color: #0e131d;
}
.main {
  position: absolute;
  z-index: 1;
  max-width: 1280px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  transition: all 1s ease-in-out 0s;
}
.main.page-1 {
  transform: translateY(0);
}
.main.page-2 {
  transform: translateY(-100%);
}
.main.page-3 {
  transform: translateY(-200%);
}
.main.page-4 {
  transform: translateY(-300%);
}
.main.page-5 {
  transform: translateY(-400%);
}
.main.page-6 {
  transform: translateY(-500%);
}
.main.page-7 {
  transform: translateY(calc(-500% - 376px));
}
.box-page-7 {
  height: 376px !important;
}

.box-page {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.box-page-img {
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.box-page-txt {
  display: none;
  position: absolute;
  z-index: 1;
  transform: translateY(0);
}
.box-page-1 .txt-1,
.box-page-1 .txt-2,
.box-page-1 .txt-3 {
  /* display: block; */
  position: fixed;
  z-index: 1;
  left: 100%;
  width: 1.27rem;
  height: 0.054rem;
  opacity: 1;
}
.box-page-1 .txt-1 {
  top: 46%;
  left: -10%;
}
.box-page-1 .txt-2 {
  top: 55%;
  left: 50%;
}
.box-page-1 .txt-3 {
  top: 64%;
  left: -5%;
}
.page-1-1-animate {
  animation: page11txtanimate 6s infinite linear;
}
.page-1-2-animate {
  animation: page12txtanimate 15s infinite linear;
}
.page-1-3-animate {
  animation: page13txtanimate 12s infinite linear;
}
.page-txt-animate {
  animation: pagetxtupshow 0.5s forwards ease-in-out;
}
@keyframes page11txtanimate {
  0% {
    left: -10%;
  }
  47% {
    opacity: 1;
    left: -100%;
  }
  48% {
    opacity: 0;
  }
  51% {
    opacity: 0;
    left: 100%;
  }
  53% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -10%;
  }
}
@keyframes page12txtanimate {
  0% {
    left: 50%;
  }
  47% {
    opacity: 1;
    left: 100%;
  }
  48% {
    opacity: 0;
    left: 100%;
  }
  51% {
    opacity: 0;
    left: -100%;
  }
  53% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: 50%;
  }
}
@keyframes page13txtanimate {
  0% {
    left: -5%;
  }
  27% {
    opacity: 1;
    left: -100%;
  }
  28% {
    opacity: 0;
    left: -100%;
  }
  31% {
    opacity: 0;
    left: 100%;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    left: -5%;
  }
}
@keyframes pagetxtupshow {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.box-page-txt-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  width: 100px;
  height: 250px;
}
.box-page-txt-box .box-page-txt {
  position: relative;
}
.box-page-txt-box .txt-2 {
  margin-top: 64px;
}
/* .box-page-2 .txt-1 {
        top: 41.6%;
      }
      .box-page-2 .txt-2 {
        top: 55%;
      }
      .box-page-3 .txt-1 {
        top: 41.6%;
      }
      .box-page-3 .txt-2 {
        top: 55%;
      }
      .box-page-4 .txt-1 {
        top: 41.6%;
      }
      .box-page-4 .txt-2 {
        top: 55%;
      }
      .box-page-5 .txt-1 {
        top: 41.6%;
      }
      .box-page-5 .txt-2 {
        top: 55%;
      }
      .box-page-6 .txt-1 {
        top: 41.6%;
      }
      .box-page-6 .txt-2 {
        top: 55%;
      } */
.box-page-pc,
.box-page-mobile {
  width: 100%;
  height: 100%;
}
.box-page-pc {
  display: block;
}
.box-page-mobile {
  display: none;
}
@media only screen and (max-width: 1280px) {
  .box-page-pc {
    display: none;
  }
  .box-page-mobile {
    display: block;
  }
}

.box-page-mobile-img {
  /* width: 100%; */
  aspect-ratio: 0.625;
}
/** M **/
.box-page-1 .box-page-mobile {
  background-image: url("./img/m-bg1_2.png");
  background-size: cover;
}
.box-page-2 .box-page-mobile {
  background-image: url("./img/m-bg2_2.png");
  background-size: cover;
}
.box-page-3 .box-page-mobile {
  background-image: url("./img/m-bg3.png");
  background-size: cover;
}
.box-page-4 .box-page-mobile {
  background-image: url("./img/m-bg4.png");
  background-size: cover;
}
.box-page-5 .box-page-mobile {
  background-image: url("./img/m-bg5.png");
  background-size: cover;
}
.box-page-6 .box-page-mobile {
  background-image: url("./img/m-bg6_2.png");
  background-size: cover;
}

.box-page-mobile-txt {
  display: none;
  position: absolute;
  z-index: 1;
}

.box-page-1 .m-txt-1 {
  top: 0.6rem;
  left: 0.1rem;
  width: 0.452rem;
  height: 0.05rem;
}
.box-page-1 .m-txt-2,
.box-page-1 .m-txt-3,
.box-page-1 .m-txt-4 {
  width: 1.954rem;
  height: 0.082rem;
}
.box-page-1 .m-txt-2 {
  top: 0.675rem;
  left: -32%;
}
.box-page-1 .m-txt-3 {
  top: 0.77rem;
  left: 40%;
}
.box-page-1 .m-txt-4 {
  top: 0.87rem;
  left: -93%;
}
.m-page-1-0-animate {
  animation: mpage10txtanimate 20s infinite ease;
}
.m-page-1-1-animate {
  animation: mpage11txtanimate 7s infinite linear;
}
.m-page-1-2-animate {
  animation: mpage12txtanimate 30s infinite linear;
}
.m-page-1-3-animate {
  animation: mpage13txtanimate 40s infinite linear;
}
.m-page-txt-animate {
  animation: mpagetxtupshow 0.5s forwards ease-in-out;
}
@keyframes mpage10txtanimate {
  0% {
    left: 0.1rem;
  }
  42% {
    opacity: 1;
    left: -1rem;
  }
  43% {
    opacity: 0;
    left: -1rem;
  }
  46% {
    opacity: 0;
    left: 1rem;
  }
  48% {
    opacity: 1;
    left: 1rem;
  }
  100% {
    opacity: 1;
    left: 0.1rem;
  }
}
@keyframes mpage11txtanimate {
  0% {
    left: -32%;
  }
  42% {
    opacity: 1;
    left: -260%;
  }
  43% {
    opacity: 0;
    left: -260%;
  }
  46% {
    opacity: 0;
    left: 260%;
  }
  48% {
    opacity: 1;
    left: 160%;
  }
  100% {
    opacity: 1;
    left: -32%;
  }
}
@keyframes mpage12txtanimate {
  0% {
    left: 40%;
  }
  47% {
    opacity: 1;
    left: 200%;
  }
  48% {
    opacity: 0;
    left: 200%;
  }
  51% {
    opacity: 0;
    left: -260%;
  }
  53% {
    opacity: 1;
    left: -260%;
  }
  100% {
    opacity: 1;
    left: 40%;
  }
}
@keyframes mpage13txtanimate {
  0% {
    left: -93%;
  }
  27% {
    opacity: 1;
    left: -160%;
  }
  28% {
    opacity: 0;
    left: -160%;
  }
  31% {
    opacity: 0;
    left: 260%;
  }
  33% {
    opacity: 1;
    left: 160%;
  }
  100% {
    opacity: 1;
    left: -93%;
  }
}
@keyframes mpagetxtupshow {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.box-page-2 .m-txt-1 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0.412rem;
  height: 0.755rem;
  margin: auto;
}
.box-page-3 .m-txt-1 {
  top: 0.82rem;
  left: 0;
  right: 0;
  width: 0.7rem;
  height: 0.155rem;
  margin: 0 auto;
}
.box-page-4 .m-txt-1 {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0.591rem;
  height: 0.812rem;
  margin: auto;
}
.box-page-6 .m-txt-1 {
  top: 0.57rem;
  left: 0;
  right: 0;
  width: 0.366rem;
  height: 0.241rem;
  margin: 0 auto;
}