* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0 auto;
  max-width: 750px;
  font-family: "Microsoft YaHe", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
.main {
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;
}
body {
  overflow-y: scroll;
}
.section1 {
  width: 750px;
  height: 1334px;
  background: url("../icon/底图.png") no-repeat;
  overflow: hidden;
}
.section1 .logo {
 width: 316px;
  height: 69px;
  background: url("../icon/logo.jpg") no-repeat;
  margin: 100px auto;
}
.section1 .yun {
  width: 671px;
  height: 686px;
  background: url("../icon/云.png") no-repeat;
  margin-left: 40px;
  animation: mymove 2s infinite linear;
  -webkit-animation: mymove 2s infinite linear;
}
.section1 .title {
  width: 573px;
  height: 363px;
  background: url("../icon/标题.png") no-repeat;
  margin-top: -590px;
  margin-left: 88px;
}
@keyframes mymove {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-webkit-keyframes mymove {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0px);
  }
}
.section2 div {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.section2.started div {
  opacity: 1;
  transform: none;
}
.text1 {
  width: 576px;
  height: 291px;
  background: url("../icon/资源 5.jpg") no-repeat;
  margin: 60px 0 60px 87px;
  transition: all 0.7s ease-out 0.1s;
}
.text2 {
  width: 664px;
  height: 261px;
  background: url("../icon/资源 6.png") no-repeat;
  margin: 60px 0 60px 43px;
  transition: all 0.7s ease-out 0.5s;
}
.section3 div {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.section3.started div {
  opacity: 1;
  transform: none;
}
.icon1 {
  width: 681px;
  height: 154px;
  background: url("../icon/资源 9.png") no-repeat;
  margin: 60px 0 60px 34.5px;
  transition: all 0.7s ease-out 0.1s;
}
.icon2 {
  width: 539px;
  height: 57px;
  background: url("../icon/资源 10.png") no-repeat;
  margin: 60px 0 60px 105.5px;
  transition: all 0.7s ease-out 0.1s;
}
.icon3.delighter.started {
  transform: scale(1);
  opacity: 1;
}
.icon3.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon3 {
  width: 750px;
  height: 1188px;
  background: url("../icon/资源 11.jpg") no-repeat;
  margin: 60px 0 60px 0px;
}
.icon4 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon4.started {
  opacity: 1;
  transform: none;
}
.icon4 {
  width: 650px;
  height: 95px;
  background: url("../icon/资源 12.png") no-repeat;
  margin: 60px 0 60px 50px;
  transition: all 0.7s ease-out 0.5s;
}
.icon5.delighter.started {
  transform: scale(1);
  opacity: 1;
}
.icon5.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon5 {
  width: 650px;
  height: 565px;
  background: url("../icon/资源 13.png") no-repeat;
  margin: 100px 0 100px 50px;
}
.icon-box {
  overflow: hidden;
}
.player3 {
  width: 369px;
  height: 395px;
  margin: 60px 0 60px 60px;
  background-image: url('../icon/资源 7.png');
  float: left;
}
.player3.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.player3.delighter.started {
  transform: none;
  opacity: 1;
}
.player4 {
  width: 262px;
  height: 389px;
  margin: 60px 40px 60px 0px;
  background-image: url('../icon/资源 8.png');
  float: right;
}
.player4.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.player4.delighter.started {
  transform: none;
  opacity: 1;
}
.player1 {
  width: 360px;
  height: 975px;
  margin: 60px 0 60px 0px;
  background-image: url('../icon/资源 14.png');
  float: left;
}
.player1.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.player1.delighter.started {
  transform: none;
  opacity: 1;
}
.player2 {
  width: 345px;
  height: 935px;
  margin: 200px 0 60px 0px;
  background-image: url('../icon/资源 15.png');
  float: right;
}
.player2.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.player2.delighter.started {
  transform: none;
  opacity: 1;
}
.icon6 {
  width: 748px;
  height: 782px;
  margin: 60px 0 60px 1px;
  background-image: url('../icon/资源 16.png');
}
.icon6.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon6.delighter.started {
  transform: none;
  opacity: 1;
}
.icon7 {
  width: 673px;
  height: 503px;
  margin: 200px 0 200px 38px;
  background-image: url('../icon/资源 17.jpg');
}
.icon7.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon7.delighter.started {
  transform: none;
  opacity: 1;
}
.icon8 {
  width: 681px;
  height: 140px;
  margin: 60px 0 200px 35px;
  background-image: url('../icon/资源 16.png');
}
.icon8.delighter {
  transform: translateY(300%);
  opacity: 0;
  transition: all 0.75s ease-out;
}
.icon8.delighter.started {
  transform: none;
  opacity: 1;
}
.icon9 {
  width: 705px;
  height: 653px;
  margin: 60px 0 200px 22px;
  background-image: url('../icon/资源 19.png');
}
.icon9.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon9.delighter.started {
  transform: none;
  opacity: 1;
}
.icon10 {
  width: 736px;
  height: 674px;
  margin: 60px 0 60px 7px;
  background-image: url('../icon/资源 20.png');
}
.icon10.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon10.delighter.started {
  transform: none;
  opacity: 1;
}
.icon11 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon11.started {
  opacity: 1;
  transform: none;
}
.icon11 {
  width: 680px;
  height: 140px;
  background: url("../icon/资源 21.png") no-repeat;
  margin: 100px 0 10px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon12 {
  width: 750px;
  height: 1383px;
  margin: 50px 0 200px 0px;
  background-image: url('../icon/资源 22.jpg');
}
.icon12.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon12.delighter.started {
  transform: none;
  opacity: 1;
}
.icon13 {
  width: 750px;
  height: 994px;
  margin: 60px 0 60px 0px;
  background-image: url('../icon/资源 23.jpg');
}
.icon13.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon13.delighter.started {
  transform: none;
  opacity: 1;
}
.icon14 {
  width: 750px;
  height: 191px;
  margin: 100px 0 100px 35px;
  background-image: url('../icon/资源 24.png');
}
.icon14.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon14.delighter.started {
  opacity: 1;
}
.icon14.delighter.started.ended {
  transform: scale(1);
}
.icon11.delighter {
  transform: translateY(300%);
  opacity: 0;
  transition: all 0.75s ease-out;
}
.icon11.delighter.started {
  transform: none;
  opacity: 1;
}
.icon15 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon15.started {
  opacity: 1;
  transform: none;
}
.icon15 {
  width: 607px;
  height: 279px;
  background: url("../icon/资源 26.png") no-repeat;
  margin: 100px 0 0px 22px;
  transition: all 0.7s ease-out 0.2s;
}
.icon16 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon16.started {
  opacity: 1;
  transform: none;
}
.icon16 {
  width: 750px;
  height: 451px;
  background: url("../icon/资源 27.png") no-repeat;
  margin: 0px 0 10px 0px;
  transition: all 0.7s ease-out 0.2s;
}
.icon17 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon17.started {
  opacity: 1;
  transform: none;
}
.icon17 {
  width: 680px;
  height: 140px;
  background: url("../icon/资源 25.png") no-repeat;
  margin: 100px 0 10px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon18 {
  width: 681px;
  height: 154px;
  margin: 60px 0 60px 35px;
  background-image: url('../icon/资源 29.png');
}
.icon18.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon18.delighter.started {
  transform: none;
  opacity: 1;
}
.icon19 {
  width: 680px;
  height: 400px;
  background-image: url('../icon/资源 30.png');
  margin: 60px 0 30px 35px;
}
.icon19.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon19.delighter.started {
  opacity: 1;
}
.icon19.delighter.started.ended {
  transform: scale(1);
}
.icon20 {
  width: 680px;
  height: 360px;
  background-image: url('../icon/资源 31.png');
  margin: 30px 0 0px 35px;
}
.icon20.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon20.delighter.started {
  opacity: 1;
}
.icon20.delighter.started.ended {
  transform: scale(1);
}
.icon21 {
  width: 654px;
  height: 636px;
  background-image: url('../icon/资源 32.png');
  margin: 100px 0 100px 48px;
}
.icon21.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon21.delighter.started {
  opacity: 1;
}
.icon21.delighter.started.ended {
  transform: scale(1);
}
.icon22 {
  width: 750px;
  height: 496px;
  background-image: url('../icon/资源 38.png');
  margin: 100px 0 100px 0px;
}
.icon22.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon22.delighter.started {
  opacity: 1;
}
.icon22.delighter.started.ended {
  transform: scale(1);
}
.icon23 {
  width: 750px;
  height: 252px;
  background-image: url('../icon/资源 39.png');
  margin: 100px 0 100px 0px;
}
.icon23.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon23.delighter.started {
  opacity: 1;
}
.icon23.delighter.started.ended {
  transform: scale(1);
}
.icon24 {
  width: 667px;
  height: 725px;
  background-image: url('../icon/资源 40.png');
  margin: 100px 0 0px 41px;
}
.icon24.delighter {
  transition: all 0.8s ease-out;
  transform: scale(0);
  opacity: 0;
}
.icon24.delighter.started {
  opacity: 1;
}
.icon24.delighter.started.ended {
  transform: scale(1);
}
.icon25 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon25.started {
  opacity: 1;
  transform: none;
}
.icon25 {
  width: 750px;
  height: 373px;
  background: url("../icon/资源 41.jpg") no-repeat;
  margin: 0px 0 10px 0px;
  transition: all 0.7s ease-out 0.2s;
}
.icon26 {
  width: 681px;
  height: 140px;
  margin: 60px 0 60px 35px;
  background-image: url('../icon/资源 42.png');
}
.icon26.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon26.delighter.started {
  transform: none;
  opacity: 1;
}
.icon27 {
  width: 497px;
  height: 245px;
  margin: 50px 0 10px 0px;
  background-image: url('../icon/资源 43.png');
}
.icon27.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon27.delighter.started {
  transform: none;
  opacity: 1;
}
.icon28 {
  width: 497px;
  height: 313px;
  margin: 20px 0px 20px 260px;
  background-image: url('../icon/资源 44.png');
}
.icon28.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon28.delighter.started {
  transform: none;
  opacity: 1;
}
.icon29 {
  width: 497px;
  height: 295px;
  margin: 50px 0 10px 0px;
  background-image: url('../icon/资源 45.png');
}
.icon29.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon29.delighter.started {
  transform: none;
  opacity: 1;
}
.icon30 {
  width: 497px;
  height: 221px;
  margin: 20px 0px 20px 260px;
  background-image: url('../icon/资源 46.png');
}
.icon30.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon30.delighter.started {
  transform: none;
  opacity: 1;
}
.icon31 {
  width: 497px;
  height: 228px;
  margin: 50px 0 10px 0px;
  background-image: url('../icon/资源 47.png');
}
.icon31.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon31.delighter.started {
  transform: none;
  opacity: 1;
}
.icon32 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon32.started {
  opacity: 1;
  transform: none;
}
.icon32 {
  width: 681px;
  height: 154px;
  background: url("../icon/资源 48.png") no-repeat;
  margin: 100px 0 100px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon33 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon33.started {
  opacity: 1;
  transform: none;
}
.icon33 {
  width: 651px;
  height: 736px;
  background: url("../icon/资源 49.png") no-repeat;
  margin: 100px 0 100px 50px;
  transition: all 0.7s ease-out 0.2s;
}
.icon34 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon34.started {
  opacity: 1;
  transform: none;
}
.icon34 {
  width: 750px;
  height: 571px;
  background: url("../icon/资源 50.png") no-repeat;
  margin: 100px 0 100px 0px;
  transition: all 0.7s ease-out 0.2s;
}
.icon35 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon35.started {
  opacity: 1;
  transform: none;
}
.icon35 {
  width: 650px;
  height: 620px;
  background: url("../icon/资源 51.png") no-repeat;
  margin: 100px 0 100px 50px;
  transition: all 0.7s ease-out 0.2s;
}
.icon36 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon36.started {
  opacity: 1;
  transform: none;
}
.icon36 {
  width: 671px;
  height: 568px;
  background: url("../icon/资源 52.png") no-repeat;
  margin: 100px 0 100px 40px;
  transition: all 0.7s ease-out 0.2s;
}
.icon37 {
  width: 681px;
  height: 140px;
  margin: 60px 0 60px 35px;
  background-image: url('../icon/资源 53.png');
}
.icon37.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon37.delighter.started {
  transform: none;
  opacity: 1;
}
.icon38 {
  width: 647px;
  height: 386px;
  margin: 20px 0 20px 51px;
  background-image: url('../icon/资源 54.png');
}
.icon38.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon38.delighter.started {
  transform: none;
  opacity: 1;
}
.icon39 {
  width: 650px;
  height: 245px;
  margin: 20px 0 0px 50px;
  background-image: url('../icon/资源 55.png');
}
.icon39.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon39.delighter.started {
  transform: none;
  opacity: 1;
}
.icon40 {
  width: 724px;
  height: 398px;
  margin: 0px 0 60px 13px;
  background-image: url('../icon/资源 56.png');
}
.icon40.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon40.delighter.started {
  transform: none;
  opacity: 1;
}
.icon41 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon41.started {
  opacity: 1;
  transform: none;
}
.icon41 {
  width: 664px;
  height: 86px;
  background: url("../icon/资源 57.png") no-repeat;
  margin: 0px 0 20px 43px;
  transition: all 0.7s ease-out 0.2s;
}
.icon42 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon42.started {
  opacity: 1;
  transform: none;
}
.icon42 {
  width: 611px;
  height: 48px;
  background: url("../icon/资源 58.png") no-repeat;
  margin: 20px 0 60px 70px;
  transition: all 0.7s ease-out 0.2s;
}
.icon43 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon43.started {
  opacity: 1;
  transform: none;
}
.icon43 {
  width: 680px;
  height: 153px;
  background: url("../icon/资源 59.png") no-repeat;
  margin: 60px 0 60px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.player5 {
  width: 368px;
  height: 451px;
  margin: 0px 0 60px 0px;
  background-image: url('../icon/资源 60.png');
  float: left;
}
.player5.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.player5.delighter.started {
  transform: none;
  opacity: 1;
}
.player6 {
  width: 321px;
  height: 460px;
  margin: 0px 40px 60px 0px;
  background-image: url('../icon/资源 61.png');
  float: right;
}
.player6.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.player6.delighter.started {
  transform: none;
  opacity: 1;
}
.icon44 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon44.started {
  opacity: 1;
  transform: none;
}
.icon44 {
  width: 680px;
  height: 139px;
  background: url("../icon/资源 62.png") no-repeat;
  margin: 60px 0 60px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.player7 {
  width: 393px;
  height: 185px;
  margin: 0px 0 60px 20px;
  background-image: url('../icon/资源 63.png');
  float: left;
}
.player7.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.player7.delighter.started {
  transform: none;
  opacity: 1;
}
.player8 {
  width: 300px;
  height: 228px;
  margin: 0px 20px 60px 0px;
  background-image: url('../icon/资源 64.png');
  float: right;
}
.player8.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.player8.delighter.started {
  transform: none;
  opacity: 1;
}
.icon45 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon45.started {
  opacity: 1;
  transform: none;
}
.icon45 {
  width: 680px;
  height: 153px;
  background: url("../icon/资源 65.png") no-repeat;
  margin: 60px 0 60px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.player9 {
  width: 278px;
  height: 246px;
  margin: 0px 0 60px 60px;
  background-image: url('../icon/资源 66.png');
  float: left;
}
.player9.delighter {
  transition: all 0.5s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.player9.delighter.started {
  transform: none;
  opacity: 1;
}
.player10 {
  width: 328px;
  height: 132px;
  margin: 0px 60px 60px 0px;
  background-image: url('../icon/资源 67.png');
  float: right;
}
.player10.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.player10.delighter.started {
  transform: none;
  opacity: 1;
}
.icon46 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon46.started {
  opacity: 1;
  transform: none;
}
.icon46 {
  width: 680px;
  height: 140px;
  background: url("../icon/资源 68.png") no-repeat;
  margin: 60px 0 60px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon47 {
  width: 664px;
  height: 381px;
  margin: 0px 60px 60px 43px;
  background-image: url('../icon/资源 69.png');
}
.icon47.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon47.delighter.started {
  transform: none;
  opacity: 1;
}
.icon48 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon48.started {
  opacity: 1;
  transform: none;
}
.icon48 {
  width: 680px;
  height: 153px;
  background: url("../icon/资源 70.png") no-repeat;
  margin: 60px 0 60px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon49 {
  width: 700px;
  height: 578px;
  margin: 0px 0px 60px 25px;
  background-image: url('../icon/资源 71.png');
}
.icon49.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon49.delighter.started {
  transform: none;
  opacity: 1;
}
.icon50 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon50.started {
  opacity: 1;
  transform: none;
}
.icon50 {
  width: 680px;
  height: 140px;
  background: url("../icon/资源 72.png") no-repeat;
  margin: 60px 0 40px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon51 {
  width: 706px;
  height: 609px;
  margin: 0px 0px 60px 22px;
  background-image: url('../icon/资源 73.png');
}
.icon51.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(100%);
  opacity: 0;
}
.icon51.delighter.started {
  transform: none;
  opacity: 1;
}
.icon52 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon52.started {
  opacity: 1;
  transform: none;
}
.icon52 {
  width: 680px;
  height: 154px;
  background: url("../icon/资源 74.png") no-repeat;
  margin: 60px 0 40px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon53 {
  width: 750px;
  height: 418px;
  margin: 0px 0px 60px 0px;
  background-image: url('../icon/资源 75.jpg');
}
.icon53.delighter {
  transition: all 0.8s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}
.icon53.delighter.started {
  transform: none;
  opacity: 1;
}
.icon54 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon54.started {
  opacity: 1;
  transform: none;
}
.icon54 {
  width: 680px;
  height: 160px;
  background: url("../icon/资源 77.png") no-repeat;
  margin: 60px 0 40px 35px;
  transition: all 0.7s ease-out 0.2s;
}
.icon55 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon55.started {
  opacity: 1;
  transform: none;
}
.icon55 {
  width: 650px;
  height: 182px;
  background: url("../icon/资源 78.png") no-repeat;
  margin: 60px 0 40px 50px;
  transition: all 0.7s ease-out 0.2s;
}
.icon56 {
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.7s ease-out;
}
.icon56.started {
  opacity: 1;
  transform: none;
}
.icon56 {
  width: 750px;
  height: 555px;
  background: url("../icon/资源 79.png") no-repeat;
  margin: 60px 0 40px 0px;
  transition: all 0.7s ease-out 0.2s;
}
.icon57 {
  width: 750px;
  height: 240px;
  background: url("../icon/资源 80.png") no-repeat;
  margin: 60px 0 0px 0px;
  transition: all 0.7s ease-out 0.2s;
}
video {
  display: none;
}
.music-btn {
  float: right;
  background: url('../icon/on.png') no-repeat;
  background-size: 100% 100%;
  width: 56px;
  height: 56px;
  position: fixed;
  top: 2%;
  right: 6%;
  z-index: 100;
}
.music-switch {
  animation: around 5s;
  -webkit-animation: around 5s infinite linear ;
}
@keyframes around {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes around {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}