@charset "UTF-8";

/*清除外边距*/
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0
}

/*清除内边距*/
menu,
ol,
ul {
  padding: 0
}

/*重置列表元素*/
ol,
ul {
  list-style: none
}

/*将字体扶正*/
address,
cite,
dfn,
em,
var {
  font-style: normal
}

/*清下划线*/
a {
  text-decoration: none;
  color: #000
}

/*鼠标略过a标签，显示下划线*/
a:hover {
  /*text-decoration: underline;*/
}

/*清浮动*/
.clear:after {
  content: "";
  display: block;
  clear: both
}

body {
  font-family: PingFang, Roboto, Helvetica, Microsoft YaHei, Arial, sans-serif;
  -webkit-text-size-adjust: 100%
}

@font-face {
  font-family: "IRANSansWeb";
  src: url("../fonts/AvenirNext.eot"); /* IE9 Compat Modes */
  src: url("../fonts/AvenirNext.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/AvenirNext.otf") format("opentype"), /* Open Type Font */
    url("../fonts/AvenirNext.svg") format("svg"), /* Legacy iOS */
    url("../fonts/AvenirNext.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/AvenirNext.woff") format("woff"), /* Modern Browsers */
    url("../fonts/AvenirNext.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@charset "UTF-8";



.totalfooter {
  width: auto;
  margin: 0 auto;
  background-color: #f4f9ff;
}

.totalfooter .footer {
  width: 200px;
  margin: 0 auto;
  line-height: 40px;
  color: #999;
  font-size: 14px;
  font-family: IRANSansWeb;
}

/*清除外边距*/
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0
}

/*清除内边距*/
menu,
ol,
ul {
  padding: 0
}

/*重置列表元素*/
ol,
ul {
  list-style: none
}

/*将字体扶正*/
address,
cite,
dfn,
em,
var {
  font-style: normal
}

/*清下划线*/
a {
  text-decoration: none;
  color: #000
}

/*鼠标略过a标签，显示下划线*/
a:hover {
  /*text-decoration: underline;*/
}

/*清浮动*/
.clear:after {
  content: "";
  display: block;
  clear: both
}

body {
  font-family: PingFang, Roboto, Helvetica, Microsoft YaHei, Arial, sans-serif;
  -webkit-text-size-adjust: 100%
}

@media screen and (max-width:1199px) {
  body {
    overflow-x: auto !important
  }

  #pictureShadow,
  .blackLeftShadow,
  .blackRightShadow,
  .blueShadow,
  footer {
    width: 1199px
  }

  .wrapper,
  .wrapper .view {
    width: 1199px;
    margin: 0 auto
  }

  .wrapper .setBtn {
    position: absolute;
    top: 53%
  }

  .wrapper .bottomPic {
    top: 29%
  }

  .wrapper .lineBtn {
    height: 19%;
    top: 35.5%
  }

  .wrapper .wraplast {
    top: 22%;
    width: 31%;
    height: 360px
  }

  .firstModule .view .effect,
  .thirdModule .view .effect {
    left: 0 !important
  }

  .fifthModule .view .effect {
    left: 2% !important
  }

  .fourthModule .view .words,
  .secondModule .view .words {
    left: 0 !important
  }

  .sixthModule .view .words {
    left: 5% !important
  }

  .view .words {
    top: 7%
  }

  .view .words .title {
    font-size: 36px !important;
    line-height: 40px !important
  }

  .view .words .desc {
    font-size: 22px !important;
    line-height: 26px !important
  }
}

@media screen and (min-width:1200px) and (max-width:1439px) {

  #pictureShadow,
  .blackLeftShadow,
  .blackRightShadow,
  .blueShadow,
  .wrapper,
  footer {
    width: 100%
  }

  .wrapper {
    height: 453px;
    margin: 0 auto
  }

  .wrapper .view {
    width: 1200px;
    margin: 0 auto
  }

  .wrapper .setBtn {
    position: absolute;
    top: 53%
  }

  .wrapper .bottomPic {
    top: 29%
  }

  .wrapper .lineBtn {
    top: 35%;
    height: 19%
  }

  .wrapper .wraplast {
    top: 22%;
    width: 31%;
    height: 360px
  }

  .firstModule .view .effect,
  .thirdModule .view .effect {
    left: 0 !important
  }

  .fifthModule .view .effect {
    left: 2% !important
  }

  .fourthModule .view .words,
  .secondModule .view .words {
    left: 0 !important
  }

  .sixthModule .view .words {
    left: 5% !important
  }

  .view .words {
    top: 7%
  }

  .view .words .title {
    font-size: 36px !important;
    line-height: 40px !important
  }

  .view .words .desc {
    font-size: 22px !important;
    line-height: 26px !important
  }
}

@media screen and (min-width:1440px) and (max-width:1920px) {
  .navlast {
    left: 19.5% !important
  }

  #pictureShadow,
  .blackLeftShadow,
  .blackRightShadow,
  .blueShadow,
  .wrapper,
  footer {
    width: 100%
  }

  .wrapper {
    height: 610px;
    margin: 0 auto
  }

  .wrapper .view {
    width: 1440px;
    margin: 0 auto
  }

  .wrapper .setBtn {
    position: absolute;
    top: 57%
  }

  .wrapper .bottomPic {
    top: 31%
  }

  .wrapper .lineBtn {
    height: 19%;
    top: 40%
  }

  .wrapper .wraplast {
    top: 20%;
    width: 31%;
    height: 410px;
    left: 26.5%
  }
}

@media screen and (min-width:1921px) {
  .navlast {
    left: 19.5% !important
  }

  #pictureShadow,
  .blackLeftShadow,
  .blackRightShadow,
  .blueShadow,
  .wrapper,
  footer {
    width: 100%
  }

  .wrapper {
    margin: 0 auto;
    height: 680px
  }

  .wrapper .view {
    width: 1415px;
    margin: 0 auto
  }

  .wrapper .setBtn {
    position: absolute;
    top: 57%
  }

  .wrapper .bottomPic {
    top: 31%
  }

  .wrapper .lineBtn {
    height: 19%;
    top: 40%
  }

  .wrapper .wraplast {
    top: 20%;
    width: 31%;
    height: 400px;
    left: 27.5%
  }
}

body {
  margin: 0 auto;
  display: none;
  overflow-x: hidden
}

#pictureShadow,
.blackLeftShadow,
.blackRightShadow,
.blueShadow {
  top: 0;
  position: absolute
}

#pictureShadow,
#pictureShadow .picView {
  position: absolute;
  overflow: hidden
}

#pictureShadow .picView {
  width: 500%;
  height: 100%
}

#pictureShadow .picView img {
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  font-size: 0;
  float: left
}

.blueShadow {
  z-index: 4;
  background-image: url(../static/headModule/blue.png);
  background-size: 100% 100%
}

.blackLeftShadow {
  background-image: url(../static/headModule/background/blackleft.png);
  background-size: 100% 100%;
  z-index: 3
}

.blackRightShadow {
  background-image: url(../static/headModule/background/blackright.png);
  background-size: 100% 100%;
  opacity: .6;
  z-index: 2
}

.firstPage {
  width: 1200px;
  margin: 0 auto
}

.firstPage nav {
  position: relative;
  z-index: 13;
  width: 1000px;
  height: 47px;
  margin: 0 auto;
  padding-top: 53px
}

.firstPage nav .logo:hover {
  cursor: pointer
}

.firstPage nav .nav {
  float: right
}

.firstPage nav .nav li {
  position: relative;
  width: 71px;
  height: 47px;
  float: left;
  font-family: IRANSansWeb;
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  margin-top: 15px;
  margin-left: 54px;
  text-align: center
}

.firstPage nav .nav li #line {
  float: left;
  width: 1px;
  height: 14px;
  margin-top: -1px;
  margin-right: 8px
}

.firstPage nav .nav li a {
  display: inline-block;
  margin-top: 0;
  height: 20px;
  font-family: IRANSansWeb;
  font-size: 20px;
  font-weight: 400;
  font-stretch: normal;
  line-height: 0;
  letter-spacing: 0;
  color: #fff;
  line-height: 20px
}

.firstPage nav .nav li p {
  height: 4px;
  background-color: #165dbd;
  border-radius: 2px;
  margin: 5px auto;
  display: none
}

.firstPage nav .nav #home p {
  width: 44px;
  display: block
}

.firstPage nav .nav #about p,
.firstPage nav .nav #help p,
.firstPage nav .nav .product {
  width: 44px
}

.firstPage nav .nav li:hover {
  cursor: pointer
}

.firstPage nav .nav #about:hover>p,
.firstPage nav .nav #help:hover>p,
.firstPage nav .nav #home:hover>p,
.firstPage nav .nav #product:hover>p {
  display: block
}

.firstPage nav .select_more {
  width: 140px;
  height: auto;
  border-radius: 5px;
  position: absolute;
  left: -30px;
  top: 45px;
  background: #fff;
  text-align: center;
  color: #000;
  font-size: 16px;
  display: none
}

.firstPage nav .select_more #square {
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  top: -10px;
  left: 60px
}

.firstPage nav .select_more ul .no_bottomline {
  border-bottom: none
}

.firstPage nav .select_more ul li {
  margin: 0;
  width: 140px;
  color: #666;
  height: 39px;
  line-height: 40px;
  border-bottom: 1px solid #eee
}

.firstPage nav .select_more ul li a {
  width: 140px;
  font-family: IRANSansWeb;
  color: #666;
  font-size: 16px
}

.firstPage nav .select_more ul li:nth-of-type(2) {
  border-radius: 5px 5px 0 0
}

.firstPage nav .select_more ul li:last-of-type {
  border-radius: 0 0 5px 5px
}

.firstPage nav .select_more ul li:hover {
  background-color: #9ec7ff
}

.firstPage nav .select_more ul li:first-of-type:hover {
  background-color: transparent
}

.firstPage nav .select_more ul li:hover>a {
  color: #fff
}

.firstPage nav .select_more1 {
  width: 140px;
  height: auto;
  border-radius: 5px;
  position: absolute;
  left: -30px;
  top: 40px;
  background: #fff;
  text-align: center;
  color: #000;
  font-size: 16px;
  display: none
}

.firstPage nav .select_more1 #square1 {
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  top: -9px;
  left: 60px
}

.firstPage nav .select_more1 ul .no_bottomline {
  border-bottom: none
}

.firstPage nav .select_more1 ul li {
  margin: 0;
  width: 140px;
  color: #666;
  height: 39px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
  border-radius: 5px
}

.firstPage nav .select_more1 ul li ul li:first-of-type {
  border-radius: 0
}

.firstPage nav .select_more1 ul li a {
  width: 140px;
  font-family: IRANSansWeb;
  color: #666;
  border-radius: 5px;
  font-size: 16px
}

.firstPage nav .select_more1 ul li:nth-of-type(2) {
  border-radius: 5px;
  border: 1px
}

.firstPage nav .select_more1 ul li:hover {
  background-color: #9ec7ff
}

.firstPage nav .select_more1 ul li:first-of-type:hover {
  background-color: transparent
}

.firstPage nav .select_more1 ul li:hover>a {
  color: #fff
}

.firstPage nav .select_more3 {
  width: 140px;
  height: auto;
  border-radius: 5px;
  position: absolute;
  left: -30px;
  top: 40px;
  background: #fff;
  text-align: center;
  color: #000;
  font-size: 16px;
  display: none
}

.firstPage nav .select_more3 #square3 {
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  top: -9px;
  left: 60px
}

.firstPage nav .select_more3 ul .no_bottomline {
  border-bottom: none
}

.firstPage nav .select_more3 ul li {
  margin: 0;
  width: 140px;
  color: #666;
  height: 39px;
  line-height: 40px;
  border-bottom: 1px solid #eee
}

.firstPage nav .select_more3 ul li a {
  width: 140px;
  font-family: IRANSansWeb;
  color: #666;
  border-radius: 5px;
  font-size: 16px
}

.firstPage nav .select_more3 ul li:nth-of-type(2) {
  border-radius: 5px 5px 0 0
}

.firstPage nav .select_more3 ul li:last-of-type {
  border-radius: 0 0 5px 5px;
  border: 1px
}

.firstPage nav .select_more3 ul li:hover {
  background-color: #9ec7ff
}

.firstPage nav .select_more3 ul li:first-of-type:hover {
  background-color: transparent
}

.firstPage nav .select_more3 ul li:hover>a {
  color: #fff
}

.firstPage .circularLeft {
  position: relative;
  z-index: 5
}

.firstPage .circularLeft .element,
.firstPage .circularLeft .round {
  position: absolute;
  top: -50px;
  left: -50px
}

.firstPage .circularLeft .element {
  z-index: 7
}

.firstPage .circularLeft .blueline {
  height: 50%;
  position: absolute;
  top: -48px;
  left: -55px;
  z-index: 6;
  -webkit-transform-origin: 48.2% 48.2%;
  -ms-transform-origin: 48.2% 48.2%;
  transform-origin: 48.2% 48.2%;
  -webkit-animation: blueLineRotate 6s linear Infinite;
  animation: blueLineRotate 6s linear Infinite
}

.firstPage .circularLeft .redline {
  position: absolute;
  top: -50px;
  z-index: 6;
  left: -50px;
  -webkit-transform-origin: 47.8% 48.5%;
  -ms-transform-origin: 47.8% 48.5%;
  transform-origin: 47.8% 48.5%;
  -webkit-animation: redLineRotate 6s linear Infinite;
  animation: redLineRotate 6s linear Infinite
}

.firstPage .circularLeft .greenline {
  position: absolute;
  top: -50px;
  z-index: 6;
  left: -50px;
  -webkit-transform-origin: 48% 48.2%;
  -ms-transform-origin: 48% 48.2%;
  transform-origin: 48% 48.2%;
  -webkit-animation: greenLineRotate 6s linear Infinite;
  animation: greenLineRotate 6s linear Infinite
}

.firstPage .circularLeft .purpleline {
  position: absolute;
  top: -50px;
  z-index: 6;
  left: -50px;
  -webkit-transform-origin: 47.8% 48.5%;
  -ms-transform-origin: 47.8% 48.5%;
  transform-origin: 47.8% 48.5%;
  -webkit-animation: purpleLineRotate 6s linear Infinite;
  animation: purpleLineRotate 6s linear Infinite
}

.firstPage .circularLeft .shareit {
  position: absolute;
  z-index: 8
}

.firstPage .circularLeft .headModuleIntroduceLarge {
  font-family: IRANSansWeb;
  font-weight: 400;
  font-stretch: normal;
  line-height: 36px;
  letter-spacing: 0;
  color: #e8e8e8;
  position: absolute;
  z-index: 8
}

.firstPage .circularLeft .headModuleIntroduceMin {
  position: absolute;
  z-index: 8;
  font-family: IRANSansWeb;
  font-weight: 400;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0;
  color: #dbdada
}

.firstPage .circularLeft .download {
  position: absolute;
  z-index: 9
}

.firstPage .circularLeft .download .Download {
  width: 55%
}

.firstPage .circularLeft .download .macOS {
  position: relative;
  width: 44%;
  height: 80%;
  float: left;
  margin-left: .1%
}

.firstPage .circularLeft .download .choose1,
.firstPage .circularLeft .download .choose2 {
  font-family: IRANSansWeb;
  font-size: 30px;
  font-weight: 400;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: -1px;
  color: #fff;
  float: left;
  text-align: center;
  background-color: #165dbd
}

.firstPage .circularLeft .download .choose1 {
  width: 100%
}

.firstPage .circularLeft .download .choose2 {
  margin-left: 1%;
  width: 100%
}

.firstPage .circularLeft .download .choose2 .down {
  position: absolute
}

.firstPage .circularLeft .download .choose1:hover,
.firstPage .circularLeft .download .choose2:hover {
  cursor: pointer
}

.firstPage .circularLeft .download .selectshadow {
  width: 130%;
  height: auto;
  margin-top: 53%;
  margin-left: -5%
}

.firstPage .circularLeft .download .selectTypeDiv {
  width: 160px;
  height: auto;
  border-radius: 5px;
  background: #fff;
  text-align: center;
  color: #000;
  font-size: 18px;
  margin: 0 auto;
  position: relative;
  display: none
}

.firstPage .circularLeft .download .selectTypeDiv #square2 {
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #fff;
  float: center;
  margin: 0 auto;
  position: absolute;
  top: -4.9%;
  left: 40%
}

.firstPage .circularLeft .download .selectTypeDiv ul .no_bottomline {
  border-bottom: none
}

.firstPage .circularLeft .download .selectTypeDiv ul:hover {
  cursor: pointer
}

.firstPage .circularLeft .download .selectTypeDiv ul li {
  margin: 0;
  width: 160px;
  color: #666;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee
}

.firstPage .circularLeft .download .selectTypeDiv ul li .selectTypeList {
  font-family: IRANSansWeb;
  color: #666;
  font-size: 18px
}

.firstPage .circularLeft .download .selectTypeDiv .select:last-of-type {
  border: 1px
}

.firstPage .circularLeft .download .selectTypeDiv .select:hover {
  background-color: #9ec7ff
}

.firstPage .circularLeft .download .selectTypeDiv .select:hover>a {
  color: #fff
}

.firstPage .circularLeft .download .selectTypeDiv .windows {
  border-radius: 5px 5px 0 0
}

.firstPage .circularLeft .download .selectTypeDiv .wp {
  border-radius: 0 0 5px 5px
}

.firstModule.thirdModule.fifthModule {
  background-color: #fdfdfd
}

.fourthModule,
.secondModule,
.sixthModule {
  background-color: #f4f9ff
}

.wrapper {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.view,
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.view {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: top;
  -ms-flex-align: top;
  align-items: top;
  position: relative;
  height: 612px;
  overflow: hidden
}

.view .effect,
.view .words {
  position: relative;
  width: 50%;
  height: 100%
}

.view .words .title {
  font-family: IRANSansWeb;
  font-size: 42px;
  line-height: 48px;
  color: #191919;
  margin-top: 25%
}

.view .words .desc,
.view .words .title {
  opacity: 0;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0
}

.view .words .desc {
  font-family: IRANSansWeb;
  font-size: 24px;
  line-height: 30px;
  color: #666;
  margin-top: 5%
}

.titleApper1 {
  -webkit-animation: d .5s linear .6s;
  animation: d .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper1 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.phoneApper1 {
  -webkit-animation: phoneApper1 .3s linear;
  animation: phoneApper1 .3s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper1 {
  -webkit-animation: shadowApper1 .3s linear .35s;
  animation: shadowApper1 .3s linear .35s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.transApper {
  -webkit-animation: transApper .3s linear .75s;
  animation: transApper .3s linear .75s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.musicApper {
  -webkit-animation: musicApper .8s linear 1.05s;
  animation: musicApper .8s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.fileApper {
  -webkit-animation: fileApper1 .8s linear 1.05s;
  animation: fileApper1 .8s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.videoApper {
  -webkit-animation: videoApper .8s linear 1.05s;
  animation: videoApper .8s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.game2Apper {
  -webkit-animation: game2Apper .8s linear 1.05s;
  animation: game2Apper .8s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.picApper {
  -webkit-animation: picApper .8s linear 1.05s;
  animation: picApper .8s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.gameShow {
  -webkit-animation: gameShow 1s linear 1.05s;
  animation: gameShow 1s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.appApper {
  -webkit-animation: appApper 1s linear 1.05s;
  animation: appApper 1s linear 1.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineFour,
.lineOne,
.lineThree,
.lineTwo {
  position: absolute;
  width: 20%;
  left: 40%;
  top: 33%;
  opacity: 0
}

.firstModule .effect,
.firstModule .words {
  top: 0;
  left: 5%
}

.firstModule .lineOne {
  width: 20%;
  left: 40%;
  top: 33%;
  -webkit-animation: lineMove 4s linear Infinite;
  animation: lineMove 4s linear Infinite;
  opacity: 0
}

.firstModule .lineTwo {
  width: 40%;
  left: 30%;
  top: 23%;
  -webkit-animation: lineMove 4s linear 1s Infinite;
  animation: lineMove 4s linear 1s Infinite;
  opacity: 0
}

.firstModule .lineThree {
  width: 60%;
  left: 20%;
  top: 13%;
  -webkit-animation: lineMove 4s linear 2s Infinite;
  animation: lineMove 4s linear 2s Infinite;
  opacity: 0
}

.firstModule .lineFour {
  width: 80%;
  left: 10%;
  top: 3%;
  -webkit-animation: lineMove 4s linear 3s Infinite;
  animation: lineMove 4s linear 3s Infinite;
  opacity: 0
}

.firstModule .phone {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 25%;
  z-index: 2;
  opacity: 0
}

.firstModule .leftShadow {
  left: 10%
}

.firstModule .leftShadow,
.firstModule .rightShadow {
  width: 40%;
  position: absolute;
  top: 10%;
  z-index: 1;
  opacity: 0
}

.firstModule .rightShadow {
  left: 50%
}

.firstModule .middleView {
  position: relative;
  width: 40%;
  height: 30%;
  z-index: 3;
  top: 35%;
  left: 30%
}

.firstModule .middleView img {
  position: absolute;
  opacity: 0
}

.firstModule .middleView .trans {
  top: 0;
  width: 100%
}

.firstModule .middleView .video {
  width: 15%;
  top: 10%
}

.firstModule .middleView .music {
  width: 20%;
  top: 5%
}

.firstModule .middleView .game {
  top: 45%
}

.firstModule .middleView .game2 {
  top: 40%;
  width: 25%
}

.firstModule .middleView .pic {
  width: 20%;
  top: 35%
}

.firstModule .middleView .file {
  top: 70%
}

@-webkit-keyframes a {
  0% {
    margin-top: 25%;
    opacity: 0
  }

  to {
    margin-top: 5%;
    opacity: 1
  }
}

@keyframes a {
  0% {
    margin-top: 25%;
    opacity: 0
  }

  to {
    margin-top: 5%;
    opacity: 1
  }
}

.secondModule .words {
  left: 5%
}

.secondModule .words .title {
  margin-left: 20%;
  margin-top: 30%
}

.secondModule .words .desc {
  margin-left: 20%
}

.secondModule .effect {
  left: -5%
}

.secondModule .effect img {
  position: absolute;
  opacity: 0
}

.secondModule .effect .phone {
  width: 70%;
  left: 15%;
  top: 40%;
  z-index: 2
}

.secondModule .effect .shadow {
  width: 70%;
  left: 15%;
  top: 45%
}

.secondModule .effect .downloadCloud {
  width: 10%;
  left: 45%;
  top: 60%;
  z-index: 7
}

.secondModule .effect .picLast {
  position: absolute;
  width: 39%;
  left: 30%;
  top: 28%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: rotateX(-25deg) translateZ(-200px);
  transform: rotateX(-25deg) translateZ(-200px)
}

.secondModule .effect .container {
  width: 100%;
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  height: 100%
}

.secondModule .effect .container .picContainer {
  position: absolute;
  margin: 40px auto 0;
  width: 60%;
  height: 41%;
  top: 15%;
  z-index: 3;
  left: 19.5%;
  -webkit-perspective: 500px;
  perspective: 500px
}

.secondModule .effect .picContainer .card:last-of-type {
  z-index: 10;
  -webkit-transform: rotateX(-25deg) translateZ(-200px);
  transform: rotateX(-25deg) translateZ(-200px)
}

.secondModule .effect .picContainer .card:nth-last-of-type(2) {
  z-index: 11;
  -webkit-transform: rotateX(-25deg) translateZ(-100px);
  transform: rotateX(-25deg) translateZ(-100px)
}

.secondModule .effect .picContainer .card:first-of-type {
  z-index: 12;
  -webkit-transform: rotateX(-15deg) translateZ(1px);
  transform: rotateX(-15deg) translateZ(1px)
}

.secondModule .effect .picContainer .card {
  display: block;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.secondModule .effect .picContainer .card img {
  display: block;
  width: 100%;
  height: 100%
}

.secondModule .effect .ball1 {
  width: 7%;
  top: 55%;
  left: 10%
}

.secondModule .effect .ball2 {
  width: 5%;
  top: 50%;
  left: 65%;
  z-index: 7
}

.secondModule .effect .ball3 {
  width: 7%;
  top: 20%;
  left: 75%
}

.secondModule .effect .ball4 {
  width: 6%;
  top: 40%;
  left: 73%
}

.secondModule .effect .ball5 {
  width: 5%;
  top: 30%;
  left: 20%
}

.secondModule .effect .ball6 {
  z-index: 7;
  width: 5%;
  left: 25%;
  top: 40%
}

.titleApper2 {
  -webkit-animation: d .5s linear .6s;
  animation: d .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper2 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.phoneApper2 {
  -webkit-animation: phoneApper2 .6s linear;
  animation: phoneApper2 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper2 {
  -webkit-animation: shadowApper2 .6s linear;
  animation: shadowApper2 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.pic1Move1,
.pic2Move1,
.pic3Move1,
.picLastMove {
  -webkit-animation: allApper1 .3s linear;
  animation: allApper1 .3s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.ballMove1 {
  -webkit-animation: ballMove1 2.7s linear 1.4s Infinite;
  animation: ballMove1 2.7s linear 1.4s Infinite
}

.ballMove2 {
  -webkit-animation: ballMove1 1.8s linear 1.6s Infinite;
  animation: ballMove1 1.8s linear 1.6s Infinite
}

.ballMove3 {
  -webkit-animation: ballMove1 1.8s linear 1.8s Infinite;
  animation: ballMove1 1.8s linear 1.8s Infinite
}

.ballMove4 {
  -webkit-animation: ballMove1 1.8s linear 2s Infinite;
  animation: ballMove1 1.8s linear 2s Infinite
}

.ballMove5 {
  -webkit-animation: ballMove1 2.2s linear 2.2s Infinite;
  animation: ballMove1 2.2s linear 2.2s Infinite
}

.ballMove6 {
  -webkit-animation: ballMove1 2.5s linear 2.4s Infinite;
  animation: ballMove1 2.5s linear 2.4s Infinite
}

.downloadApper {
  -webkit-animation: allApper1 .3s linear .8s;
  animation: allApper1 .3s linear .8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes b {
  0% {
    margin-top: 60%;
    opacity: 0
  }

  to {
    margin-top: 40%;
    opacity: 1
  }
}

@keyframes b {
  0% {
    margin-top: 60%;
    opacity: 0
  }

  to {
    margin-top: 40%;
    opacity: 1
  }
}

.thirdModule .effect {
  left: 5%
}

.thirdModule .effect img {
  position: absolute;
  opacity: 0
}

.thirdModule .effect .phone {
  width: 70%;
  left: 15%;
  top: 45%;
  z-index: 2
}

.thirdModule .effect .shadow {
  width: 100%;
  top: 15%
}

.thirdModule .effect .light {
  z-index: 3;
  width: 70%;
  left: 20%;
  top: 20%
}

.thirdModule .effect .avi {
  width: 10%;
  top: 45%;
  left: 53%;
  z-index: 6
}

.thirdModule .effect .avi,
.thirdModule .effect .blue {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg)
}

.thirdModule .effect .blue {
  width: 8%;
  top: 55%;
  left: 80%;
  z-index: 3
}

.thirdModule .effect .blue1 {
  width: 8%;
  top: 50%;
  left: 9%;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 3
}

.thirdModule .effect .f4v {
  width: 8%;
  top: 70%;
  left: 46%;
  z-index: 4;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg)
}

.thirdModule .effect .flv {
  width: 10%;
  top: 20%;
  left: 33%;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: 6
}

.thirdModule .effect .m4v {
  width: 8%;
  top: 30%;
  left: 50%
}

.thirdModule .effect .m4v,
.thirdModule .effect .mkv {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
  z-index: 6
}

.thirdModule .effect .mkv {
  width: 10%;
  top: 20%;
  left: 60%
}

.thirdModule .effect .pink {
  width: 7%;
  top: 35%;
  left: 70%;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
  z-index: 6
}

.thirdModule .effect .gp {
  width: 10%;
  top: 55%;
  left: 40%;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 6
}

.thirdModule .effect .mov {
  width: 8%;
  top: 35%;
  left: 40%;
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
  z-index: 6
}

.thirdModule .words {
  left: 5%
}

.thirdModule .words .title {
  margin-top: 40%
}

.titleApper3 {
  -webkit-animation: b .5s linear .6s;
  animation: b .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper3 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.phoneApper3 {
  -webkit-animation: phoneApper3 .6s linear;
  animation: phoneApper3 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper3 {
  -webkit-animation: shadowApper3 .6s linear;
  animation: shadowApper3 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lightApper {
  -webkit-animation: lightApper .5s linear .6s;
  animation: lightApper .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.aviMove,
.gpMove,
.movMove {
  -webkit-animation: fileApper .5s ease-out 1.1s;
  animation: fileApper .5s ease-out 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.blueMove {
  -webkit-animation: fileApper .5s ease-out 1.2s;
  animation: fileApper .5s ease-out 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.blue1Move {
  -webkit-animation: fileApper .5s ease-out 1.3s;
  animation: fileApper .5s ease-out 1.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.f4vMove {
  -webkit-animation: fileApper .5s ease-out 1.4s;
  animation: fileApper .5s ease-out 1.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.flvMove {
  -webkit-animation: fileApper .5s ease-out 1.5s;
  animation: fileApper .5s ease-out 1.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.m4vMove {
  -webkit-animation: fileApper .5s ease-out 1.6s;
  animation: fileApper .5s ease-out 1.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.mkvMove {
  -webkit-animation: fileApper .5s ease-out 1.7s;
  animation: fileApper .5s ease-out 1.7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.pinkMove {
  -webkit-animation: fileApper .5s ease-out 1.8s;
  animation: fileApper .5s ease-out 1.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.fourthModule .words .title {
  width: 100%;
  margin-top: 30%;
  margin-left: 20%
}

.fourthModule .words .desc {
  margin-left: 20%
}

.fourthModule .effect img {
  position: absolute;
  opacity: 0
}

.fourthModule .effect .phone {
  width: 50%;
  left: 15%;
  top: 15%;
  z-index: 2
}

.fourthModule .effect .shadow {
  width: 50%;
  left: 16%;
  top: 10%;
  z-index: 1
}

.fourthModule .effect .fillet {
  z-index: 3;
  width: 30%;
  top: 29%;
  left: 14%
}

.fourthModule .effect .music0 {
  width: 5%;
  top: 14%;
  left: 16%
}

.fourthModule .effect .music1 {
  width: 3%;
  left: 22%;
  top: 4%
}

.fourthModule .effect .music2 {
  width: 2%;
  top: 9%;
  left: 20%
}

.fourthModule .effect .wrap {
  position: relative;
  z-index: 4;
  overflow: hidden;
  width: 42%;
  height: 130px;
  top: 30%;
  left: 20%
}

.fourthModule .effect .wrap .pic {
  width: 240%
}

.phoneApper4 {
  -webkit-animation: phoneApper4 .6s linear;
  animation: phoneApper4 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper4 {
  -webkit-animation: shadowApper4 .6s linear;
  animation: shadowApper4 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.music0Apper {
  -webkit-animation: musicApper1 .2s linear .6s;
  animation: musicApper1 .2s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.music2Apper {
  -webkit-animation: musicApper1 .2s linear .8s;
  animation: musicApper1 .2s linear .8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.music1Apper {
  -webkit-animation: musicApper1 .2s linear 1s;
  animation: musicApper1 .2s linear 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.filletApper1 {
  -webkit-animation: filletApper1 .6s linear 1.2s;
  animation: filletApper1 .6s linear 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.wrapApper {
  -webkit-animation: wrapApper .6s linear 1.2s;
  animation: wrapApper .6s linear 1.2s
}

.picMove4 {
  -webkit-animation: picMove4 3s linear 1.2s;
  animation: picMove4 3s linear 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.titleApper4 {
  -webkit-animation: d .5s linear .6s;
  animation: d .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper4 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes c {
  0% {
    margin-top: 55%;
    opacity: 0
  }

  to {
    margin-top: 35%;
    opacity: 1
  }
}

@keyframes c {
  0% {
    margin-top: 55%;
    opacity: 0
  }

  to {
    margin-top: 35%;
    opacity: 1
  }
}

.fifthModule .effect {
  left: 5%
}

.fifthModule .effect img {
  position: absolute;
  opacity: 0
}

.fifthModule .effect .phone {
  width: 35%;
  top: 10%;
  left: 45%;
  z-index: 2
}

.fifthModule .effect .shadow {
  z-index: 1;
  width: 50%;
  left: 36%;
  top: 5%
}

.fifthModule .effect .setBtn {
  z-index: 4;
  width: 15%;
  left: 45%
}

.fifthModule .effect .bottomPic {
  z-index: 3;
  width: 45%;
  left: 10%
}

.fifthModule .effect .lineBtn {
  opacity: 0;
  position: absolute;
  width: 15px;
  z-index: 5
}

.fifthModule .effect .lineBtn1 {
  left: 17%
}

.fifthModule .effect .lineBtn2 {
  left: 24%
}

.fifthModule .effect .lineBtn3 {
  left: 31%
}

.fifthModule .effect .lineBtn4 {
  left: 38%
}

.fifthModule .effect .lineBtn5 {
  left: 45%
}

.fifthModule .effect .grayLine1,
.fifthModule .effect .grayLine2,
.fifthModule .effect .grayLine3,
.fifthModule .effect .grayLine4,
.fifthModule .effect .grayLine5 {
  position: absolute;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  left: 30%;
  z-index: 5;
  background-color: #e5e0e0
}

.fifthModule .effect .greenLine1,
.fifthModule .effect .greenLine2,
.fifthModule .effect .greenLine3,
.fifthModule .effect .greenLine4,
.fifthModule .effect .greenLine5 {
  position: absolute;
  width: 40%;
  border-radius: 3px;
  left: 30%;
  z-index: 5;
  background-color: #00b84f
}

.fifthModule .effect .greenLine1 {
  height: 70%;
  top: 30%
}

.fifthModule .effect .greenLine2 {
  height: 55%;
  top: 45%
}

.fifthModule .effect .greenLine3 {
  height: 60%;
  top: 40%
}

.fifthModule .effect .greenLine4 {
  height: 80%;
  top: 20%
}

.fifthModule .effect .greenLine5 {
  height: 30%;
  top: 70%
}

.fifthModule .effect .whiteBtn1,
.fifthModule .effect .whiteBtn2,
.fifthModule .effect .whiteBtn3,
.fifthModule .effect .whiteBtn4,
.fifthModule .effect .whiteBtn5 {
  width: 150%;
  top: 0;
  left: -29%;
  z-index: 7
}

.fifthModule .effect .whiteBtn1 {
  top: 20%;
  left: -28%
}

.fifthModule .effect .whiteBtn2 {
  top: 30%
}

.fifthModule .effect .whiteBtn3 {
  top: 30%;
  left: -28%
}

.fifthModule .effect .whiteBtn4 {
  top: 10%
}

.fifthModule .effect .whiteBtn5 {
  top: 50%;
  left: -28%
}

.fifthModule .effect .backgroundTable {
  opacity: 0;
  width: 650px;
  height: 270px;
  left: 7%;
  position: absolute;
  top: 30%
}

.fifthModule .effect .backgroundTable .trStyle {
  width: 650px;
  height: 10px;
  text-align: center;
  margin-top: 4px
}

.fifthModule .effect .backgroundTable .tdStyle {
  float: left;
  padding: 0;
  width: 5%;
  height: 10px;
  background-color: #fff;
  margin-right: 8px
}

.fifthModule .effect .backgroundTable .green {
  background-color: #e8f6ef
}

.fifthModule .effect .backgroundTable .transGreen {
  opacity: 0
}

.fifthModule .words {
  left: 5%
}

.fifthModule .words .title {
  margin-top: 35%
}

.fifthModule .words .desc {
  margin-top: 5%
}

.phoneApper5 {
  -webkit-animation: phoneApper5 .6s linear;
  animation: phoneApper5 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper5 {
  -webkit-animation: shadowApper5 .6s linear;
  animation: shadowApper5 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.setBtnApper {
  -webkit-animation: scaleApper .3s linear 1s;
  animation: scaleApper .3s linear 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.bottomApper {
  -webkit-animation: scaleApper .3s linear 1.3s;
  animation: scaleApper .3s linear 1.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineApper {
  -webkit-animation: scaleApper .6s linear 1.8s;
  animation: scaleApper .6s linear 1.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.tableApper {
  -webkit-animation: tableApper .6s linear 1.8s;
  animation: tableApper .6s linear 1.8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.btnUp {
  -webkit-animation: scaleApper .6s linear 1.8s, btnUp 1s linear 3s;
  animation: scaleApper .6s linear 1.8s, btnUp 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.btnDown {
  -webkit-animation: scaleApper .6s linear 1.8s, btnDown 1s linear 3s;
  animation: scaleApper .6s linear 1.8s, btnDown 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineUp2 {
  -webkit-animation: lineUp2 1s linear 3s;
  animation: lineUp2 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineUp3 {
  -webkit-animation: lineUp3 1s linear 3s;
  animation: lineUp3 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineUp5 {
  -webkit-animation: lineUp5 1s linear 3s;
  animation: lineUp5 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineDown1 {
  -webkit-animation: lineDown1 1s linear 3s;
  animation: lineDown1 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.lineDown4 {
  -webkit-animation: lineDown4 1s linear 3s;
  animation: lineDown4 1s linear 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.changeGreen {
  -webkit-animation: changeGreen 3s linear 3.5s;
  animation: changeGreen 3s linear 3.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.changeWhite {
  -webkit-animation: changeWhite 3s linear 3.5s;
  animation: changeWhite 3s linear 3.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.titleApper5 {
  -webkit-animation: c .5s linear .6s;
  animation: c .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper5 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.phoneApper6 {
  -webkit-animation: phoneApper6 .6s linear;
  animation: phoneApper6 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.shadowApper6 {
  -webkit-animation: shadowApper6 .6s linear;
  animation: shadowApper6 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.wrapApper6 {
  -webkit-animation: wrapApper6 .6s linear;
  animation: wrapApper6 .6s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.navApper6 {
  -webkit-animation: navApper6 .6s linear 1.2s;
  animation: navApper6 .6s linear 1.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.picMove6 {
  -webkit-animation: picMove6 9s linear .6s;
  animation: picMove6 9s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.spanMove {
  -webkit-animation: spanMove 9s linear .6s;
  animation: spanMove 9s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.other6odd {
  -webkit-animation: otherShow6 .3s linear 1s, otherMove6 2s linear 1.1s Infinite;
  animation: otherShow6 .3s linear 1s, otherMove6 2s linear 1.1s Infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.other6gif {
  -webkit-animation: otherShow6 .3s linear .8s, otherMove6 4s linear 1s Infinite;
  animation: otherShow6 .3s linear .8s, otherMove6 4s linear 1s Infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.other6wallpaper {
  -webkit-animation: otherShow6 .3s linear 1.1s, otherMove6 3.2s linear 1.4s Infinite;
  animation: otherShow6 .3s linear 1.1s, otherMove6 3.2s linear 1.4s Infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.titleApper6 {
  -webkit-animation: d .5s linear .6s;
  animation: d .5s linear .6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

.descApper6 {
  -webkit-animation: a .5s linear 1.1s;
  animation: a .5s linear 1.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards
}

@-webkit-keyframes d {
  0% {
    margin-top: 50%;
    opacity: 0
  }

  to {
    margin-top: 30%;
    opacity: 1
  }
}

@keyframes d {
  0% {
    margin-top: 50%;
    opacity: 0
  }

  to {
    margin-top: 30%;
    opacity: 1
  }
}
/* 首屏动效 */
/* 第一模块动效 */
/* 第二模块动效 */
/* //第三模块动效 */
/* 第四模块动效 */
/* 第五模块动效 */
/* 第六模块动效 */