@charset "UTF-8";
html{-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
html,body{width:100%;height:100%;margin:0 auto;padding:0;}
* {
    margin:0;
    padding:0;
    /*
    -webkit-user-select: none;
    -moz-user-select: -moz-none;*/
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:rgba(0, 0, 0, 0);
    -ms-touch-action:none;
    -webkit-touch-callout: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {overflow-x:hidden;-webkit-text-size-adjust:none;display:-webkit-box;-webkit-box-orient: vertical;-webkit-box-align:stretch;}
nav,content,header,footer{display: block;}
ul,ol,dl,li{padding: 0;margin: 0;list-style: none;}
a img {outline:none;border: 0;}
a{text-decoration: none;-webkit-tap-highlight-color: transparent;}
/**开始**/
html, body {position:relative;height:100%;width:100%;max-width:640px;}
body {background:#eee;font-size:14px;color:#000;margin:0;padding:0;}
img{display:block;margin:0 auto;max-width:90%;}


/***********loading**********/
.load{color:#fff;WIDTH:100%;height:100%;font-size:30px;display:flex;align-items:center;justify-content: center;background:#080f7d;position: absolute;top: 0;left: 0;z-index: 10;}
.wrap{width:100%; height:100%; position:relative;overflow: hidden;max-width: 640px;}
.page{overflow:hidden;width:100%;height:100%;background:url(../images/bg.png?V) no-repeat; background-size:100% 100%;}
.swiper-slide.swiper-slide-active .banner2{-webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;}
.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}}

#map_index{width:640px;height:1080px;position:absolute;bottom:0;left:0;}
.map3_2{width:100%;position:absolute;bottom:0;left: 5%;}
#map_index svg.map3_1_1{transition:opacity 2s ease-in-out 3s;-webkit-transition:opacity 2s ease-in-out 3s;opacity:0;}
#map_index .map3_2{opacity:0;max-width: 640px;}
#map_index .map3_2.map3_2_1{max-width: 640px;transition:opacity 2s ease-in-out 3s;-webkit-transition:opacity 2s ease-in-out 3s;opacity:1;}
.swiper-container {width: 100%;height: 100%;}
.swiper-slide{background-image:url(../images/bg.jpg);background-repeat:no-repeat;background-position: center center;background-size: 100% 100%;overflow: auto; -webkit-overflow-scrolling: touch;}
.map4{position:absolute;bottom:-25px;}

.t{display:block;margin:0 auto;}
.tu{display: -webkit-flex;display: flex;justify-content: center;}
.tu img{padding:0 10px;}
#tupian .swiper-slide{width:400px;height:430px;background: none;}
#tupian .swiper-slide p{text-align:center;color:#fff;font-size:30px;opacity:0;padding-top: 20px;line-height: 45px;}
#tupian .swiper-slide.swiper-slide-active p{animation:fadeIn 0.5s linear forwards;-webkit-animation:fadeIn 0.5s linear forwards;}
#tupian img{max-width:100%;}
/**http://m.21jingji.com/index.php/ts/set?id=dasha_1&num=1000**/
/**svg**/
#map_index_1>*{stroke-dasharray:1000,1000;stroke-dashoffset:1000;}
.swiper-slide.swiper-slide-active #map_index_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}

.swiper-slide.swiper-slide-active .img2-1{animation:flipInX 1s linear forwards;-webkit-animation:flipInX 1s linear forwards;}

.map3{position:absolute;bottom:0;}
#map3_1 #XMLID_1131_{stroke-dasharray:3900,3900;stroke-dashoffset:3900;}
.swiper-slide.swiper-slide-active #map3_1 #XMLID_1131_{animation: dash 7s linear forwards;-webkit-animation: dash 7s linear forwards;}
.swiper-slide.swiper-slide-active .img3-1,.swiper-slide.swiper-slide-active .img3-2, .swiper-slide.swiper-slide-active .img3-3{animation:flipInX 1s linear forwards;-webkit-animation:flipInX 1s linear forwards;}

#map4_1>*{stroke-dasharray:100,100;stroke-dashoffset:100;}
#map4_1 #XMLID_4_{stroke-dasharray:4600,4600;stroke-dashoffset:4600;}
#map4_1 line{stroke-dasharray:100,100;stroke-dashoffset:100;}
.swiper-slide.swiper-slide-active #map4_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}
.swiper-slide.swiper-slide-active .img4-2{animation:flipInX 1s linear forwards;-webkit-animation:flipInX 1s linear forwards;}
.img4-2{padding-top:50px;}

.map5{position:absolute;bottom:-25px;}
#map5_1>*{stroke-dasharray:300,300;stroke-dashoffset:300;}
#map5_1 #XMLID_1676_{stroke-dasharray:1100,1100;stroke-dashoffset:1100;}
#map5_1 #XMLID_321_{stroke-dasharray:440,440;stroke-dashoffset:440;}
.swiper-slide.swiper-slide-active #map5_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}
.img5-1{float:left;padding-left:30px;width:315px;opacity:0;padding-top: 20px;}
.img5-2{margin-left:315px;padding-top: 20px;    width: 293px;}
.swiper-slide.swiper-slide-active .img5-1{animation:fadeInLeftBig 1.5s linear forwards;-webkit-animation:fadeInLeftBig 1.5s linear forwards;}
.swiper-slide.swiper-slide-active .img5-2{animation:fadeInRightBig 1.5s linear forwards;-webkit-animation:fadeInRightBig 1.5s linear forwards;}



.map6{position:absolute;bottom:0;}
#map6_1>*{stroke-dasharray:300,300;stroke-dashoffset:300;}
#map6_1 #XMLID_1676_{stroke-dasharray:1100,1100;stroke-dashoffset:1100;}
#map6_1 #XMLID_321_{stroke-dasharray:440,440;stroke-dashoffset:440;}
.swiper-slide.swiper-slide-active #map6_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}
.swiper-slide.swiper-slide-active .img6-1{animation:flipInX 1s linear forwards;-webkit-animation:flipInX 1s linear forwards;}


.map7{position:absolute;bottom:0;}
#map7_1>*{stroke-dasharray:300,300;stroke-dashoffset:300;}
#map7_1 #XMLID_1676_{stroke-dasharray:1100,1100;stroke-dashoffset:1100;}
#map7_1 #XMLID_321_{stroke-dasharray:440,440;stroke-dashoffset:440;}
.swiper-slide.swiper-slide-active #map7_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}
.img7-1{padding-top:40px;}
.swiper-slide.swiper-slide-active .img7-1{animation:flipInX 1s linear forwards;-webkit-animation:flipInX 1s linear forwards;}


.map8{position:absolute;bottom:0;}
#map8_1>*{stroke-dasharray:300,300;stroke-dashoffset:300;}
#map8_1 #XMLID_1676_{stroke-dasharray:1100,1100;stroke-dashoffset:1100;}
#map8_1 #XMLID_321_{stroke-dasharray:440,440;stroke-dashoffset:440;}
.swiper-slide.swiper-slide-active #map8_1>*{animation: dash 3s linear forwards;-webkit-animation: dash 3s linear forwards;}
.swiper-slide.swiper-slide-active .img8-1{animation:fadeInLeftBig 1s linear forwards;-webkit-animation:fadeInLeftBig 1s linear forwards;}
.swiper-slide.swiper-slide-active .img8-2{animation:fadeInLeftBig 1.5s linear forwards;-webkit-animation:fadeInLeftBig 1.5s linear forwards;}
.swiper-slide.swiper-slide-active .img8-3{animation:fadeInLeftBig 2s linear forwards;-webkit-animation:fadeInLeftBig 2s linear forwards;}

.video_conver{width:90%;height:350px;margin:0 auto;}

@keyframes dash{to {stroke-dashoffset: 0;}}

.t10{padding: 50px 0;width:90%;}
.last{position:absolute;bottom:0;left:0;}
.img9-1{display:block;margin:30px auto;}
.img9-2{display: block;margin: 0 auto;padding:20px 0;padding-top: 50px;}
.test{width: 350px;height: 90px;margin:0 auto;position: relative;}
.test_img{width:350px;height:90px;position:absolute;left:0;top:0;}
.fave {width:50px;height:50px;position: relative;z-index:1;}
.fave.hover{background-image:;}
.zan{color:#d0bc06; text-align: center;font-size:34px;font-weight:bold;}
.add1{position: absolute;
    bottom: 20px;
    text-align: center;
    width: 40px;
    left: 50px;
    color: #d0bc06;
    font-weight: 700;font-size: 28px;}
@keyframes plus1{0%{top:0}30%{top:-5px}100%{top:-50px}}
@-webkit-keyframes plus1{0%{top:0}30%{top:-5px}100%{top:-50px}}
.vote{-webkit-animation:plus1 0.5s 1 linear;animation:plus1 0.5s 1 linear;}
.music {position: fixed;right: 20px;bottom:30px;z-index: 20;}
.music span{display: block;width:60px;height:60px;background: url(../images/music.png) no-repeat;background-size: 100% 100%;}
.music.mute span {background-image: url(../images/music-mute.png);opacity: 0.65;}

.lizi{width:100%;height:100%;overflow:hidden;position: absolute;bottom: 0;left: 0;}

.swiper-slide.swiper-slide-active .t2{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t3{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t4{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t5{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t6{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t7{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}

.swiper-slide.swiper-slide-active .t8{animation:fadeIn 1s linear forwards;-webkit-animation:fadeIn 1s linear forwards;}


/****/
@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}
@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}
@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}
@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}
@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}
@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) scale3d(.1, .1, .1) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(.1, .1, .1) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(0.8,0.8,0.8) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) scale3d(0.8,0.8,0.8) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) scale3d(2.2,2.2,2.2) rotate3d(0, 1, 0, 180deg);
    transform: perspective(400px) scale3d(2.2,2.2,2.2) rotate3d(0, 1, 0, 180deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(1.5,1.5,1.5) rotate3d(0, 1, 0, 270deg);
    transform: perspective(400px) scale3d(1.5,1.5,1.5) rotate3d(0, 1, 0, 270deg);
  }
  to {
    -webkit-transform: scale3d(1,1,1) perspective(400px);
    transform:scale3d(1,1,1) perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) scale3d(.1, .1, .1) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(.1, .1, .1) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(0.8,0.8,0.8) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) scale3d(0.8,0.8,0.8) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) scale3d(2.2,2.2,2.2) rotate3d(0, 1, 0, 180deg);
    transform: perspective(400px) scale3d(2.2,2.2,2.2) rotate3d(0, 1, 0, 180deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(1.5,1.5,1.5) rotate3d(0, 1, 0, 270deg);
    transform: perspective(400px) scale3d(1.5,1.5,1.5) rotate3d(0, 1, 0, 270deg);
  }
  to {
    -webkit-transform: scale3d(1,1,1) perspective(400px);
    transform:scale3d(1,1,1) perspective(400px);
  }
}