/* No CSS */
body,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
}

p:focus,
span:focus,
a:focus,
div:focus {
  outline: none;
}

ol,
ul,
input,
button {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

body,
input,
textarea,
button {
  font-family: "microsoft yahei", -apple-system, "PingFang SC", "simsun", Arial,
 sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-default);
  -webkit-font-smoothing: antialiased;
}

body {
  word-wrap: break-word;
  overflow-x: hidden;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:focus {
  outline: 0;
}

button {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

h4,
h5,
h6,
p {
  font-size: inherit;
}

sup,
sub {
  font-size: 11px;
}

small {
  font-size: 11px;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

i {
  font-style: normal;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 28px;
  height: 55px;
  background: rgba(37, 38, 40, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: 2;
}

.header a {
  color: #fff;
}

.header .xl-logo {
  display: block;
  width: 82px;
  height: 27px;
  background: url(../images/4b2d3f69da903857b0c636e1da230141.png) no-repeat;
  background-size: 100% auto;
}

.header .header-nav a {
  margin-left: 20px; 
  font-size: 13px;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.header .header-nav a:hover {
  opacity: 0.8;
}

.header .header-nav a.item-btn {
  display: none;
  width: 95px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background: #3f85ff;
  border-radius: 4px;
}

.header.is-white {
  background: rgba(255, 255, 255, 0.3);
}

.header.is-white a {
  color: #000;
}

.header.is-white .xl-logo {
  background-image: url(../images/833fca6da7ffa5141a51284ac1b00500.png);
}

.header.is-white a.item-btn {
  display: inline-block;
}

:root:before {
  content: "author:ningwenjing;design:huangshun;update:2020-09-02;";
  display: none;
}


.page .content-pc {
  position: relative;
  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;
  position: relative;
  width: 1280px;
  margin: 0 auto;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page .title-page {
  font-size: 66px;
  line-height: 1.2;
  font-weight: bold;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.page .txt-page {
  margin-top: 10px;
  font-size: 22px;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.page1 {
  height: 100vh;
  color: #fff;
  background-image: url(../images/32b236c05e9eff0bbabb29fa840361c0.jpg);
  background-color: #030e25;
  background-size: 1920px auto;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page1 h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 96px;
  font-weight: normal;
  line-height: 100px;
  letter-spacing: 5px;
  -webkit-animation: titleDown 0.5s 1s both;
          animation: titleDown 0.5s 1s both;
}

.page1 h2 .xl-text {
  position: relative;
  top: 2px;
  font-size: 120px;
  font-family: din;
}

@-webkit-keyframes titleDown {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes titleDown {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.page1 .page1-txt {
  position: relative;
  top: -62px;
  margin-right: 16px;
  z-index: 1;
  color: #fff;
}

.page1 .txt-detail {
  margin-top: 10px;
  font-size: 36px;
  -webkit-animation: titleDown 0.5s 1.1s both;
          animation: titleDown 0.5s 1.1s both;
}

.page1 .content-pc {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.page1 .link-down {
  margin-top: 12px;
  width: 287px;
  font-size: 15px;
  text-align: center;
  -webkit-animation: titleDown 0.5s 1.3s both;
          animation: titleDown 0.5s 1.3s both;
}

.page1 .link-down a {
  color: #fff;
}

.page1 .button-down {
  -webkit-animation: titleDown 0.5s 1.3s both;
          animation: titleDown 0.5s 1.3s both;
}

.button-down {
  display: block;
  margin-top: 25px;
  width: 287px;
  height: 76px;
  line-height: 76px;
  text-align: center;
  font-size: 34px;
  color: #fff;
  background: #3f85ff;
  border-radius: 4px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.button-down:hover {
  background: #226ef2;
}

.client {
  position: absolute;
  left: -6px;
  top: 50%;
  margin-top: -310px; 
}

.interface {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 805px;
  background: url(../images/tu1.png) no-repeat;
  background-size: 100% auto;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: interface 0.5s 0.5s both, fadeIn 0.3s 0.5s both;
          animation: interface 0.5s 0.5s both, fadeIn 0.3s 0.5s both;
}

@-webkit-keyframes interface {
  0% {
    -webkit-transform: translate3d(-44px, -122px, 0) scale(0.8);
            transform: translate3d(-44px, -122px, 0) scale(0.8);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes interface {
  0% {
    -webkit-transform: translate3d(-44px, -122px, 0) scale(0.8);
            transform: translate3d(-44px, -122px, 0) scale(0.8);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
  }
}

.shadow {
  position: absolute;
  left: -13px;
  top: 483px;
  width: 1330px;
  height: 263px;
  background: url(../images/00ec0d1f364574d04c9adc6773962ed7.png) no-repeat;
  background-size: 100% auto;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: interface 0.5s 0.5s both, fadeIn 0.3s 0.5s both;
          animation: interface 0.5s 0.5s both, fadeIn 0.3s 0.5s both;
}

.cloud {
  position: absolute;
  left: 700px;
  top: 390px;
  width: 292px;
  height: 425px;
  background: url(../images/15d670b00b1e555602d209ed2a734085.png) no-repeat;
  background-size: 100% auto;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-animation: cloud 0.5s 0.3s both, fadeIn 0.3s 0.3s both;
          animation: cloud 0.5s 0.3s both, fadeIn 0.3s 0.3s both;
}

@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translate3d(-70px, -80px, 0) scale(0.8);
            transform: translate3d(-70px, -80px, 0) scale(0.8);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes cloud {
  0% {
    -webkit-transform: translate3d(-70px, -80px, 0) scale(0.8);
            transform: translate3d(-70px, -80px, 0) scale(0.8);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
  }
}

[class^="spr-light-"],
[class*=" spr-light-"] {
  position: absolute;
  top: 50%;
  left: 700px;
  background: url(../images/79546dd5290bb76ce1ef0907ac8c6535.png) no-repeat;
  background-size: 555px auto;
}

.spr-light-1 {
  margin-top: 113px;
  left: 672px;
  width: 236px;
  height: 69px;
  background-position: -252px -209px;
  -webkit-animation: light1 3s 2s both infinite;
          animation: light1 3s 2s both infinite;
}

@-webkit-keyframes light1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -150px, 0);
            transform: translate3d(-750px, -150px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(200px, 50px, 0);
            transform: translate3d(200px, 50px, 0);
  }
}

@keyframes light1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -150px, 0);
            transform: translate3d(-750px, -150px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(200px, 50px, 0);
            transform: translate3d(200px, 50px, 0);
  }
}

.spr-light-2 {
  left: 854px;
  margin-top: 110px;
  width: 237px;
  height: 69px;
  background-position: -5px -209px;
  -webkit-animation: light2 3s 1.3s both infinite;
          animation: light2 3s 1.3s both infinite;
}

@-webkit-keyframes light2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -150px, 0);
            transform: translate3d(-750px, -150px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(200px, 50px, 0);
            transform: translate3d(200px, 50px, 0);
  }
}

@keyframes light2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -150px, 0);
            transform: translate3d(-750px, -150px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(200px, 50px, 0);
            transform: translate3d(200px, 50px, 0);
  }
}

.spr-light-3 {
  margin-top: -5px;
  left: 1118px;
  width: 382px;
  height: 43px;
  background-position: -5px -156px;
  -webkit-animation: light3 3s 1.7s both infinite;
          animation: light3 3s 1.7s both infinite;
}

@-webkit-keyframes light3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -100px, 0);
            transform: translate3d(-750px, -100px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes light3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -100px, 0);
            transform: translate3d(-750px, -100px, 0);
  }
  25% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.spr-light-4 {
  margin-top: 176px;
  left: 1050px;
  width: 545px;
  height: 141px;
  background-position: -5px -5px;
  -webkit-animation: light4 3s 1s both infinite;
          animation: light4 3s 1s both infinite;
}

@-webkit-keyframes light4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -200px, 0);
            transform: translate3d(-750px, -200px, 0);
  }
  25% {
    opacity: .2;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes light4 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-750px, -200px, 0);
            transform: translate3d(-750px, -200px, 0);
  }
  25% {
    opacity: .2;
  }
  50%, 100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.silk {
  position: absolute;
  top: 50%;
  margin-top: 38px;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  height: 462px;
  background: url(../images/93d53c77f210f63e08cd10337512ab5f.png) no-repeat;
  background-size: 1920px auto;
}

.point1 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.page3 {
  position: relative;
  height: 100vh;
  background: url(../images/79016db73a08c0dedd061f85cd5fbf09.jpg);
  background-size: cover;
  background-position: center center;
}

.page3 .content-pc {
  padding-top: 440px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  opacity: 0;
}

.page4 {
  height: 1000px;
  background: url(../images/a893d321e69c02ccb647c505a1cbc2c3.jpg);
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.page4 .content-pc {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #fff;
}

[class^="spr4-"],
[class*=" spr4-"] {
  position: absolute;
}

.is-ani .spr4-point {
  right: -12px;
  top: 263px;
  width: 245px;
  height: 50px;
  background: url(../images/029e60fd067f0b7264d8d48b45515e3a.png) no-repeat;
  background-size: 100% auto;
  -webkit-animation: fadeIn 0.5s 1s both;
          animation: fadeIn 0.5s 1s both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.is-ani .spr4-form {
  left: 468px;
  top: 97px;
  width: 1130px;
  height: 780px;
  background: url(../images/681788c5ac34b965739df65a243b46ad.png) no-repeat;
  background-size: 100% auto;
}

.is-ani .spr4-gradient {
  left: 490px;
  top: 290px;
  width: 778px;
  height: 588px;
  background: url(../images/c01a99c35744dcc79357a8393d924b58.png) no-repeat;
  background-size: 778px auto;
  -webkit-animation: gradient 0.5s 0.5s both;
          animation: gradient 0.5s 0.5s both;
}

@-webkit-keyframes gradient {
  0% {
    width: 0;
  }
  100% {
    width: 778px;
  }
}

@keyframes gradient {
  0% {
    width: 0;
  }
  100% {
    width: 778px;
  }
}

.is-ani .spr4-rocket {
  top: 290px;
  right: 5px;
  -webkit-animation: rocket 0.3s 1s both;
          animation: rocket 0.3s 1s both;
}

.is-ani .spr4-rocket i {
  display: block;
  width: 573px;
  height: 595px;
  background: url(../images/166d1dd49d1fd51eb674313670fc1267.png) no-repeat;
  background-size: 100% auto;
  -webkit-animation: rocketMove 1s both linear infinite alternate;
          animation: rocketMove 1s both linear infinite alternate;
}

@-webkit-keyframes rocketMove {
  0% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
  100% {
    -webkit-transform: translate3d(-10px, 10px, 0);
            transform: translate3d(-10px, 10px, 0);
  }
}

@keyframes rocketMove {
  0% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
  100% {
    -webkit-transform: translate3d(-10px, 10px, 0);
            transform: translate3d(-10px, 10px, 0);
  }
}

@-webkit-keyframes rocket {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-588px, 658px, 0);
            transform: translate3d(-588px, 658px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes rocket {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-588px, 658px, 0);
            transform: translate3d(-588px, 658px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.text-speed {
  position: absolute;
  top: 192px;
  right: 260px;
  color: #0072ff;
  font-size: 140px;
  font-family: din;
}

.page5 {
  position: relative;
  height: 1300px;
  background: url(../images/1cf2bb3c84cfe259c5da63bb408e63a4.jpg) no-repeat #000;
  color: #fff;
  background-size: 2545px auto;
  background-position: left top;
  overflow: hidden;
}

.page5 .context-pc-text {
  position: absolute;
  right: 0;
  top: 50%;
  padding: 0;
  margin-top: -100px;
  width: 380px;
  display: inline-block;
}

.page5 h2 {
  margin-top: -80px;
}

.page5 .page5-ele {
  position: absolute;
  top: 0;
  width: 1920px;
  left: 0;
}

.page5 .button-down {
  position: absolute;
  top: 1000px;
  left: 50%;
  margin-left: -144px;
}

[class^="spr5-"],
[class*=" spr5-"] {
  position: absolute;
  background: url(../images/62a5f1079f4f8eb90d7644878afa6526.png) no-repeat;
  background-size: 641px auto;
}

.spr5-rect6 {
  left: 156px;
  top: 493px;
  width: 224px;
  height: 390px;
}

.spr5-rect1 {
  top: 196px;
  left: 423px;
  width: 104px;
  height: 84px;
  background-position: -348px -420px;
  -webkit-animation: rect5 1s both alternate infinite linear;
          animation: rect5 1s both alternate infinite linear;
}

@-webkit-keyframes rect5 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
}

@keyframes rect5 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }
}

.spr5-rect2 {
  left: 905px;
  top: 397px;
  width: 68px;
  height: 55px;
  background-position: -256px -331px;
  -webkit-animation: rect2 1.2s 0.3s both alternate infinite linear;
          animation: rect2 1.2s 0.3s both alternate infinite linear;
}

@-webkit-keyframes rect2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
}

@keyframes rect2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
}

.spr5-rect3 {
  left: 917px;
  top: 539px;
  width: 129px;
  height: 183px;
  background-position: -450px -170px;
}

.spr5-rect4 {
  left: 752px;
  top: 171px;
  width: 182px;
  height: 140px;
  background-position: -450px -10px;
}

.spr5-4K {
  left: 871px;
  top: 441px;
  width: 142px;
  height: 142px;
  background-position: -10px -420px;
  -webkit-animation: rect5 1s 0.3s both alternate infinite linear;
          animation: rect5 1s 0.3s both alternate infinite linear;
}

.spr5-1080 {
  top: 135px;
  left: 546px;
  width: 156px;
  height: 103px;
  background-position: -172px -420px;
}

.spr5-hd {
  top: 655px;
  left: 269px;
  width: 173px;
  height: 301px;
  background-position: -257px -10px;
}

[class^="line-"],
[class*=" line-"] {
  position: absolute;
  background: url(../images/cadb149351dff81e17131ba96ee0b01f.png) no-repeat;
  background-size: 476px auto;
}

.line-1 {
  top: 743px;
  left: 400px;
  width: 255px;
  height: 122px;
  background-position: -10px -10px;
  -webkit-animation: line1 3s .5s linear both infinite;
          animation: line1 3s .5s linear both infinite;
}

@-webkit-keyframes line1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(550px, 221px, 0);
            transform: translate3d(550px, 221px, 0);
  }
}

@keyframes line1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(550px, 221px, 0);
            transform: translate3d(550px, 221px, 0);
  }
}

.line-2 {
  top: 697px;
  left: 548px;
  width: 142px;
  height: 80px;
  background-position: -285px -10px;
  -webkit-animation: line2 2.5s 1s linear both infinite;
          animation: line2 2.5s 1s linear both infinite;
}

@-webkit-keyframes line2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(625px, 224px, 0);
            transform: translate3d(625px, 224px, 0);
  }
}

@keyframes line2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(625px, 224px, 0);
            transform: translate3d(625px, 224px, 0);
  }
}

.line-3 {
  top: 700px;
  left: 946px;
  width: 174px;
  height: 77px;
  background-position: -10px -175px;
  -webkit-animation: line3 2.2s 1.5s linear both infinite;
          animation: line3 2.2s 1.5s linear both infinite;
}

@-webkit-keyframes line3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(467px, 161px, 0);
            transform: translate3d(467px, 161px, 0);
  }
}

@keyframes line3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  25% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
    -webkit-transform: translate3d(467px, 161px, 0);
            transform: translate3d(467px, 161px, 0);
  }
}

.page2 {
  position: relative;
  height: 1000px;
  background: #eff2f5;
  background-size: auto 100%;
  background-position: center center;
}

.sline1-1 {
  width: 3840px;
  height: 2000px;
  background-position: -10px -10px;
}

.sline1-3 {
  width: 3840px;
  height: 2000px;
  background-position: -10px -2030px;
}

.sline1-4 {
  width: 3840px;
  height: 2000px;
  background-position: -10px -4050px;
}

.sline1-2 {
  width: 3840px;
  height: 2000px;
  background-position: -10px -6070px;
}

[class^="spr2-"],
[class*=" spr2-"] {
  position: absolute;
  background: url(../images/1e9424eb14d3b3aac4abdaa7d34a450d.png) no-repeat;
  background-size: 1250px auto;
}

.page2-ele {
  position: absolute;
  top: 50%;
  margin-top: -310px;
  width: 100%;
}

.is-ani .spr2-rect3 {
  top: 94px;
  right: 178px;
  width: 81px;
  height: 81px;
  background-position: -236px -617px;
  -webkit-animation: bounceIn 0.5s 0.9s both;
          animation: bounceIn 0.5s 0.9s both;
}

.is-ani .spr2-rect1 {
  top: 307px;
  right: 50px;
  width: 124px;
  height: 118px;
  background-position: -5px -617px;
  -webkit-animation: bounceIn 0.5s 1.2s both;
          animation: bounceIn 0.5s 1.2s both;
}

.is-ani .spr2-rect4 {
  top: 173px;
  right: 18px;
  width: 90px;
  height: 89px;
  background-position: -138px -617px;
  -webkit-animation: bounceIn 0.5s 1s both;
          animation: bounceIn 0.5s 1s both;
}

.is-ani .spr2-rect2 {
  top: 340px;
  right: 643px;
  width: 118px;
  height: 139px;
  background-position: -5px -745px;
  -webkit-animation: bounceIn 0.5s 1.4s both;
          animation: bounceIn 0.5s 1.4s both;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.spr2-background {
  top: 0;
  right: -182px;
  width: 1237px;
  height: 602px;
  background-position: -5px -5px;
}

@-webkit-keyframes computerDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes computerDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.footer {
  position: absolute;
  left: 0;
  bottom: 35px;
  width: 100%;
  text-align: center;
  color: #2d508f;
  font-size: 20px;
}

@media only screen and (max-height: 700px) {
  .wrap {
    width: 750px;
    margin: 0 auto;
  }
  .page1 h1 {
    top: 20px;
  }
  .page .title-page {
    font-size: 60px;
  }
  .page .txt-page {
    font-size: 20px;
  }
}