.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 10;
  text-align: center;
  padding-top:45%;
  background: #040115;
}
.loading span {
  display: block;
  color: #524f65;
  font-size: 16px;
  margin-top:20px;
}
img{display:block;margin:0 auto;max-width:100%;}
.pop-icon {
  height: 50px;
  padding: 9px 8px 9px 16px;
  border-radius: 50px 0 0 50px;
  background-color: #31a097;
  position: absolute;
  top: 26%;
  right: 0;
  z-index: 1;
  opacity: 0.7;
}
.pop-icon span {
  width: 32px;
  display: block;
  line-height: 18px;
  color: #fff;
  font-size: 16px;
}

@-webkit-keyframes moveIconUp {
  0% {
    -webkit-transform: translateY(100%) scale(1.2, 1.2);
    opacity: 0
  }
  50% {
    -webkit-transform: translateY(0%) scale(0.6, 0.6);
    opacity: 1
  }
  100% {
    -webkit-transform: translateY(-100%) scale(0.2, 0.2);
    opacity: 0
  }
}
.swiper-arrow {
  position: absolute;
  width: 46px;
  height: 25px;
  z-index: 1;
  left: 50%;
  margin-left: -23px;
  bottom: 50px;
}
.swiper-arrow span{background: url(../images/arrow.png) no-repeat center bottom;background-size: contain;width: 46px;
  height:45px;
  display: block;
  -webkit-animation: moveIconUp 1.5s ease infinite;
  animation: moveIconUp 1.5s ease infinite}
.c1_0{-webkit-animation:bi1 29s both infinite;animation:bi1 29s both infinite;display:block;position:absolute;top:-800px;width:500px;height:800px;left:0;}
.c2_0{-webkit-animation:bi 36s both infinite;animation:bi 37s both infinite;animation-delay:2s;-webkit-animation-delay:2s;display:block;position:absolute;top:-800px;width:500px;right:0;}
.b1_0{-webkit-animation:bi 48s both infinite;animation:bi 48s both infinite;animation-delay:2s;-webkit-animation-delay:2s;display:block;position:absolute;top:-800px;width:640px;}
.b2_0{-webkit-animation:bi1 34s both infinite;animation:bi1 34s both infinite;display:block;position:absolute;top:-800px;width:640px;}
@-webkit-keyframes bi{0%{top:1200px;};50%{top:0};100%{top:-800px}}
@keyframes bi{0%{top:1200px;};50%{top:0};100%{top:-800px;}}
@-webkit-keyframes bi1{0%{top:0};100%{top:-800px;}}
@keyframes bi1{0%{top:0};100%{top:-800px}}

body{background: #000 url(../images/bg.png?vs=1.0) no-repeat center;background-size: 100%;}
.swiper-slide{color:#fff; font-size:16px; padding:120px 20px 0; box-sizing:border-box;overflow: hidde}
.swiper-slide p{margin-bottom:6px;line-height: 22px; display:none;}
.swiper-slide span{color:#16e1ff;}
.swiper-slide span.num,.swiper-slide span.big{font-size:30px;}
.swiper-slide.swiper-slide-active .img-2{}
.page-3 {width: 100%;height: 100%;position: relative;}
.page-1{}
.img-4{width:100%;position:absolute;bottom:0;left:0;}
.img-3{width:60%;position:absolute;bottom:40px;left:20%;}
.page-3 p,.page-2 p{padding-left:10%;}
.page-10 p{margin-left:30%;}
.page-7,.page-11,.page-13{ margin-top: -20px; }
.page-4{ margin-top: -50px;}
.animated.delay-03s {
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s;
}
.animated.delay-6s {
  -webkit-animation-delay:0.6s;
  animation-delay:0.6s;
}
.animated.delay-13s {
  -webkit-animation-delay:1.3s;
  animation-delay:1.3s;
}
.animated.delay-16s {
  -webkit-animation-delay:1.6s;
  animation-delay:1.6s;
}
.animated.delay-23s {
  -webkit-animation-delay:2.3s;
  animation-delay:2.3s;
}
.animated.delay-26s {
  -webkit-animation-delay:2.6s;
  animation-delay:2.6s;
}
.animated.delay-33s {
  -webkit-animation-delay:3.3s;
  animation-delay:3.3s;
}
.animated.delay-36s {
  -webkit-animation-delay:3.6s;
  animation-delay:3.6s;
}
.animated.delay-4s {
  -webkit-animation-delay:4s;
  animation-delay:4s;
}

	
.tu1{position:absolute;right:5%;bottom:5%;width:38%;-webkit-animation:shans 3s infinite;animation:shans 3s infinite;}
.tu2{position:absolute;top:50%;margin-top:-110px;-webkit-animation:shans 3s infinite;animation:shans 3s infinite;}	
.tu3{position:absolute;top:50%;margin-top:-70px;-webkit-animation:shans 3s infinite;animation:shans 3s infinite;}	
.tu4{position:absolute;top:50%;margin-top:-100px;-webkit-animation:shans 3s infinite;animation:shans 3s infinite;width: 75%;left: 20%;}	
.tu5{position:absolute;top:50%;margin-top:-40px;-webkit-animation:shans 3s infinite;animation:shans 3s infinite;}	
.tu6{position:absolute;top:50%;margin-top:-100px;-webkit-animation:shans 4s infinite;animation:shans 4s infinite;width: 50%;left:40%;}	
	
	
@keyframes shans{0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;}
25%{transform:scale(0.9);-webkit-transform:scale(0.9);opacity:0.8};
50%{transform:scale(1);-webkit-transform:scale(1);opacity:1};
75%{transform:scale(0.9);-webkit-transform:scale(0.9);opacity:0.8};
100%{transform:scale(1);-webkit-transform:scale(1);opacity:1};}
@-webkit-keyframes shans{0%{transform:scale(1);-webkit-transform:scale(1);opacity:1;}
25%{transform:scale(0.9);-webkit-transform:scale(0.9);opacity:0.8};
50%{transform:scale(1);-webkit-transform:scale(1);opacity:1};
75%{transform:scale(0.9);-webkit-transform:scale(0.9);opacity:0.8};
100%{transform:scale(1);-webkit-transform:scale(1);opacity:1};}

.page-1 .title{position:relative;top:-30px;width:177px;height:177px;background-size:177px 177px;margin:0 auto; }
.img-1{display:none;position:absolute;top:50%;margin-top:-70px;opacity:0;}
.img-2{display:none;position:absolute;top:50%;margin-top:-110px;opacity:0;}
.swiper-slide-active .img-1,.swiper-slide-active .img-2{display:block;opacity:1;}
.banner{margin-bottom:20px;position: relative;margin-top:0;}
.banner2, .banner3{position:absolute;top:0;}
.swiper-slide-active .banner{-webkit-animation-name:heartBeat1;animation-name:heartBeat1;}
.swiper-slide .banner3{opacity:0;}
/**.swiper-slide-active .banner3{-webkit-animation:fadeIn 1s;animation:fadeIn 1s;-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}**/
.swiper-slide-active .banner1, .swiper-slide-active .banner3{-webkit-animation:opc 2s infinite;animation:opc 2s infinite;}
.swiper-slide-active .banner3{-webkit-animation-delay:0.23s;animation-delay: 0.23s;}

.page-8 p{text-align:left;padding:15px 0;line-height:23px;}
.erweima{opacity:0;width:40%;}
.swiper-slide-active .erweima{-webkit-animation-name:fadeIn;animation-name:fadeIn;animation-fill-mode: forwards;-webkit-animation-fill-mode:forwards;}
.swiper-slide p.more{background:rgba(0, 0, 0, 0.2);width:55%;margin:40px auto;padding:5px;}
.more a{display:block;border:1px solid #fff;border-radius:10px;text-align:center;padding:10px 0;color:fff;font-size:18px;line-height:30px;text-decoration:none;}
.qw span{display:block;width:40%;margin:0 auto;text-align:center;color:#fff;border:1px solid #16e1ff;padding: 15px 0;border-radius: 10px;font-size: 22px;}
.pop{display:none;position: absolute;top: 0;width: 100%;height: 100%;z-index: 100;overflow-y:auto;-webkit-overflow-scrolling: touch;background: #153a79;}

.pop img{width:80%;margin:20px auto;}
.pop img.close{width: 60px;display: block;position: fixed;right: 0;top: 20px;}

#my_tu{min-height:50%;width:90%;opacity:1;}
#my_tu .swiper-slide{width:75%;height:100%;padding: 0;position: relative;overflow: hidden;outline: none;}

.swiper-container-3d .swiper-slide-shadow-right{background-image:none;}
.swiper-container-3d .swiper-slide-shadow-left{background-image: linear-gradient(to right,rgba(0, 0, 0, 0.22),rgba(0,0,0,0));}
.swiper-slide .page-2-1 p{margin-bottom:0px;line-height:20px;}	
#my_tu .swiper-slide.swiper-slide-next p, #my_tu .swiper-slide.swiper-slide-prev p{opacity:0.3;}

.weigh{font-weight: bold;font-size: 16px;}
.weigh1{font-weight: bold;}
@keyframes opc {
0% {opacity:0.9;}
50% {opacity:0.1;}
100%{opacity:1;}
}
@keyframes opc {
0% {opacity:0.9;}
50% {opacity:0.1;}
100%{opacity:1;}
}
@keyframes heartBeat1 {
0% {-webkit-transform: scale(0);transform: scale(0);}
14% {-webkit-transform: scale(1.3);transform: scale(1.3);}
28% {-webkit-transform: scale(1);transform: scale(1);}
42% {-webkit-transform: scale(1.3);transform: scale(1.3);}
70%{-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes heartBeat1 {
0% {-webkit-transform: scale(0);transform: scale(0);}
14% {-webkit-transform: scale(1.3);transform: scale(1.3);}
28% {-webkit-transform: scale(1);transform: scale(1);}
42% {-webkit-transform: scale(1.3);transform: scale(1.3);}
70%{-webkit-transform: scale(1);transform: scale(1);}
}
.ctxt{
  width:100%;
  height:50%;
  margin:0 auto;
  position:relative;
}
.ctxt div{
  position:absolute;
  left:150%;
    width:500px;
  color:#fff; font-size:14px;
  margin:0;
  padding:0;
}
/********音乐*********/
/*背景音乐模块*/
.music {
    position: fixed; width: 30px; height: 30px; right: 5%; top: 3%;
    background-size: 100%; z-index: 4;
    background: url(../images/music.png) 0 0/contain no-repeat;
}
.music.pause {
    background-image: url(../images/music-mute.png?vs=1);
    opacity: 0.65;
}


/*流星*/
#stars {
    margin: 0 auto;
    max-width: 1600px;
    position: fixed;
    top: -300px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.star {
    display: block;
    width: 1px;
    background: transparent;
    position: relative;
    opacity: 0;
    /*过渡动画*/
    
    animation: star-fall 3s linear infinite;
    -webkit-animation: star-fall 3s linear infinite;
    -moz-animation: star-fall 3s linear infinite;
}
.star:after {
    content: '';
    display: block;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    /*变形*/
    
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    -webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
    -moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
    transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
}
@keyframes star-fall {
    0% {
        opacity: 0;
        transform: scale(0.5) translate3d(0, 0, 0);
        -webkit-transform: scale(0.5) translate3d(0, 0, 0);
        -moz-transform: scale(0.5) translate3d(0, 0, 0);
    }
    50% {
        opacity: 1;
        transform: translate3d(-200px, 200px, 0);
        -webkit-transform: translate3d(-200px, 200px, 0);
        -moz-transform: translate3d(-200px, 200px, 0);
    }
    100% {
        opacity: 0;
        transform: scale(1.2) translate3d(-300px, 300px, 0);
        -webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
        -moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
    }
}