html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-background-origin:content-box;background-origin:content-box;}section,header,footer,nav{display:block;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}img{border:0;font-size:0}a{text-decoration:none;}
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}
html{
	-webkit-text-size-adjust:none;
}
*{
	-webkit-tap-highlight-color: transparent;
}
html,body{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}
body{
	text-align:justify;
	font-family:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",arial,Helvetica,sans-serif;
    background:black;
}
.jcontent{
    position: relative;
    width: 100%;
    height: 100%;
}
.jcontent .jcontent{
    left:50%;
    transform: translateX(-50%);
    transform: translateX(-50%);
}
.abso>div{
    position:absolute;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
}
.logo{
    background: url(../images/logo.png) center no-repeat;
    background-size: contain;
    height: 3.6%;
    top: 2%;
    width: 100%;
    position: absolute;
}
.p1_decor1{
    background: url(../images/p1_decor1.png) center no-repeat;
    background-size: contain;
    height: 40.5%;
    top: 40.5%;
    width: 100%;
    position: absolute;
}
.p1_decor3{
    background: url(../images/p1_decor2.png) center no-repeat;
    background-size: contain;
    height: 13.3%;
    top: 53%;
    left: -1%;
    width: 100%;
    position: absolute;
}
.p1_decor2{
    background: url(../images/p1_decor3.png) center no-repeat;
    background-size: contain;
    height: 27.3%;
    top: 45.5%;
    left: 0%;
    width: 100%;
    position: absolute;
}
.p1_decor4{
    background: url(../images/p1_decor4_bg.png) center no-repeat;
    background-size: contain;
    height: 26.3%;
    top: 29%;
    width: 100%;
    position: absolute;
}
.p1_decor4 div:nth-child(1){
    background: url(../images/p1_decor4.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
}
.p1_decor4 div:nth-child(2){
    background: url(../images/p1_decor8.png) center no-repeat;
    background-size: contain;
    height: 2.4vh;
    width: 100%;
    left: 1%;
    top: 80.5%;
    position: absolute;
}
.p1_decor5{
    background: url(../images/p1_decor5_bg.png) center no-repeat;
    background-size: contain;
    height: 27.3%;
    top: 47.8%;
    right: -30.5%;
    width: 100%;
    position: absolute;
}
.p1_decor5 div:nth-child(1){
    background: url(../images/p1_decor5.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
}
.p1_decor5 div:nth-child(2){
    background: url(../images/p1_decor9.png) center no-repeat;
    background-size: contain;
    height: 2.4vh;
    width: 100%;
    left: 4%;
    top: 85.5%;
    position: absolute;
}
.p1_decor6{
    background: url(../images/p1_decor6_bg.png) center no-repeat;
    background-size: contain;
    height: 25.9%;
    top: 66%;
    width: 100%;
    position: absolute;
}
.p1_decor6 div:nth-child(1){
    background: url(../images/p1_decor6.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
}
.p1_decor6 div:nth-child(2){
    background: url(../images/p1_decor10.png) center no-repeat;
    background-size: contain;
    height: 2.4vh;
    width: 100%;
    left: 4%;
    top: 85.5%;
    position: absolute;
}
.p1_decor7{
    background: url(../images/p1_decor7_bg.png) center no-repeat;
    background-size: contain;
    height: 24.9%;
    top: 48%;
    width: 100%;
    left: -31%;
    position: absolute;
}
.p1_decor7 div:nth-child(1){
    background: url(../images/p1_decor7.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
}
.p1_decor7 div:nth-child(2){
    background: url(../images/p1_decor11.png) center no-repeat;
    background-size: contain;
    height: 2.4vh;
    width: 100%;
    left: 0%;
    top: 87.5%;
    position: absolute;
}
.p1_txt1{
    background: url(../images/p1_txt1.png) center no-repeat;
    background-size: contain;
    height: 13.5%;
    top: 12%;
    width: 100%;
    position: absolute;
}
.p1_txt2{
    background: url(../images/p1_txt2.png) center no-repeat;
    background-size: contain;
    height: 2.4%;
    top: 32.3%;
    width: 100%;
    position: absolute;
}
.p2_decor1{
    background: url(../images/p2_decor1.png) center no-repeat;
    background-size: contain;
    height: 23.5%;
    top: 57%;
    width: 100%;
    position: absolute;
}
.p2_decor2{
    background: url(../images/p2_decor2.png) center no-repeat;
    background-size: contain;
    height: 29.5%;
    top: 44.5%;
    width: 106%;
    right: -3%;
    position: absolute;
}
.p2_decor3{
    background: url(../images/p2_decor3.png) center no-repeat;
    background-size: contain;
    height: 57.5%;
    top: 36.5%;
    width: 100%;
    position: absolute;
}
.p2_decor4{
    background: url(../images/p2_decor4.png) center no-repeat;
    background-size: contain;
    height: 9%;
    top: 5%;
    width: 100%;
    position: absolute;
}
.p2_txt1{
    background: url(../images/p2_txt1.png) center no-repeat;
    background-size: contain;
    height: 25.5%;
    top: 9.8%;
    width: 100%;
    position: absolute;
}
.p2_txt1_1{
    background: url(../images/p2_txt1_1.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position: absolute;
}
.p2_txt3{
    background: url(../images/p2_txt3.png) center no-repeat;
    background-size: contain;
    height: 4%;
    top: 49%;
    width: 100%;
    position: absolute;
}
.p3_title{
    background: url(../images/p3_title.png) center no-repeat;
    background-size: contain;
    height: 13.4%;
    top: 9.2%;
    width: 100%;
}
.p3_txt1{
    background: url(../images/p3_txt1.png) center no-repeat;
    background-size:auto 50%;
    height: 6%;
    top: 24.5%;
    width: 100%;
    background-position: 50% 60%;
}
.txt_decor1{
    background: url(../images/txt2_decor1.png) right bottom no-repeat;
    background-size: cover;
    height: 0%;
    bottom: 2%;
    width:3%;
    right: 37.5%;
    position: absolute;
}
.txt_decor1 div{
    background: url(../images/txt2_decor1_1.png) right bottom no-repeat;
    background-size: cover;
    height:100%;
    width:100%;
    opacity:0;
}
.txt_decor2{
    background: url(../images/txt2_decor2.png)  no-repeat;
    background-size: cover;
    height: 0%;
    top: 65%;
    width: 3%;
    left: 36.5%;
    position: absolute;
}
.txt_decor2 div{
    background: url(../images/txt2_decor2_1.png) no-repeat;
    background-size: cover;
    height:100%;
    width:100%;
    opacity:0;
}
.long1{
    animation: long1 1.5s linear 1 forwards;
    -webkit-animation: long1 1.5s linear 1 forwards;
}

@keyframes long1{
    40% { height: 90%;bottom:2%;width:3%;right: 37.5%; }
    100%{ height: 90%;bottom:2%;width: 14%;right: 37.5%;}
}
@-webkit-keyframes long1{
    15% { height: 90%;bottom:2%;width:3%;right: 37.5%; }
    100%{ height: 90%;bottom:2%;width: 14%;right: 37.5%;}
}
.long2{
    animation: long2 1.5s linear 1 forwards;
    -webkit-animation: long2 1.5s linear 1 forwards;
}

@keyframes long2{
    40% {height: 34%;top: 65%;width: 3%;left: 36.5%; }
    100%{ height: 34%;top: 65%;width: 19%;left: 36.5%; }
}
@-webkit-keyframes long2{
    40% {height: 34%;top: 65%;width: 3%;left: 36.5%; }
    100%{ height: 34%;top: 65%;width: 19%;left: 36.5%; }
}
.p3_txt2{
    background: url(../images/p3_txt2.png) center no-repeat;
    background-size: contain;
    height: 3%;
    top: 86%;
    width: 100%;
}
.p3_decor{
    background: url(../images/p3_decor.png) center no-repeat;
    background-size: contain;
    height: 69%;
    top: 25%;
    width: 100%;
}
.p3_decor8{
    background: url(../images/p3_decor8.png) center no-repeat;
    background-size: contain;
    height: 89%;
    top: 15.5%;
    left: -23.5%;
    width: 133%;
}
.p3_decor1{
    height: 0%;
    top: 57.285%;
    width:100%;
    left:0%;
}
.p3_decor2{
    height: 0%;
    top: 57.285%;
    width:100%;
    left:0%;
}
.p3_decor3{
    height: 0%;
    top: 57.285%;
    width:100%;
    left:0%;
}
.p3_decor4{
    height: 0%;
    top: 57.285%;
    width:100%;
    left:0%;
}
.p3_decor5{
    height: 0%;
    top: 57.285%;
    width:100%;
    left:0%;
}
.p3_decor6{
    height: 23.57%;
    top: 45.5%;
    width: 100%;
}
.p3_decor1 div{
    background: url(../images/p3_decor1.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p3_decor2 div{
    background: url(../images/p3_decor2.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p3_decor3 div{
    background: url(../images/p3_decor4.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p3_decor4 div{
    background: url(../images/p3_decor5.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p3_decor5 div{
    background: url(../images/p3_decor6.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p3_decor6 div{
    background: url(../images/p3_decor10.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
}
.p4_decor1{
    height: 18.5%;
    top: 35.2%;
    width: 100%;
}
.p4_decor1>div:nth-child(1){
    background: url(../images/p4_decor1_1.png)  center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
    opacity:0;
}
.p4_decor1 div:nth-child(2){
    background: url(../images/p4_decor1.png)  center no-repeat;
    background-size: contain;
    height: 125%;
    width: 125%;
    top:-12.5%;
    left:-12.5%;
    position:absolute;
}
.p4_decor1>div:nth-child(3){
    background: url(../images/p4_decor.png)  center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}

.p4_decor2{
    background: url(../images/p4_decor2.png) center no-repeat;
    background-size: contain;
    height: 18.2%;
    top: 60.5%;
    width: 100%;
}
.p4_decor2 div:nth-child(1){
    background: url(../images/p4_decor.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}
.p4_decor_bg{
    background: url(../images/decor_bg.png) center no-repeat;
    background-size: contain;
    height: 150%;
    width: 100%;
    top: -24%;
    left: -2%;
    position: absolute;
}
.p4_decor3{
    background: url(../images/p4_decor3.png) right bottom no-repeat;
    background-size: auto 100%;
    height: 53.5%;
    width:0%;
    bottom: 71%;
    right: 64%;
    position: absolute;
}
.p4_decor3 div{
    background: url(../images/p4_decor3_1.png) right bottom no-repeat;
    background-size: auto 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
}
.p4_decor5 div{
    background: url(../images/p4_decor4_1.png) left bottom no-repeat;
    background-size: auto 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
}
.p4_decor6 div{
    background: url(../images/p4_decor6_1.png) left top no-repeat;
    background-size: auto 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
}
.p4_decor4{
    background: url(../images/p4_decor5.png) right top no-repeat;
    background-size: auto 100%;
    height: 45%;
    width:0%;
    top: 52%;
    right: 64%;
    position: absolute;
}
.p4_decor4 div{
    background: url(../images/p4_decor5_1.png) right top no-repeat;
    background-size: auto 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
}
.p4_decor5{
    background: url(../images/p4_decor4.png) left bottom no-repeat;
    background-size: auto 100%;
    height: 52%;
    width:0%;
    bottom: 71%;
    left: 64%;
    position: absolute;
}
.p4_decor6{
    background: url(../images/p4_decor6.png) left top no-repeat;
    background-size: auto 100%;
    height: 47%;
    width:0%;
    top: 48%;
    left: 64%;
    position: absolute;
}

.p4_txt1{
    background: url(../images/p4_txt1.png) center no-repeat;
    background-size:auto 50%;
    height: 6%;
    top: 24.5%;
    width: 100%;
    background-position: 50% 60%;
}
.p4_txt2{
    background: url(../images/p4_txt2.png) center no-repeat;
    background-size: contain;
    height: 2.7%;
    top: 54.4%;
    width: 100%;
}
.p4_txt3{
    background: url(../images/p4_txt3.png) center no-repeat;
    background-size: contain;
    height: 2.7%;
    top: 79.8%;
    width: 100%;
}
.p4_txt4{
    background: url(../images/p4_txt4.png) center no-repeat;
    background-size: contain;
    height: 3%;
    top: 86.2%;
    width: 100%;
}
.p4_line1{
    background: url(../images/p4_line.png) no-repeat;
    background-size: contain;
    height: 6.8%;
    top: 50.4%;
    left: 31%;
    width: 57%;
}
.p4_line2{
    background: url(../images/p4_line.png) right no-repeat;
    background-size: contain;
    height: 6.8%;
    top: 68.8%;
    right: 29%;
    width: 60%;
}
.p5_decor1{
    height: 25.5%;
    top: 49%;
    width: 100%;
}
.p5_decor1_1{
    background: url(../images/p5_decor1.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}
.p5_decor1 div:nth-child(1){
    background: url(../images/p4_decor.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}
.p5_decor_bg {
    background: url(../images/decor_bg.png) center no-repeat;
    background-size: contain;
    height: 160%;
    width: 100%;
    top: -29%;
    left: -2.5%;
    position: absolute;
}
.p5_txt1{
    background: url(../images/p5_txt1.png) center no-repeat;
    background-size: auto 50%;
    height: 6%;
    top: 24.5%;
    width: 100%;
    background-position: 50% 60%;
}
.p5_txt2{
    background: url(../images/p5_txt2.png) center no-repeat;
    background-size: contain;
    height: 8%;
    top: 81%;
    width: 100%;
}
.p5_txt3{
    background: url(../images/p5_decor2.png) center no-repeat;
    background-size: contain;
    height:0%;
    top: 62%;
    left:0%;
    width: 100%;
}
.zoom3{
    animation: zoom3 1.5s linear 1 forwards;
    -webkit-animation: zoom3 1.5s linear 1 forwards;
}

@keyframes zoom3{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 32.9%;left: -20%;}
}
@-webkit-keyframes zoom3{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 32.9%;left: -20%;}
}
.p5_txt4{
    background: url(../images/p5_decor3.png) center no-repeat;
    background-size: contain;
    height:0%;
    top: 62%;
    right:0%;
    width: 100%;
}
.zoom4{
    animation: zoom4 1.5s linear 1 forwards;
    -webkit-animation: zoom4 1.5s linear 1 forwards;
}

@keyframes zoom4{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 32.9%;right: -20%;}
}
@-webkit-keyframes zoom4{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 32.9%;right: -20%;}
}
.p5_txt5{
    background: url(../images/p5_decor4.png) center no-repeat;
    background-size: contain;
    height:0%;
    top: 62%;
    left:0%;
    width: 100%;
}
.zoom5{
    animation: zoom5 1.5s linear 1 forwards;
    -webkit-animation: zoom5 1.5s linear 1 forwards;
}
@keyframes zoom5{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;left: -29%;}
}
@-webkit-keyframes zoom5{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;left: -29%;}
}
.p5_txt6{
    background: url(../images/p5_decor5.png) center no-repeat;
    background-size: contain;
    height:0%;
    top: 62%;
    width: 100%;
}
.zoom6{
    animation: zoom6 1.5s linear 1 forwards;
    -webkit-animation: zoom6 1.5s linear 1 forwards;
}
@keyframes zoom6{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;}
}
@-webkit-keyframes zoom6{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;}
}
.p5_txt7{
    background: url(../images/p5_decor6.png) center no-repeat;
    background-size: contain;
    height:0%;
    top: 62%;
    right:0%;
    width: 100%;
}
.zoom7{
    animation: zoom7 1.5s linear 1 forwards;
    -webkit-animation: zoom7 1.5s linear 1 forwards;
}
@keyframes zoom7{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;right: -29%;}
}
@-webkit-keyframes zoom7{
    40%{top: 59.8%;height: 6.4%;}
    100%{height: 4.4%;top: 37.8%;right: -29%;}
}
.p5_line{
    background: url(../images/p4_line.png) center no-repeat;
    background-size: contain;
    height: 6.8%;
    top: 29%;
    width: 64%;
    left: 18%;
}
.p6_decor1{
    height: 45%;
    top: 35.7%;
    width: 100%;
}
.p6_decor1 div{
    background: url(../images/p6_decor1.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}
.p6_txt1{
    background: url(../images/p6_txt1.png) center no-repeat;
    background-size: auto 50%;
    height: 6%;
    top: 24.5%;
    width: 100%;
    background-position: 50% 60%;
}
.p6_txt2{
    background: url(../images/p6_txt2.png) center no-repeat;
    background-size: contain;
    height: 7.8%;
    top: 53%;
    width: 100%;
}
.p6_txt3{
    background: url(../images/p6_txt3.png) center no-repeat;
    background-size: contain;
    height: 3%;
    top: 86.4%;
    width: 100%;
}
.p6_txt3_1{
    background: url(../images/p6_txt3_1.png) center no-repeat;
    background-size: contain;
    height: 100%;
    width: 100%;
    position:absolute;
}
.p7_txt1{
    background: url(../images/p7_txt1.png) center no-repeat;
    background-size: contain;
    height: 7%;
    top: 35.5%;
    width: 100%;
}
.p7_txt2{
    background: url(../images/p7_txt2.png) center no-repeat;
    background-size: contain;
    height: 3%;
    top: 85.8%;
    width: 100%;
}
.anim{
    animation: a 2s linear 1;
    -webkit-animation: a 2s linear 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes a{
    from { transform:rotateY(90deg); }
    to { transform:rotateY(0deg); }
}
@-webkit-keyframes a{
    from{ -webkit-transform:rotateY(90deg); }
    to{ -webkit-transform:rotateY(0deg); }
}
.swiper-container .swiper-slide{
    background: url(../images/bg.gif) center no-repeat;
    background-size: 100% 100%;
}
.swiper-container-p{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
.swiper-container-p .swiper-slide{
      width: 100%;
      height: auto;
      overflow:hidden;
      margin:0 auto;
}
.p1_next{
    width:100%;
    height:100%;
    position:absolute;
}
.next{
    width: 50%;
    height: 2.7vh;
    bottom: 7vh;
    left: 27%;
    -webkit-animation: slide_anim 2s ease infinite;
    animation: slide_anim 2s ease infinite;
    position: absolute;
    background: url(../images/next.png) center no-repeat;
    background-size: contain;
}
@-webkit-keyframes slide_anim{
    50%{-webkit-transform:translate3d(0, 0.6rem, 0);}
}
@keyframes slide_anim{
    50%{transform:translate3d(0, 0.6rem, 0);}
}
.p7_bg{
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
}
.p7_decor1{
    background: url(../images/p7_decor1.png) center no-repeat;
    background-size: contain;
    height: 39.5%;
    top: 35%;
    width: 100%;
    position:absolute;
    mix-blend-mode:soft-light;
}
.p7_decor2{
    background: url(../images/p7_decor2_1.png) center no-repeat;
    background-size: auto 100%;
    height: 44%;
    top: 18.5%;
    width: 100%;
    position:absolute;
}
.p7_decor2_2{
    background: url(../images/p7_decor2_2.png) center no-repeat;
    background-size: auto 100%;
}
.p7_decor2_3{
    background: url(../images/p7_decor2_3.png) center no-repeat;
    background-size: auto 100%;
}
.p7_decor3{
    height: 54%;
    top: 33.5%;
    left: -1%;
    width: 100%;
    position: absolute;
    background: url(../images/p7_decor3.png) center no-repeat;
    background-size: auto 100%;
    mix-blend-mode: screen;
}
.p7_decor4{
    mix-blend-mode: normal;
    height: 28.2%;
    top: 47.5%;
    width: 100%;
    position: absolute;
    text-align: center;
}
.p7_decor4 img{
    height:100%;
}
.page1 .light{
    top: 11.1%;
    height: 10%;
    left: -0.8%;
}
.page2 .light{
    top: 20.2%;
}
.light{
    background: url(../images/light.png) center no-repeat;
    background-size: contain;
    height: 15.8%;
    top: 4.3%;
    width: 100%;
    left: 1.5%;
    position: absolute;
    mix-blend-mode: screen;
    opacity: 0;
}
.shine{
    animation: a 4s linear infinite;
    -webkit-animation: a 4s linear infinite;
    transform-origin:50% 50%;
    -webkit-transform-origin:center center;
}
@keyframes a{
    50%{opacity: 1;}
}
@-webkit-keyframes a{
    50%{opacity: 1;}
}
.shine_fast{
    animation: b 1s linear infinite;
    -webkit-animation: b 1s linear infinite;
    transform-origin:50% 50%;
    -webkit-transform-origin:center center;
}
@keyframes b{
    50%{opacity: 0;}
}
@-webkit-keyframes b{
    50%{opacity: 0;}
}
.float{
   -webkit-animation: p3_anim 5s infinite;
   animation: p3_anim 5s infinite;
}
@-webkit-keyframes p3_anim{
    0%{-webkit-transform: translate3d(0,-0.5rem,0);}
    50%{opacity:1;-webkit-transform: translate3d(0,0.5rem,0);}
    100%{-webkit-transform: translate3d(0,-0.5rem,0);}
}
@keyframes p3_anim{
    0%{transform: translate3d(0,-0.5rem,0);}
    50%{opacity:1;transform: translate3d(0,0.5rem,0);}
    100%{transform: translate3d(0,-0.5rem,0);}
}
.float_left{
   -webkit-animation: float_left 5s infinite;
   animation: float_left 5s infinite;
}
@-webkit-keyframes float_left{
    0%{-webkit-transform: translate3d(-0.5rem,0,0);}
    50%{opacity:1;-webkit-transform: translate3d(0.5rem,0,0);}
    100%{-webkit-transform: translate3d(-0.5rem,0,0);}
}
@keyframes float_left{
    0%{transform: translate3d(-0.5rem,0,0);}
    50%{opacity:1;transform: translate3d(0.5rem,0,0);}
    100%{transform: translate3d(-0.5rem,0,0);}
}
.high{
   -webkit-animation: high 2s ease-in-out infinite;
   animation: high 2s ease-in-out infinite;
}
@-webkit-keyframes high{
    0%{-webkit-transform: translate3d(0,-0.8rem,0);}
    50%{opacity:1;-webkit-transform: translate3d(0,0.8rem,0);}
    100%{-webkit-transform: translate3d(0,-0.8rem,0);}
}
@keyframes high{
    0%{transform: translate3d(0,-0.8rem,0);}
    50%{opacity:1;transform: translate3d(0,0.8rem,0);}
    100%{transform: translate3d(0,-0.8rem,0);}
}
.rotate{
   -webkit-animation: p6_anim 5s linear infinite;
   animation: p6_anim 5s linear infinite;
}
@-webkit-keyframes p6_anim{
    100%{-webkit-transform: rotate(360deg);}
}
@keyframes p6_anim{
    100%{transform: rotate(360deg);}
}
.yao{
   -webkit-animation: p1_anim 5s linear 1;
   animation: p1_anim 5s linear 1;
}
@-webkit-keyframes p1_anim{
    50%{-webkit-transform: rotate(30deg);}
}
@keyframes p1_anim{
    50%{transform: rotate(30deg);}
}
.light1{
    background: url(../images/light1.png) no-repeat;
    background-size: contain;
    height: 15%;
    top: 13%;
    width: 100%;
    left: 7.5%;
    mix-blend-mode: screen;
}
.loadingBg{
    width:100%;
    height:100%;
    position:absolute;
    z-index:90;
    background: url(../images/loading_bg.jpg) center no-repeat;
    background-size: cover;
}
.loadingBg .light{
    top: 21.5%;
    z-index: 10;
}
.l_light1{
    background: url(../images/light1.png) no-repeat;
    background-size: contain;
    height: 15%;
    top: 29.5%;
    width: 100%;
    position: absolute;
    left: 7.5%;
    mix-blend-mode: screen;
}
.l_title{
    background: url(../images/p3_title.png) center no-repeat;
    background-size: contain;
    height: 14.2%;
    top: 28%;
    width: 100%;
    position: absolute;
}
.loading_decor{
    height: 36%;
    top: 23%;
    width: 100%;
    position: absolute;
}
.jindu{
    height: 3.8%;
    top: 49.6%;
    width: 100%;
    position: absolute;
    text-align: center;
}
.jindu img{
    height:100%;
}
.l_decor{
    background: url(../images/loading_txt1.png) center no-repeat;
    background-size: contain;
    height: 3%;
    top: 56%;
    width: 100%;
    position: absolute;
}

.music_btn{
    position: absolute;
    display: block;
    width: 2.7rem;
    height: 2.7rem;
    right: 1.3rem;
    top: 0.8rem;
    z-index: 9;
 }
.music_btn span{
    display: block;
    width: 100%;
    height: 100%;
    background:url(../images/musicBtn.png) center no-repeat;
    background-size: contain;
}
/* .pause span{
       background:url(../images/pauseBtn.png) center no-repeat;
       background-size: contain;
 }*/
.music_anim{
    animation: music_a 2s linear infinite;
    -webkit-animation: music_a 2s linear infinite;
}

@keyframes music_a{
    from { transform:rotateZ(0deg); }
    to { transform:rotateZ(360deg); }
}
@-webkit-keyframes music_a{
    from{ -webkit-transform:rotateZ(0deg); }
    to{ -webkit-transform:rotateZ(360deg); }
}
.n_anim{
    animation: n_a 2s linear infinite;
    -webkit-animation: n_a 2s linear infinite;
}

@keyframes n_a{
    from { transform:rotateZ(0deg); }
    to { transform:rotateZ(-360deg); }
}
@-webkit-keyframes n_a{
    from{ -webkit-transform:rotateZ(0deg); }
    to{ -webkit-transform:rotateZ(-360deg); }
}
.big{
    animation: big 2s ease-in-out infinite;
    -webkit-animation: big 2s ease-in-out infinite;
}

@keyframes big{
    50% { transform:scale(0.8,0.8); }
}
@-webkit-keyframes big{
    50%{ -webkit-transform:scale(0.8,0.8); }
}
.length{
    animation: length 1s ease-in-out 1 forwards;
    -webkit-animation: length 1s ease-in-out 1 forwards;
}

@keyframes length{
    100%{width:36%;}
}
@-webkit-keyframes length{
    100%{width:36%;}
}

.p3_center .p3_decor8{
    height: 89vh;
    top: -17vh;
}
.p3_center .p3_decor{
    height: 69vh;
    top: -7.5vh;
}
.p1_center{
    top:20%;
    height:79.3%;
    position:absolute;
    width:100%;
    left:0;
}
.p1_center .p1_decor2{
    height: 27.3vh;
    top: 25.5vh;
}
.p1_center .p1_decor4{
    height: 26.3vh;
    top: 9vh;
}
.p1_center .p1_decor5{
    height: 27.3vh;
    top: 27.8vh;
}
.p1_center .p1_decor6{
    height: 25.9vh;
    top: 46vh;
}
.p1_center .p1_decor7{
    height: 24.9vh;
    top: 28vh;
}
.p1_center .p1_decor4,.p1_center .p1_decor5,.p1_center .p1_decor6,.p1_center .p1_decor7{
    background:none;
}
.p1_center .p1_decor4>div,.p1_center .p1_decor5>div,.p1_center .p1_decor6>div,.p1_center .p1_decor7>div{
    position:absolute;
    background: url(../images/p1_decor4_bg.png) center no-repeat;
    background-size: contain;
    height:100%;
    width:100%;
}
.p7_decor3{
    opacity:0;
}

.g1{
    position: absolute;
    height: 9.8%;
    width: 100%;
    top: 32%;
}
.g2{
    position: absolute;
    height: 9.8%;
    width: 100%;
    top: 42.5%;
}
.g3{
    position: absolute;
    height: 9.8%;
    width: 100%;
    top: 53%;
}
.g4{
    position: absolute;
    height: 9.8%;
    width: 100%;
    top: 63%;
}
.g5{
    position: absolute;
    height: 9.8%;
    width: 100%;
    top: 74%;
}
.g_logo{
    position: absolute;
    height: 9.8vh;
    width: 9.8vh;
}
.g1 .g_logo,.g3 .g_logo,.g5 .g_logo{
    left:17%;
}
.g2 .g_logo,.g4 .g_logo{
    right:17%;
}
.g_logo div{
    position:absolute;
    height:100%;
    width:100%;
}
.g_txt1{
    position: absolute;
    height: 33%;
    width: 100%;
    left: 6.5%;
    top: 12%;
}
.g_txt1 div{
    position: absolute;
    height: 100%;
    width: 100%;
}
.g_txt2{
    position: absolute;
    height: 25.5%;
    width: 100%;
    left: 7%;
    top: 44%;
}
.g2 .g_txt1,.g4 .g_txt1{
    left:-11.5%;
}
.g2 .g_txt2,.g4 .g_txt2{
    left:-10.5%;
}
.g1 .g_logo>div>div{
    background: url(../images/p3_decor1.png)  no-repeat;
    background-size: contain;
}
.g1 .g_txt1 div{
    background: url(../images/p3_txt3.png) top center no-repeat;
    background-size: auto 166%;
}
.g1 .g_txt2{
    background: url(../images/p3_txt3.png) center bottom no-repeat;
    background-size: auto 220%;
}
.g2 .g_logo>div>div{
    background: url(../images/p3_decor2.png) right  no-repeat;
    background-size: contain;
}
.g2 .g_txt1 div{
    background: url(../images/p3_txt4.png) top center no-repeat;
    background-size: auto 166%;
}
.g2 .g_txt2{
    background: url(../images/p3_txt4.png) center bottom no-repeat;
    background-size: auto 220%;
}
.g3 .g_logo>div>div{
    background: url(../images/p3_decor3.png)  no-repeat;
    background-size: contain;
}
.g3 .g_txt1 div{
    background: url(../images/p3_txt5.png) top center no-repeat;
    background-size: auto 166%;
}
.g3 .g_txt2{
    background: url(../images/p3_txt5.png) center bottom no-repeat;
    background-size: auto 220%;
}
.g4 .g_logo>div>div{
    background: url(../images/p3_decor4.png) right  no-repeat;
    background-size: contain;
}
.g4 .g_txt1 div{
    background: url(../images/p3_txt6.png) top center no-repeat;
    background-size: auto 166%;
}
.g4 .g_txt2{
    background: url(../images/p3_txt6.png) center bottom no-repeat;
    background-size: auto 220%;
}
.g5 .g_logo>div>div{
    background: url(../images/p3_decor5.png)  no-repeat;
    background-size: contain;
}
.g5 .g_txt1 div{
    background: url(../images/p3_txt7.png) top center no-repeat;
    background-size: auto 166%;
}
.g5 .g_txt2{
    background: url(../images/p3_txt7.png) center bottom no-repeat;
    background-size: auto 220%;
}
.g_decor1{
    background: url(../images/p3_decor6.png) no-repeat;
    background-size: auto 100%;
    position: absolute;
    height: 27%;
    width: 0%;
    left: 35%;
    top: 60%;
}
.g_decor2{
    background: url(../images/p3_decor7.png) right no-repeat;
    background-size: auto 100%;
    position: absolute;
    height: 29%;
    width: 0%;
    right: 35%;
    top: 60%;
}
.g_decor1 div{
    background: url(../images/p3_light.png) no-repeat;
    background-size: auto 100%;
    position: absolute;
    height:100%;
    width: 100%;
    opacity:0;
}
.g_decor2 div{
    background: url(../images/p3_light2.png) right  no-repeat;
    background-size: auto 100%;
    position: absolute;
    height:100%;
    width: 100%;
    opacity:0;
}
.shenzhan{
    animation: shenzhan 2.5s ease-in-out 1 forwards;
    -webkit-animation: shenzhan 2.5s ease-in-out 1 forwards;
}

@keyframes shenzhan{
    100%{width:100%;}
}
@-webkit-keyframes shenzhan{
    100%{width:100%;}
}

.p3_decor8{
    background: url(../images/p3_decor8.png) no-repeat;
    background-size: 100% auto;
    height: 77%;
    top: 43.5%;
    left: 0%;
    width: 100%;
    position: absolute;
}

.p3_decor1_txt{
    position: absolute;
    height: 3%;
    width: 60%;
    left: 2%;
    top: 45%;
}
.p3_decor2_txt{
    position: absolute;
    height: 3%;
    width: 60%;
    left: 39%;
    top: 44%;
}
.p3_decor3_txt{
    position: absolute;
    height: 3%;
    width: 60%;
    left: 1%;
    top: 75%;

}
.p3_decor4_txt{
    position: absolute;
    height: 3%;
    width: 60%;
    left:38%;
    top: 69%;

}
.p3_decor5_txt{
    position: absolute;
    height: 3%;
    width: 100%;
    left: 0%;
    top: 86%;

}
.p3_decor1_txt div{
    background: url(../images/p3_txt3.png) center no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}
.p3_decor2_txt div{
    background: url(../images/p3_txt4.png) center no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}
.p3_decor3_txt div{
    background: url(../images/p3_txt5.png) center no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}
.p3_decor4_txt div{
    background: url(../images/p3_txt6.png) center no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}
.p3_decor5_txt div{
    background: url(../images/p3_txt7.png) center no-repeat;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}
.zoom3_1{
    animation: zoom3_1 2s ease-in-out 1 forwards;
    -webkit-animation: zoom3_1 2s ease-in-out 1 forwards;
}

@keyframes zoom3_1{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13%;top: 32.5%;left: 14%;width: 21%;}
}
@-webkit-keyframes zoom3_1{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13%;top: 32.5%;left: 14%;width: 21%;}
}
.zoom3_2{
    animation: zoom3_2 2s ease-in-out 1 forwards;
    -webkit-animation: zoom3_2 2s ease-in-out 1 forwards;
}

@keyframes zoom3_2{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 11.2%;top: 33%;width: 18%;left: 64%;}
}
@-webkit-keyframes zoom3_2{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 11.2%;top: 33%;width: 18%;left: 64%;}
}
.zoom3_3{
    animation: zoom3_3 2s ease-in-out 1 forwards;
    -webkit-animation: zoom3_3 2s ease-in-out 1 forwards;
}

@keyframes zoom3_3{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13.7%;top: 62%;width: 22%;left: 4%;}
}
@-webkit-keyframes zoom3_3{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13.7%;top: 62%;width: 22%;left: 4%;}
}
.zoom3_4{
    animation: zoom3_4 2s ease-in-out 1 forwards;
    -webkit-animation: zoom3_4 2s ease-in-out 1 forwards;
}

@keyframes zoom3_4{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13%;top: 56%;width: 22%;left: 73%;}
}
@-webkit-keyframes zoom3_4{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13%;top: 56%;width: 22%;left: 73%;}
}
.zoom3_5{
    animation: zoom3_5 2s ease-in-out 1 forwards;
    -webkit-animation: zoom3_5 2s ease-in-out 1 forwards;
}

@keyframes zoom3_5{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13.57%;top: 72.5%;left:0%;width: 100%;}
}
@-webkit-keyframes zoom3_5{
    40%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    65%{height: 23.57%;top: 45.5%;left:0%;width: 100%;}
    100%{height: 13.57%;top: 72.5%;left:0%;width: 100%;}
}

.p3_center{
    height: 49.57%;
    top: 32.5%;
    width:49.57vh;
    left:calc((100% - 49.57vh)/2);
    left:-webkit-calc((100% - 49.57vh)/2);

}
.p3_center div{
    position: absolute;
}
.p3_center>div{
   height:100vh;
   width:100vw;
   top:-32.5vh;
   left:calc((49.57vh - 100vw )/2);
   left:-webkit-calc((49.57vh - 100vw )/2);
   position:absolute;
}