@charset "UTF-8";
@import url(animate.min.css);
@import url(img.css);
@import url(swiper.min.css);
* {
  border: none;
  margin: 0;
  padding: 0;
  font-family: 'MicrosoftYaHei', 微软雅黑,serif; }

a, a:link, a:visited, a:hover, a:active {
  text-decoration: none; }

@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 360px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 375px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 393px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 412px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 414px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 480px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 540px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 640px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 720px) and (max-width: 768px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw); } }
@media screen and (min-width: 768px) {
  html {
    font-size: 102.4px; }

  #container {
    width: 1200px;
    margin: 0 auto; } }
.clear {
  clear: both;
  *height: 1%; }
  .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }

img {
  display: block; }

li {
  list-style: none; }

.lf {
  float: left; }

.rt {
  float: right; }

input, select {
  -webkit-appearance: none; }

body {
  position: relative;
  color: #333; }

[v-cloak] {
  display: none; }

.pop-code {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50; }
  .pop-code .code {
    position: absolute;
    top: 20vh;
    width: 2.7777777778rem;
    left: 50%;
    margin-left: -1.3888888889rem;
    text-align: center;
    padding-bottom: 0.5555555556rem; }
    .pop-code .code .close {
      position: absolute;
      bottom: 0.0694444444rem;
      left: 50%;
      width: 0.4166666667rem;
      margin-left: -0.2083333333rem; }
    .pop-code .code img {
      width: 100%; }
    .pop-code .code div {
      background: white;
      padding: 0 0.0694444444rem 0.1736111111rem 0.0694444444rem;
      font-weight: bold; }

/*
section{
  position: relative;
  top:0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height:1334*$vw;
}*/
#pop-bg {
  position: fixed;
  width: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); }

body {
  background: #1c397c; }

#container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden; }

#cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin-left: -960px;
  margin-top: -540px; }
  #cover .cover {
    width: 1920px;
    height: 1080px;
    animation: step1 3s forwards;
    animation-delay: 14s;
    background: #1c397c; }
@keyframes step1 {
  100% {
    opacity: 0; } }
    #cover .cover .img {
      position: absolute; }
    #cover .cover .mask {
      width: 100%;
      height: 100%;
      -webkit-mask-image: url("../images/mask.png"); }
    #cover .cover .img_moon {
      position: absolute;
      width: 1907px;
      animation: moon 25s forwards;
      left: 460px; }
@keyframes moon {
  0% {
    left: 460px; }
  100% {
    left: -150px; } }
    #cover .cover .img_star {
      left: 1980px;
      top: -303px;
      width: 516px;
      animation: star 9s infinite;
      animation-delay: 4s; }
@keyframes star {
  0% {
    opacity: 1; }
  40% {
    left: -1080px;
    top: 1080px;
    opacity: 0; }
  100% {
    left: 1980px;
    top: -303px;
    opacity: 0; } }
    #cover .cover .img_tree {
      width: 640px;
      left: -640px;
      animation: tree 1s forwards,img_part1_tree 7s infinite;
      animation-delay: 4s;
      transform-origin: 0 0; }
@keyframes tree {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    left: 0; } }
    #cover .cover .img_rabbit {
      width: 524px;
      bottom: -468px;
      left: 856px;
      animation: rabbit 1s forwards;
      animation-delay: 4s;
      opacity: 0;
      transform: scale(0, 0); }
@keyframes rabbit {
  100% {
    transform: scale(1, 1);
    opacity: 1;
    bottom: 122px; } }
    #cover .cover .img_cover2 {
      width: 1920px;
      bottom: 0;
      left: 0;
      animation: cover2 10s infinite;
      animation-delay: 4s;
      transform: scale(1, 1);
      mix-blend-mode: color-dodge; }
@keyframes cover2 {
  50% {
    transform: scale(1, 0.7);
    opacity: 0.6; } }
    #cover .cover .img_cloud1 {
      width: 255px;
      bottom: 224px;
      right: 30px;
      animation: cloud1 3s infinite;
      animation-delay: 4s; }
@keyframes cloud1 {
  50% {
    right: 60px; } }
    #cover .cover .img_cloud2 {
      width: 262px;
      bottom: 60px;
      left: 108px;
      animation: cloud2 3s infinite;
      animation-delay: 4s; }
@keyframes cloud2 {
  50% {
    left: 150px; } }
    #cover .cover .img_hill {
      width: 1399px;
      right: 0;
      bottom: 0; }
    #cover .cover .poem {
      width: 0;
      height: 356px;
      top: 147px;
      right: 196px;
      overflow: hidden;
      animation: poem 10s forwards;
      animation-delay: 4s; }
@keyframes poem {
  9% {
    width: 0; }
  10% {
    width: 70px; }
  19% {
    width: 70px; }
  20% {
    width: 137px; }
  29% {
    width: 137px; }
  30% {
    width: 209px; }
  39% {
    width: 209px; }
  40% {
    width: 279px; }
  49% {
    width: 279px; }
  50% {
    width: 357px; }
  59% {
    width: 357px; }
  60% {
    width: 425px; }
  69% {
    width: 425px; }
  70% {
    width: 495px; }
  79% {
    width: 495px; }
  80% {
    width: 573px; }
  89% {
    width: 573px; }
  90% {
    width: 637px; }
  100% {
    width: 637px; } }
    #cover .cover .img_poem {
      width: 637px;
      right: 0;
      top: 0; }
    #cover .cover .img_cover1 {
      width: 100%;
      animation: cover 4s forwards; }
@keyframes cover {
  25% {
    transform: scale(1, 1);
    opacity: 1; }
  100% {
    transform: scale(2, 2);
    transform-origin: 50% 50%;
    opacity: 0; } }
    #cover .cover .cover_step_2 {
      opacity: 0;
      animation: cover_step_2 3s forwards;
      animation-delay: 4s; }
@keyframes cover_step_2 {
  100% {
    opacity: 1; } }
.stage {
  position: absolute;
  width: 1920px;
  height: 1080px;
  animation: step2 3s forwards;
  animation-delay: 8s;
  background: #1c397c;
  transform-origin: 50% 50%; }
@keyframes step2 {
  100% {
    transform: scale(3, 3);
    opacity: 0; } }
  .stage .bg {
    position: absolute; }
  .stage .img {
    position: absolute; }
  .stage .light .img_light {
    width: 1920px;
    top: 195px; }
  .stage .light .img_light2 {
    width: 380px;
    top: 240px;
    left: 764px; }
  .stage .light .img_light3 {
    width: 855px;
    top: 180px;
    left: 529px; }
  .stage .light .img_light4 {
    width: 1718px;
    top: 294px;
    left: 126px;
    mix-blend-mode: lighten; }
  .stage .light .img_light5 {
    width: 335px;
    top: 526px;
    left: 330px;
    mix-blend-mode: lighten; }
  .stage .light .img_light6 {
    width: 335px;
    top: 536px;
    right: 330px;
    mix-blend-mode: lighten; }
  .stage .light .img_light7 {
    width: 373px;
    top: 270px;
    left: 770px; }
  .stage .light .img_light11 {
    width: 217px;
    top: 240px;
    left: 840px; }
  .stage .light .img_light8 {
    width: 224px;
    top: 270px;
    left: 850px; }
  .stage .light .img_light10 {
    width: 305px;
    top: 425px;
    left: 790px; }
  .stage .light .img_light9 {
    width: 526px;
    top: 330px;
    left: 680px; }
  .stage .light .firework1 {
    width: 800px;
    left: 153px;
    top: 75px; }
  .stage .light .firework2 {
    width: 800px;
    right: 153px;
    top: 75px; }
  .stage .fountain_list {
    position: absolute;
    width: 100%;
    height: 100%; }
    .stage .fountain_list li {
      width: 193px;
      transform-origin: 50% 50%; }
      .stage .fountain_list li .img_water {
        width: 193px; }
      .stage .fountain_list li .light {
        width: 339px;
        mix-blend-mode: lighten;
        top: 15px;
        left: -25px; }
      .stage .fountain_list li:nth-child(1) {
        top: 633px;
        left: 0;
        transform: scale(0.8, 0.8); }
      .stage .fountain_list li:nth-child(2) {
        top: 753px;
        left: 140px;
        transform: scale(0.9, 0.9); }
      .stage .fountain_list li:nth-child(3) {
        top: 843px;
        left: 350px; }
      .stage .fountain_list li:nth-child(4) {
        top: 883px;
        left: 600px; }
      .stage .fountain_list li:nth-child(5) {
        top: 883px;
        right: 600px; }
      .stage .fountain_list li:nth-child(6) {
        top: 843px;
        right: 350px; }
      .stage .fountain_list li:nth-child(7) {
        top: 753px;
        right: 140px;
        transform: scale(0.9, 0.9); }
      .stage .fountain_list li:nth-child(8) {
        top: 633px;
        right: 0;
        transform: scale(0.8, 0.8); }
  .stage .img_name {
    position: fixed;
    width: 43px;
    left: 33px;
    bottom: 32px; }
  .stage .text {
    position: fixed !important;
    left: 50%;
    margin-left: -437.5px;
    top: 52px;
    width: 875px;
    height: 0;
    animation: text2 3s forwards;
    animation-delay: 2s;
    overflow: hidden; }
@keyframes text2 {
  100% {
    height: 144px; } }
    .stage .text .img_name2 {
      left: 0;
      top: 0;
      width: 875px; }

.pointerEventsNone {
  pointer-events: none; }

#main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url("../images/bg2.png") no-repeat;
  background-size: 100% 100%; }
  #main .water {
    position: absolute;
    bottom: 0;
    animation: main_water 5s infinite;
    height: 719px;
    width: 100%; }
@keyframes main_water {
  50% {
    height: 690px;
    opacity: 0.3; } }
#main .part {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin-left: -960px;
  margin-top: -540px; }
  #main .part .img {
    position: absolute; }
  #main .part .img_stage {
    width: 1558px;
    left: 206px;
    bottom: 0; }
    #main .part .img_stage .img_stage2 {
      width: 1558px;
      top: -25px; }
  #main .part .part1 .screen .middle {
    position: absolute;
    width: 1593px;
    height: 112px;
    top: -112px;
    left: 158px;
    -webkit-mask-image: url("../images/mask_middle.png");
    background: black; }
    #main .part .part1 .screen .middle.startAni {
      animation: part1_middle_startAni 3s forwards; }
@keyframes part1_middle_startAni {
  0% {
    height: 112px; }
  40% {
    top: 40px;
    height: 112px; }
  100% {
    top: 40px;
    height: 761px; } }
    #main .part .part1 .screen .middle.endAni {
      top: 40px;
      height: 761px;
      animation: part1_middle_endAni 2s forwards;
      animation-delay: 1s; }
@keyframes part1_middle_endAni {
  0% {
    top: 40px;
    height: 761px; }
  40% {
    top: 40px;
    height: 112px; }
  100% {
    top: -761px;
    height: 112px; } }
    #main .part .part1 .screen .middle .box {
      position: absolute;
      width: 100%;
      height: 670px;
      left: 0;
      background: linear-gradient(to bottom, black, #06164c);
      top: 70px; }
      #main .part .part1 .screen .middle .box .img_part1_16 {
        width: 820px;
        bottom: -150px;
        left: 386px;
        height: 337px;
        animation: img_part1_16 5s infinite; }
@keyframes img_part1_16 {
  50% {
    height: 310px;
    opacity: 0.3; } }
    #main .part .part1 .screen .middle .img_part1_3 {
      width: 249px;
      left: 0;
      top: -103px;
      animation: img_part1_moon 5s forwards;
      animation-delay: 4s;
      opacity: 0; }
@keyframes img_part1_moon {
  100% {
    top: 3px;
    left: 777px;
    opacity: 1; } }
    #main .part .part1 .screen .middle .img_part1_5 {
      width: 220px;
      top: 550px;
      right: 0;
      animation: img_part1_5_1 5s forwards,img_part1_5_2 4s infinite;
      animation-delay: 4s;
      opacity: 0; }
@keyframes img_part1_5_1 {
  100% {
    opacity: 1;
    top: 0;
    right: 400px; } }
@keyframes img_part1_5_2 {
  50% {
    opacity: 0.8;
    transform: translate(10px, -5px) scale(0.98, 0.98); } }
    #main .part .part1 .screen .middle .img_tree {
      width: 440px;
      top: -200px;
      left: 386px;
      opacity: 0;
      animation: img_part1_tree_start 1s forwards,img_part1_tree 7s infinite;
      animation-delay: 2s;
      transform-origin: 0 0; }
@keyframes img_part1_tree_start {
  100% {
    top: 0;
    opacity: 1; } }
@keyframes img_part1_tree {
  50% {
    opacity: 0.9;
    transform: rotate(3deg); } }
    #main .part .part1 .screen .middle .img_top {
      width: 100%; }
    #main .part .part1 .screen .middle .more {
      position: absolute;
      width: 500px;
      bottom: 70px;
      font-size: 20px;
      left: 1090px; }
      #main .part .part1 .screen .middle .more a {
        color: white; }
    #main .part .part1 .screen .middle .swiper {
      position: absolute;
      width: 510px;
      bottom: 100px;
      left: 550px;
      height: 332px;
      overflow: hidden; }
      #main .part .part1 .screen .middle .swiper .swiper-slide {
        background: linear-gradient(to right, rgba(190, 190, 190, 0.6), rgba(238, 238, 238, 0.6), rgba(190, 190, 190, 0.6));
        font-size: 22px;
        line-height: 55px;
        border-radius: 10px;
        text-align: center; }
        #main .part .part1 .screen .middle .swiper .swiper-slide a {
          color: white;
          text-shadow: 0 0 5px #0b163c; }
        #main .part .part1 .screen .middle .swiper .swiper-slide:hover a {
          color: #ffc96a; }
  #main .part .part1 .img_part1_2.boat {
    width: 805px;
    bottom: 159px;
    left: -805px; }
    #main .part .part1 .img_part1_2.boat.startAni {
      animation: img_part1_2_1 8s forwards;
      transform-origin: 0 0; }
@keyframes img_part1_2_1 {
  100% {
    left: 520px;
    bottom: 259px; } }
@keyframes img_part1_2_2 {
  50% {
    transform: translate(0, 10px); } }
    #main .part .part1 .img_part1_2.boat.endAni {
      left: 520px;
      bottom: 259px;
      animation: img_part1_2_1_endAni 5s forwards;
      transform-origin: 0 0; }
@keyframes img_part1_2_1_endAni {
  /*30% {
    transform: translate(0,0);
  }*/
  100% {
    left: 1320px;
    bottom: 289px;
    opacity: 0; } }
  #main .part .part1 .lantern_left {
    width: 90px;
    top: 60px;
    left: 140px; }
    #main .part .part1 .lantern_left.startAni {
      animation: img_part1_lantern_left_startAni_1 1.2s forwards,img_part1_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
@keyframes img_part1_lantern_left_startAni_1 {
  0% {
    top: -112px; }
  100% {
    top: 60px; } }
@keyframes img_part1_lantern_left_startAni_2 {
  50% {
    transform: rotate(8deg); } }
    #main .part .part1 .lantern_left.endAni {
      animation: img_part1_lantern_left_endAni_1 1.2s forwards;
      animation-delay: 1.8s; }
@keyframes img_part1_lantern_left_endAni_1 {
  0% {
    top: 60px; }
  100% {
    top: -741px;
    opacity: 0; } }
  #main .part .part1 .lantern_right {
    width: 90px;
    top: 60px;
    right: 140px; }
    #main .part .part1 .lantern_right.startAni {
      animation: img_part1_lantern_left_startAni_1 1.2s forwards,img_part1_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
    #main .part .part1 .lantern_right.endAni {
      animation: img_part1_lantern_left_endAni_1 1.2s forwards;
      animation-delay: 1.8s; }
  #main .part .part1 .screen .left_container {
    position: absolute;
    width: 365px;
    height: 544px;
    top: -544px;
    left: 164px; }
    #main .part .part1 .screen .left_container.startAni {
      animation: img_part1_left_container_begin 2s forwards;
      animation-delay: 1s; }
@keyframes img_part1_left_container_begin {
  100% {
    top: 268px; } }
    #main .part .part1 .screen .left_container.endAni {
      animation: part1_left_container_endAni 2s forwards;
      top: 268px; }
@keyframes part1_left_container_endAni {
  0% {
    top: 268px; }
  100% {
    top: -544px; } }
    #main .part .part1 .screen .left_container:before {
      display: none;
      position: absolute;
      content: '';
      background: black;
      width: 1px;
      height: 500px;
      top: -300px;
      left: 50px; }
    #main .part .part1 .screen .left_container:after {
      display: none;
      position: absolute;
      content: '';
      background: black;
      width: 1px;
      height: 500px;
      top: -400px;
      right: 50px; }
  #main .part .part1 .screen .left {
    width: 365px;
    height: 544px;
    -webkit-mask-image: url("../images/mask_left.png");
    background: linear-gradient(to bottom, black, #06164c); }
    #main .part .part1 .screen .left .img_part1_8 {
      width: 343px;
      top: 105px;
      left: 30px;
      animation-delay: 2s; }
    #main .part .part1 .screen .left .img_part1_6 {
      width: 294px;
      left: -294px;
      bottom: 0;
      animation: img_part1_6_1 4s forwards,img_part1_6_2 5s infinite;
      animation-delay: 2s;
      transform-origin: 0 0; }
@keyframes img_part1_6_1 {
  100% {
    left: 150px;
    bottom: 329px; } }
@keyframes img_part1_6_2 {
  50% {
    transform: translate(0, 10px); } }
    #main .part .part1 .screen .left .cloud1 {
      width: 106px;
      bottom: 77px;
      left: -106px;
      animation: img_part1_cloud1 6s infinite linear; }
@keyframes img_part1_cloud1 {
  100% {
    left: 465px; } }
    #main .part .part1 .screen .left .cloud2 {
      width: 96px;
      bottom: 107px;
      left: -106px;
      animation: img_part1_cloud1 6s infinite linear;
      animation-delay: 4s; }
    #main .part .part1 .screen .left .cloud3 {
      width: 76px;
      bottom: 157px;
      left: -106px;
      animation: img_part1_cloud1 6s infinite linear;
      animation-delay: 2s;
      opacity: 0.8; }
  #main .part .part1 .screen .right_container {
    position: absolute;
    width: 365px;
    height: 544px;
    top: -544px;
    right: 180px; }
    #main .part .part1 .screen .right_container.startAni {
      animation: img_part1_right_container_begin 2s forwards;
      animation-delay: 1.5s; }
@keyframes img_part1_right_container_begin {
  100% {
    top: 268px; } }
    #main .part .part1 .screen .right_container.endAni {
      top: 268px;
      animation: part1_right_container_endAni 2s forwards;
      animation-delay: 0.5s; }
@keyframes part1_right_container_endAni {
  0% {
    top: 268px; }
  100% {
    top: -544px; } }
  #main .part .part1 .screen .right {
    width: 365px;
    height: 544px;
    -webkit-mask-image: url("../images/mask_right.png");
    background: linear-gradient(to bottom, black, #06164c); }
    #main .part .part1 .screen .right .img_part1_8 {
      width: 343px;
      top: 105px;
      right: 40px;
      animation-delay: 3s; }
    #main .part .part1 .screen .right .img_part1_7 {
      width: 294px;
      right: -294px;
      bottom: 0;
      animation: img_part1_7_1 4s forwards, img_part1_7_2 5s infinite;
      animation-delay: 4s;
      transform-origin: 0 0; }
@keyframes img_part1_7_1 {
  100% {
    right: 150px;
    bottom: 329px; } }
@keyframes img_part1_7_2 {
  50% {
    transform: translate(0, 10px); } }
    #main .part .part1 .screen .right .cloud1 {
      width: 106px;
      bottom: 77px;
      right: -106px;
      animation: img_part1_cloud2 6s infinite linear; }
@keyframes img_part1_cloud2 {
  100% {
    right: 465px; } }
    #main .part .part1 .screen .right .cloud2 {
      width: 96px;
      bottom: 107px;
      right: -106px;
      animation: img_part1_cloud2 6s infinite linear;
      animation-delay: 4s; }
    #main .part .part1 .screen .right .cloud3 {
      width: 76px;
      bottom: 157px;
      right: -106px;
      animation: img_part1_cloud2 6s infinite linear;
      animation-delay: 2s;
      opacity: 0.8; }
  #main .part .part1 .img_part1_1 {
    width: 388px;
    right: -70px;
    bottom: 40px;
    animation: img_part1_1 5s infinite; }
@keyframes img_part1_1 {
  50% {
    transform: translate(0, 10px); } }
  #main .part .part1 .img_part1_9 {
    width: 279px;
    bottom: 185px;
    left: 404px;
    opacity: 0;
    animation: img_part1_9 1s forwards;
    animation-delay: 1s;
    /*transform: rotateX(90DEG);
    transform-origin: 50% 100%;
    @keyframes img_part1_9 {
      100% {
        transform: translateZ(20px) rotateX(0);
      }*/ }
@keyframes img_part1_9 {
  100% {
    opacity: 1; } }
  #main .part .part1 .img_part1_10 {
    width: 215px;
    left: 900px;
    bottom: 157px;
    opacity: 0;
    animation: img_part1_9 1s forwards;
    animation-delay: 1.5s; }
  #main .part .part1 .img_part1_11 {
    width: 273px;
    left: 1268px;
    bottom: 185px;
    opacity: 0;
    animation: img_part1_9 1s forwards;
    animation-delay: 2s; }
  #main .part .part2 .img_part2_6 {
    width: 492px;
    left: -20px;
    bottom: 233px;
    animation: part2_6 15s infinite linear; }
@keyframes part2_6 {
  0% {
    left: -500px;
    bottom: 233px;
    transform: scale(1, 1);
    opacity: 1; }
  100% {
    left: 1980px;
    bottom: 633px;
    transform: scale(0.2, 0.2);
    opacity: 0.2; } }
  #main .part .part2 .img_part1_5 {
    width: 220px;
    right: -220px;
    top: 886px;
    animation: img_part2_1_5_1 5s forwards,img_part1_5_2 4s infinite; }
@keyframes img_part2_1_5_1 {
  100% {
    opacity: 1;
    top: 186px;
    right: 64px; } }
  #main .part .part2 .screen .middle {
    position: absolute;
    width: 1593px;
    height: 761px;
    top: -40px;
    left: 158px;
    -webkit-mask-image: url("../images/mask_middle.png"); }
    #main .part .part2 .screen .middle.startAni {
      animation: part2_middle_startAni 1s forwards; }
@keyframes part2_middle_startAni {
  100% {
    top: 40px; } }
    #main .part .part2 .screen .middle.endAni {
      top: 40px;
      height: 761px;
      animation: part1_middle_endAni 2s forwards;
      animation-delay: 1s; }
    #main .part .part2 .screen .middle .img_top {
      width: 1593px;
      top: 0;
      left: 0; }
    #main .part .part2 .screen .middle .box {
      position: absolute;
      width: 816px;
      height: 670px;
      left: 360px;
      top: 70px;
      animation-duration: 2s; }
      #main .part .part2 .screen .middle .box .img_part2_1 {
        width: 100%;
        height: 681px;
        overflow: hidden; }
        #main .part .part2 .screen .middle .box .img_part2_1 .img_part2_3 {
          width: 100%;
          right: 0;
          top: -688px; }
          #main .part .part2 .screen .middle .box .img_part2_1 .img_part2_3.rain1 {
            animation: img_part2_3 8s infinite linear;
            animation-delay: 4s; }
@keyframes img_part2_3 {
  100% {
    top: 588px; } }
          #main .part .part2 .screen .middle .box .img_part2_1 .img_part2_3.rain2 {
            animation: img_part2_3 8s infinite linear; }
        #main .part .part2 .screen .middle .box .img_part2_1 .img_part2_2 {
          width: 723px;
          right: 0;
          bottom: -90px; }
        #main .part .part2 .screen .middle .box .img_part2_1 .img_part1_3 {
          top: 50px;
          left: 80px;
          width: 213px; }
        #main .part .part2 .screen .middle .box .img_part2_1 .img_part1_7 {
          width: 323px;
          top: 850px;
          left: 730px;
          opacity: 0;
          animation: img_part2_1_7_1 5s forwards,img_part1_5_2 4s infinite;
          animation-delay: 2s; }
@keyframes img_part2_1_7_1 {
  100% {
    opacity: 1;
    top: 250px;
    left: 130px; } }
        #main .part .part2 .screen .middle .box .img_part2_1 .more {
          position: absolute;
          bottom: 60px;
          font-size: 20px;
          left: 690px; }
          #main .part .part2 .screen .middle .box .img_part2_1 .more a {
            color: white; }
        #main .part .part2 .screen .middle .box .img_part2_1 .swiper {
          position: absolute;
          width: 500px;
          bottom: 100px;
          left: 250px;
          height: 332px;
          overflow: hidden; }
          #main .part .part2 .screen .middle .box .img_part2_1 .swiper .swiper-slide {
            background: linear-gradient(to right, rgba(190, 190, 190, 0.6), rgba(255, 255, 255, 0.6), rgba(190, 190, 190, 0.6));
            font-size: 22px;
            line-height: 55px;
            border-radius: 10px;
            text-align: center; }
            #main .part .part2 .screen .middle .box .img_part2_1 .swiper .swiper-slide a {
              color: white;
              text-shadow: 0 0 5px #0b163c; }
            #main .part .part2 .screen .middle .box .img_part2_1 .swiper .swiper-slide:hover a {
              color: #ffc96a; }
  #main .part .part2 .lantern_left {
    width: 90px;
    top: -112px;
    left: 140px; }
    #main .part .part2 .lantern_left.startAni {
      animation: img_part2_lantern_left_startAni_1 1s forwards,img_part2_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
@keyframes img_part2_lantern_left_startAni_1 {
  0% {
    top: -20px; }
  100% {
    top: 60px; } }
@keyframes img_part2_lantern_left_startAni_2 {
  50% {
    transform: rotate(8deg); } }
    #main .part .part2 .lantern_left.endAni {
      animation: img_part2_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
@keyframes img_part2_lantern_left_endAni_1 {
  0% {
    top: 60px; }
  100% {
    top: -20px;
    opacity: 0; } }
  #main .part .part2 .lantern_right {
    width: 90px;
    top: 60px;
    right: 140px; }
    #main .part .part2 .lantern_right.startAni {
      animation: img_part2_lantern_left_startAni_1 1s forwards,img_part1_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
    #main .part .part2 .lantern_right.endAni {
      animation: img_part2_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
  #main .part .part2 .img_part2_4 {
    width: 274px;
    top: -660px;
    left: 278px; }
    #main .part .part2 .img_part2_4.startAni {
      animation: img_part2_4_startAni_1 2s forwards;
      animation-delay: 0.5s; }
@keyframes img_part2_4_startAni_1 {
  0% {
    top: -660px; }
  100% {
    top: 195px; } }
    #main .part .part2 .img_part2_4.endAni {
      animation: img_part2_lantern_left_endAni_1 2s forwards; }
@keyframes img_part2_lantern_left_endAni_1 {
  0% {
    top: 195px; }
  100% {
    top: -660px; } }
  #main .part .part2 .img_part2_5 {
    width: 274px;
    top: -660px;
    right: 318px; }
    #main .part .part2 .img_part2_5.startAni {
      animation: img_part2_4_startAni_1 2s forwards;
      animation-delay: 1s; }
    #main .part .part2 .img_part2_5.endAni {
      animation: img_part2_lantern_left_endAni_1 2s forwards;
      animation-delay: 0.5s; }
  #main .part .part2 .img_part2_10 {
    width: 269px;
    bottom: 225px;
    left: 314px;
    animation: img_part2_10 1s forwards;
    animation-delay: 0.5s;
    opacity: 0; }
@keyframes img_part2_10 {
  100% {
    opacity: 1; } }
  #main .part .part2 .img_part2_11 {
    width: 179px;
    bottom: 185px;
    left: 654px;
    animation: img_part2_10 1s forwards;
    animation-delay: 1s;
    opacity: 0; }
  #main .part .part2 .img_part2_12 {
    width: 277px;
    bottom: 185px;
    left: 904px;
    animation: img_part2_10 1s forwards;
    animation-delay: 1.5s;
    opacity: 0; }
  #main .part .part2 .img_part2_13 {
    width: 203px;
    bottom: 225px;
    left: 1404px;
    animation: img_part2_10 1s forwards;
    animation-delay: 2s;
    opacity: 0; }
  #main .part .part2 .img_part2_9 {
    width: 102px;
    bottom: -10px;
    left: 137px;
    opacity: 0;
    animation: img_part2_7_1 2s forwards; }
  #main .part .part2 .img_part2_7 {
    width: 164px;
    bottom: 0;
    left: 0;
    animation: img_part2_7_1 2s forwards,img_part2_7_2 4s infinite;
    opacity: 0;
    transform-origin: 50% 100%; }
@keyframes img_part2_7_1 {
  100% {
    opacity: 1; } }
@keyframes img_part2_7_2 {
  50% {
    transform: rotate(5deg); } }
  #main .part .part2 .img_part2_8 {
    width: 164px;
    bottom: -10px;
    right: 30px;
    animation: img_part2_7_1 2s forwards,img_part2_7_2 4s infinite;
    opacity: 0;
    transform-origin: 50% 100%; }
  #main .part .part3 .screen {
    position: absolute;
    width: 1183px;
    top: 19px;
    left: 383px; }
    #main .part .part3 .screen.startAni {
      animation: img_part3_screen_startAni 2s forwards; }
@keyframes img_part3_screen_startAni {
  0% {
    top: -1183px; }
  100% {
    top: 19px; } }
    #main .part .part3 .screen.endAni {
      animation: img_part3_screen_endAni 2s forwards;
      animation-delay: 1s; }
@keyframes img_part3_screen_endAni {
  0% {
    top: 19px; }
  100% {
    top: -1183px; } }
    #main .part .part3 .screen .img_part3_1 {
      width: 100%; }
      #main .part .part3 .screen .img_part3_1 .swiper {
        position: absolute;
        width: 825px;
        bottom: 200px;
        left: 180px;
        height: 442px;
        overflow: hidden; }
        #main .part .part3 .screen .img_part3_1 .swiper .swiper-slide {
          position: relative;
          width: 191px;
          height: 442px; }
          #main .part .part3 .screen .img_part3_1 .swiper .swiper-slide .img_part3_8 {
            position: absolute;
            width: 191px;
            height: 442px;
            left: 50%;
            margin-left: -95px; }
          #main .part .part3 .screen .img_part3_1 .swiper .swiper-slide a {
            position: absolute;
            top: 200px;
            left: 50%;
            height: 182px;
            font-family: '楷体', serif;
            font-size: 22px;
            line-height: 35px;
            transform: translateX(-50%);
            writing-mode: vertical-rl;
            writing-mode: tb-rl;
            color: #323232; }
      #main .part .part3 .screen .img_part3_1 .more {
        position: absolute;
        font-size: 28px;
        top: 215px;
        right: 100px; }
        #main .part .part3 .screen .img_part3_1 .more a {
          color: #053f91; }
  #main .part .part3 .lantern_left {
    width: 146px;
    top: 155px;
    left: 312px;
    transform-origin: 50% 0;
    transform: rotate(-8deg); }
    #main .part .part3 .lantern_left.startAni {
      animation: img_part3_lantern_left_startAni_1 2s forwards,img_part3_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
@keyframes img_part3_lantern_left_startAni_1 {
  0% {
    top: -1009px; }
  100% {
    top: 155px; } }
@keyframes img_part3_lantern_left_startAni_2 {
  50% {
    transform: rotate(8deg); } }
    #main .part .part3 .lantern_left.endAni {
      animation: img_part3_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
@keyframes img_part3_lantern_left_endAni_1 {
  0% {
    top: 155px; }
  100% {
    top: -1009px;
    opacity: 0; } }
  #main .part .part3 .lantern_right {
    width: 146px;
    top: 155px;
    right: 282px;
    transform-origin: 50% 0;
    transform: rotate(-8deg); }
    #main .part .part3 .lantern_right.startAni {
      animation: img_part3_lantern_left_startAni_1 2s forwards,img_part3_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
    #main .part .part3 .lantern_right.endAni {
      animation: img_part3_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
  #main .part .part3 .img_part3_2 {
    width: 300px;
    top: -527px;
    left: 225px; }
    #main .part .part3 .img_part3_2.startAni {
      animation: img_part3_2_startAni 2s forwards;
      animation-delay: 1s; }
@keyframes img_part3_2_startAni {
  100% {
    top: 331px; } }
    #main .part .part3 .img_part3_2.endAni {
      animation: img_part3_2_endAni_1 2s forwards; }
@keyframes img_part3_2_endAni_1 {
  0% {
    top: 331px; }
  100% {
    top: -527px; } }
  #main .part .part3 .img_part3_3 {
    width: 300px;
    top: -527px;
    right: 172px; }
    #main .part .part3 .img_part3_3.startAni {
      animation: img_part3_2_startAni 2s forwards;
      animation-delay: 1.5s; }
    #main .part .part3 .img_part3_3.endAni {
      animation: img_part3_2_endAni_1 2s forwards;
      animation-delay: 0.5s; }
  #main .part .part3 .img_part3_4 {
    width: 282px;
    top: 319px;
    left: 159px;
    animation: img_part3_4_1 2s forwards,img_part3_4_2 5s infinite;
    transform-origin: 50% 50%;
    transform: scale(0);
    animation-delay: 2s; }
@keyframes img_part3_4_1 {
  100% {
    transform: scale(1); } }
@keyframes img_part3_4_2 {
  50% {
    transform: translate(15px, 0);
    opacity: 0.8; } }
  #main .part .part3 .img_part3_5 {
    width: 282px;
    top: 319px;
    right: 119px;
    animation: img_part3_4_1 2s forwards,img_part3_4_2 5s infinite;
    transform-origin: 50% 50%;
    transform: scale(0);
    animation-delay: 3s; }
  #main .part .part3 .img_part3_6 {
    width: 410px;
    bottom: 116px;
    left: 409px;
    animation: img_part3_6 1s forwards;
    opacity: 0;
    animation-delay: 0.5s;
    z-index: 50; }
@keyframes img_part3_6 {
  100% {
    opacity: 1; } }
  #main .part .part3 .img_part3_7 {
    width: 236px;
    bottom: 176px;
    right: 356px;
    animation: img_part3_6 1s forwards;
    opacity: 0;
    animation-delay: 1s;
    z-index: 50; }
@keyframes img_part3_6 {
  100% {
    opacity: 1; } }
  #main .part .part4 .img_part4_5 {
    width: 255px;
    top: 172px;
    right: 75px;
    animation: img_part4_5_1 2s forwards,img_part4_5_2 4s infinite;
    transform-origin: 50% 50%;
    transform: rotate(0);
    animation-delay: 2s;
    opacity: 0; }
@keyframes img_part4_5_1 {
  0% {
    right: 255px; }
  100% {
    opacity: 1;
    right: 75px; } }
@keyframes img_part4_5_2 {
  50% {
    opacity: 1;
    transform: translate(10px, 5px); } }
  #main .part .part4 .img_part4_6 {
    width: 522px;
    top: 138px;
    left: 0;
    animation: img_part4_6_1 2s forwards,img_part4_6_2 5s infinite;
    transform-origin: 100% 100%;
    transform: rotate(0);
    animation-delay: 2s;
    opacity: 0; }
@keyframes img_part4_6_1 {
  0% {
    left: 522px; }
  100% {
    opacity: 1;
    left: 0; } }
@keyframes img_part4_6_2 {
  50% {
    opacity: 1;
    transform: rotate(5deg); } }
  #main .part .part4 .screen {
    position: absolute;
    width: 1214px;
    height: 974px;
    overflow: hidden;
    top: 19px;
    left: 383px; }
    #main .part .part4 .screen.startAni {
      animation: img_part4_screen_startAni 2s forwards; }
@keyframes img_part4_screen_startAni {
  0% {
    top: -1183px; }
  100% {
    top: 19px; } }
    #main .part .part4 .screen.endAni {
      animation: img_part4_screen_endAni 2s forwards;
      animation-delay: 1s; }
@keyframes img_part4_screen_endAni {
  0% {
    top: 19px; }
  100% {
    top: -1183px; } }
    #main .part .part4 .screen .img_part4_8 {
      width: 1110px;
      bottom: 40px; }
    #main .part .part4 .screen .img_part4_2 {
      width: 239px;
      top: 220px;
      right: 350px; }
    #main .part .part4 .screen .img_part4_7 {
      width: 1049px;
      bottom: 280px;
      left: 65px;
      mix-blend-mode: lighten; }
    #main .part .part4 .screen .img_part4_1 {
      width: 100%; }
  #main .part .part4 .lantern_left {
    width: 81px;
    top: 155px;
    left: 342px; }
    #main .part .part4 .lantern_left.startAni {
      animation: img_part4_lantern_left_startAni_1 2s forwards,img_part4_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
@keyframes img_part4_lantern_left_startAni_1 {
  0% {
    top: -1009px; }
  100% {
    top: 155px; } }
@keyframes img_part4_lantern_left_startAni_2 {
  50% {
    transform: rotate(8deg); } }
    #main .part .part4 .lantern_left.endAni {
      animation: img_part4_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
@keyframes img_part4_lantern_left_endAni_1 {
  0% {
    top: 155px; }
  100% {
    top: -1009px; } }
  #main .part .part4 .lantern_right {
    width: 81px;
    top: 155px;
    right: 282px; }
    #main .part .part4 .lantern_right.startAni {
      animation: img_part4_lantern_left_startAni_1 2s forwards,img_part4_lantern_left_startAni_2 4s infinite;
      transform-origin: 50% 0;
      transform: rotate(-8deg); }
    #main .part .part4 .lantern_right.endAni {
      animation: img_part4_lantern_left_endAni_1 1s forwards;
      animation-delay: 1s; }
  #main .part .part4 .img_part4_3 {
    width: 317px;
    top: -526px;
    left: 275px; }
    #main .part .part4 .img_part4_3.startAni {
      animation: img_part4_3_startAni 2s forwards;
      animation-delay: 1s; }
@keyframes img_part4_3_startAni {
  100% {
    top: 364px; } }
    #main .part .part4 .img_part4_3.endAni {
      animation: img_part4_3_endAni 2s forwards; }
@keyframes img_part4_3_endAni {
  0% {
    top: 364px; }
  100% {
    top: -526px; } }
  #main .part .part4 .img_part4_4 {
    width: 317px;
    top: -526px;
    right: 202px; }
    #main .part .part4 .img_part4_4.startAni {
      animation: img_part4_3_startAni 2s forwards;
      animation-delay: 2s; }
    #main .part .part4 .img_part4_4.endAni {
      animation: img_part4_3_endAni 2s forwards;
      animation-delay: 0.5s; }
  #main .part .part4 .img_part4_9 {
    width: 273px;
    bottom: 221px;
    right: 355px; }
  #main .part .part4 .img_part4_10 {
    width: 239px;
    bottom: 186px;
    left: 351px; }
  #main .part .part4 .more {
    position: absolute;
    right: 385px;
    bottom: 196px;
    font-weight: bold;
    text-shadow: 0 0 5px #07133a;
    font-size: 21px; }
    #main .part .part4 .more a {
      color: #ffc96a; }
  #main .part .part4 ul.list li {
    position: absolute;
    width: 149px; }
    #main .part .part4 ul.list li .img_part4_15 {
      width: 100%;
      bottom: 0;
      left: 0; }
    #main .part .part4 ul.list li .name {
      position: absolute;
      border-bottom: 30px;
      width: 200px;
      text-align: center;
      left: 50%;
      margin-left: -100px;
      font-size: 20px;
      color: #ffc96a;
      text-shadow: 0 0 5px #07133a;
      font-weight: bold;
      letter-spacing: 3px; }
    #main .part .part4 ul.list li:nth-child(1) {
      left: 583px;
      bottom: 220px; }
      #main .part .part4 ul.list li:nth-child(1) .img_part4_11 {
        width: 202px;
        bottom: 0;
        left: -60px;
        animation: img_part4_11 2s forwards,img_part4_11_2 6s infinite;
        transform: scale(0, 0);
        opacity: 0;
        transform-origin: 65% 100%;
        animation-delay: 1.5s; }
@keyframes img_part4_11 {
  0% {
    transform: scale(0, 0); }
  100% {
    opacity: 1;
    transform: scale(1, 1); } }
@keyframes img_part4_11_2 {
  0% {
    transform: scale(1, 1); }
  25% {
    transform: scale(0.5, 0.5); }
  50% {
    transform: scale(1, 1); } }
    #main .part .part4 ul.list li:nth-child(2) {
      left: 817px;
      bottom: 180px; }
      #main .part .part4 ul.list li:nth-child(2) .img_part4_12 {
        width: 150px;
        bottom: 5px;
        animation: img_part4_11 1s forwards,img_part4_11_2 6s infinite;
        transform: scale(0, 0);
        opacity: 0;
        transform-origin: 50% 100%;
        animation-delay: 2s; }
    #main .part .part4 ul.list li:nth-child(3) {
      left: 989px;
      bottom: 258px; }
      #main .part .part4 ul.list li:nth-child(3) .img_part4_13 {
        width: 255px;
        bottom: 5px;
        left: -10px;
        animation: img_part4_11 1s forwards,img_part4_11_2 6s infinite;
        transform: scale(0, 0);
        opacity: 0;
        transform-origin: 50% 100%;
        animation-delay: 2.5s; }
    #main .part .part4 ul.list li:nth-child(4) {
      left: 1185px;
      bottom: 196px; }
      #main .part .part4 ul.list li:nth-child(4) .img_part4_14 {
        width: 252px;
        bottom: -12px;
        left: -20px;
        animation: img_part4_11 1s forwards,img_part4_11_2 6s infinite;
        transform: scale(0, 0);
        opacity: 0;
        transform-origin: 60% 100%;
        animation-delay: 3s; }

.btn_list {
  position: fixed;
  top: 10vh;
  width: 317px; }
  .btn_list li {
    position: relative;
    margin-bottom: 50px;
    cursor: pointer; }
    .btn_list li .animate {
      position: absolute;
      width: 0;
      top: 37px;
      left: 57px;
      height: 68px;
      overflow: hidden; }
      .btn_list li .animate div {
        position: absolute;
        right: 0;
        width: 257px; }
    .btn_list li:hover .animate {
      animation: menu 1.5s forwards; }
@keyframes menu {
  100% {
    width: 257px; } }
    .btn_list li .icon {
      position: relative; }

#music_btn {
  position: absolute;
  right: 20px;
  top: 20px; }
  #music_btn img {
    cursor: pointer; }

/*# sourceMappingURL=stage.css.map */