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}
*{
    -webkit-tap-highlight-color: transparent;
}
html{
    -webkit-text-size-adjust:none;
    background:#FFF;
}
html,body{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.music_btn{
    position: absolute;
    display: block;
    width: 4.3vh;
    height: 4.3vh;
    right: 4.5%;
    top: 2%;
    z-index: 99;
 }
.music_btn span{
    display: block;
    width: 100%;
    height: 100%;
    background:url(../../images/youngFriend/music.png) center 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:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
    from{ -webkit-transform:rotate(0deg); }
    to{ -webkit-transform:rotate(360deg); }
}
.music_btn1{
    top: 0.3%;
 }
 .jcontent{
    position:relative;
    width: 100%;
    height:100%;
}
.jcontent div{
    position:absolute;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
}
.swiper-container .swiper-slide{
    overflow: hidden;
}
.content{
    position:relative;
    background:url(../../images/youngFriend/p1_bg.jpg) top center no-repeat;
    background-size:cover;
    width: 100%;
    height:935vw;
    left:0;
}
.bglight{
    background:url(../../images/youngFriend/light_loading.png) top center no-repeat;
    background-size:cover;
    width: 100%;
    height:100%;
    mix-blend-mode: screen;
    animation: bglightani 1s  infinite;
    -webkit-animation: bglightani 1s  infinite;
}
@keyframes bglightani{
    0%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@-webkit-keyframes bglightani{
    0%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.bg1,
.bg2,
.bg3,
.bg4,
.bg5,
.bg6{
    background:url(../../images/youngFriend/p1_bg_01.jpg) top center no-repeat;
    background-size:contain;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.bg2{
    background:url(../../images/youngFriend/p1_bg_02.png) top center no-repeat;
    background-size:contain;
    top: 16.6%;
}
.bg3{
    background:url(../../images/youngFriend/p1_bg_03.png) top center no-repeat;
    background-size:contain;
    top: 33.2%;
}
.bg4{
    background:url(../../images/youngFriend/p1_bg_04.png) top center no-repeat;
    background-size:contain;
    top: 49.8%;
}
.bg5{
    background:url(../../images/youngFriend/p1_bg_05.png) top center no-repeat;
    background-size:contain;
    top: 66.4%;
}
.bg6{
    background:url(../../images/youngFriend/p1_bg_06.png) top center no-repeat;
    background-size:contain;
    top: 83%;
}
.content div{
    position: absolute;
}
.logo{
    background:url(../../images/youngFriend/logo.png) center no-repeat;
    background-size:contain;
   height: 11vw;
    width: 24vw;
    top: 4vw;
    left: 5%;
}
.decor1{
    background: url(../../images/youngFriend/p1_light1.png) center no-repeat;
    background-size:contain;
    width: 77%;
    height: 9%;
    left: 30%;
    top: -4.9%;
}
.decor2{
    background: url(../../images/youngFriend/title.png) center no-repeat;
    background-size:contain;
    width: 80%;
    height: 5%;
    left: 10%;
    top: 2%;
}
.decor3{
    background: url(../../images/youngFriend/p1_mod1.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 11%;
    left: 0%;
    top: 5.2%;
}
.triangle{
    background: url(../../images/youngFriend/p1_triangle1.png) center no-repeat;
    background-size:contain;
    width: 13%;
    height: 2.4%;
    left: 86%;
    top: 7%;
    animation: triangleani 0.8s  infinite;
    -webkit-animation: triangleani 0.8s  infinite;
}
@keyframes triangleani{
    33%{
        background: url(../../images/youngFriend/p1_triangle2.png) center no-repeat;
        background-size:contain;
    }
    66%{
        background: url(../../images/youngFriend/p1_triangle3.png) center no-repeat;
        background-size:contain;
    }
    100%{
        background: url(../../images/youngFriend/p1_triangle4.png) center no-repeat;
        background-size:contain;
    }
}
@-webkit-keyframes triangleani{
    33%{
        background: url(../../images/youngFriend/p1_triangle2.png) center no-repeat;
        background-size:contain;
    }
    66%{
        background: url(../../images/youngFriend/p1_triangle3.png) center no-repeat;
        background-size:contain;
    }
    100%{
        background: url(../../images/youngFriend/p1_triangle4.png) center no-repeat;
        background-size:contain;
    }
}
.decor15{
    background:url(../../images/youngFriend/p1_robot.png) center no-repeat;
    background-size:contain;
    width: 13%;
    height: 3%;
    left: 74.5%;
    top: 7.28%;
}
.decor16{
    background:url(../../images/youngFriend/p1_cloud2.png) center no-repeat;
    background-size:contain;
    width: 11%;
    height: 1%;
    left: 90.5%;
    top: 9%;
}
.decor166{
    left: 35%;
    top: 8%;
    width:  8%;
}
.elevator1,
.elevator6{
    width: 38%;
    height: 6%;
    left: 44%;
    top: 11.5%;
}
.elevator1[data-val="1"],
.elevator6[data-val="1"]{
    background: url(../../images/youngFriend/p1_futi1.png) center no-repeat;
    background-size:contain;
}
.elevator1[data-val="2"],
.elevator6[data-val="2"]{
    background: url(../../images/youngFriend/p1_futi01.png) center no-repeat;
    background-size:contain;
}
.dot1,
.dot2,
.dot3,
.dot4,
.dot5,
.dot6,
.dot7,
.dot8{
    background:url(../../images/youngFriend/p1_pushcircle1.png) center no-repeat;
    background-size:contain;
    width: 6%;
    height: 0.6%;
    left: 10%;
    top: 9.2%;
    display: none;
}
.line1{
    background:url(../../images/youngFriend/p1_pushline1.png) top no-repeat;
    background-size: 100% auto;
    width: 10%;
    height: 0%;
    left: 8.6%;
    top: 9.5%;
}
.line1ani{
   animation: line1ani 1.2s 0.2s linear forwards;
    -webkit-animation: line1ani 1.2s 0.2s linear forwards;
}
@keyframes line1ani{
    100%{
        height:4.7%;
    }
}
@-webkit-keyframes line1ani{
    100%{
        height:4.7%;
    }
}
.txt1{
    background:url(../../images/youngFriend/p1_pushtxt1.png) left no-repeat;
    background-size: auto 100%;
    width: 0%;
    height: 3.4%;
    left: 10.2%;
    top: 9.4%;
    z-index:11;
}
.txt1ani{
   animation: txt1ani 1.2s  0.5s  linear forwards;
    -webkit-animation: txt1ani 1.2s 0.5s  linear forwards;
}
@keyframes txt1ani{
    100%{
        width:53%;
    }
}
@-webkit-keyframes txt1ani{
    100%{
        width:53%;
    }
}
.loading_logo{
    position: absolute;
    background: url(../../images/youngFriend/logo.png) center no-repeat;
    background-size: contain;
    height: 11vw;
    width: 24vw;
    top: 4vw;
    left: 5%;
}
.btn1,
.btn4,
.btn6,
.btn7{
    background:url(../../images/youngFriend/p1_pushleft1.png) center no-repeat;
    background-size:contain;
    width: 16.5%;
    height: 1.4%;
    left: 14.95%;
    top: 13.3%;
    z-index:2;
    animation: btn1 2s  linear infinite;
    -webkit-animation: btn1 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@keyframes btn1{
    0%{
        transform: scale(0.8,0.8);
    }
    16.6%{
        transform: scale(1,1);
    }
    83%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
@-webkit-keyframes btn1{
    0%{
        -webkit-transform: scale(0.8,0.8);
    }
    16.6%{
        -webkit-transform: scale(1,1);
    }
    83%{
        -webkit-transform: scale(1,1);
    }
    100%{
        -webkit-transform: scale(0.8,0.8);
    }
}
.btn1_1,
.btn4_1,
.btn6_1,
.btn7_1{
    background:url(../../images/youngFriend/p1_pushleft2.png) center no-repeat;
    background-size:contain;
    width: 16.5%;
    height: 1.4%;
    left: 14.9%;
    top: 13.25%;
    animation: btn1_1 2s  linear infinite;
    -webkit-animation: btn1_1 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@keyframes btn1_1{
    0%{
        transform: scale(0.8,0.8);
    }
    16.6%{
        transform: scale(0.8,0.8);
    }
    33.2%{
        transform: scale(1,1);
    }
    66.4%{
        transform: scale(1,1);
    }
    83%{
        transform: scale(0.8,0.8);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
@-webkit-keyframes btn1_1{
    0%{
        transform: scale(0.8,0.8);
    }
    16.6%{
        -webkit-transform: scale(0.8,0.8);
    }
    33.2%{
        -webkit-transform: scale(1,1);
    }
    66.4%{
        -webkit-transform: scale(1,1);
    }
    83%{
        -webkit-transform: scale(0.8,0.8);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
.btn1_2,
.btn4_2,
.btn6_2,
.btn7_2{
    background:url(../../images/youngFriend/p1_pushleft3.png) center no-repeat;
    background-size:contain;
    width: 17%;
    height: 1.4%;
    left: 14.2%;
    top: 13.25%;
    animation: btn1_2 2s  linear infinite;
    -webkit-animation: btn1_2 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@keyframes btn1_2{
    0%{
        transform: scale(0.8,0.8);
    }
    33.2%{
        transform: scale(0.8,0.8);
    }
    49.8%{
        transform: scale(1,1);
    }
    66.4%{
        transform: scale(0.8,0.8);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
@-webkit-keyframes btn1_2{
    0%{
        transform: scale(0.8,0.8);
    }
    33.2%{
        -webkit-transform: scale(0.8,0.8);
    }
    49.8%{
        -webkit-transform: scale(1,1);
    }

    66.4%{
        -webkit-transform: scale(0.8,0.8);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
/*
.btnani{
   animation: btn1 2s  linear infinite;
    -webkit-animation: btn1 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@keyframes btn1{
    0%{
        transform: scale(0.8,0.8);
    }
    50%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(0.8,0.8);
    }
}
@-webkit-keyframes btn1{
    0%{
        -webkit-transform: scale(0.8,0.8);
    }
    50%{
        -webkit-transform: scale(1,1);
    }
    100%{
        -webkit-transform: scale(0.8,0.8);
    }
}*/
.decor4{
    background: url(../../images/youngFriend/p1_mod2.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 13.7%;
}
.cloud1,
.cloud2,
.cloud3{
    background:url(../../images/youngFriend/p1_cloud1.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1%;
    left: -2%;
    top: 16.4%;
    animation: cloud1ani 2.3s  linear infinite;
    -webkit-animation: cloud1ani 2.3s  linear infinite;
}
@keyframes cloud1ani{
    0%{
      transform: translateY(0%);
    }
    50%{
      transform: translateY(-30%);
    }
    100%{
      transform: translateY(0%);
    }
}
@-webkit-keyframes cloud1ani{
    0%{
      -webkit-transform: translateY(0%);
    }
    50%{
      -webkit-transform: translateY(-30%);
    }
    100%{
      -webkit-transform: translateY(0%);
    }
}
.cloud2{
    width: 8%;
    height: 0.7%;
    left: 62%;
    top: 16%;
    animation-delay: 0.3s;
    -webkit-animation-delay:0.3s;
}
.cloud3{
    width: 11%;
    height: 1%;
    left: -3%;
    top: 25.8%;
    animation-delay: 0.5s;
    -webkit-animation-delay:0.5s;
}
.cloud4,
.cloud5,
.cloud6{
    background:url(../../images/youngFriend/p1_cloud2.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1%;
    left: 55%;
    top: 27.9%;
    animation: cloud1ani 2.3s  linear infinite;
    -webkit-animation: cloud1ani 2.3s  linear infinite;
}
.dot2{
    left: 85%;
    top: 18.1%;
}
.line2{
    background:url(../../images/youngFriend/p1_pushline2.png) top no-repeat;
    background-size:100% auto;
    width: 9%;
    height: 0%;
    left: 83%;
    top: 18.4%;
}
.line2ani{
    animation: line2ani 1.2s 0.2s linear forwards;
    -webkit-animation: line2ani 1.2s 0.2s linear forwards;
}
@keyframes line2ani{
    100%{
        height:4%;
    }
}
@-webkit-keyframes line2ani{
    100%{
        height:4%;
    }
}
.txt2{
    background:url(../../images/youngFriend/p1_pushtxt2.png) right no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.4%;
    right: 9.3%;
    top: 18.3%;
}
.txt2ani{
   animation: txt2ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt2ani 1.2s 0.5s linear forwards;
}
@keyframes txt2ani{
    100%{
        width:52%;
    }
}
@-webkit-keyframes txt2ani{
    100%{
        width:52%;
    }
}
.btn2,
.btn3,
.btn5,
.btn8{
    background:url(../../images/youngFriend/p1_pushright1.png) center no-repeat;
    background-size:contain;
    width: 16%;
    height: 1.3%;
    left: 68.7%;
    top: 22.05%;
    z-index:2;
    animation: btn1 2s  linear infinite;
    -webkit-animation: btn1 2s  linear infinite;
    -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
}
.btn2_1,
.btn3_1,
.btn5_1,
.btn8_1{
    background:url(../../images/youngFriend/p1_pushright2.png) center no-repeat;
    background-size:contain;
    width: 16.5%;
    height: 1.4%;
    left: 69%;
    top: 21.95%;
    animation: btn1_1 2s  linear infinite;
    -webkit-animation: btn1_1 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.btn2_2,
.btn3_2,
.btn5_2,
.btn8_2{
    background:url(../../images/youngFriend/p1_pushright3.png) center no-repeat;
    background-size:contain;
    width: 17%;
    height: 1.4%;
    left: 69.2%;
    top: 21.95%;
    animation: btn1_2 2s  linear infinite;
    -webkit-animation: btn1_2 2s  linear infinite;
        -webkit-transition: all 2s ;
       -moz-transition: all 2s ;
        -ms-transition: all 2s ;
         -o-transition: all 2s ;
            transition: all 2s ;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
/*
@keyframes btn2{
     0%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        transform: scale(1,1);
    }
    50%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        transform: scale(0.85,0.85);
    }
    100%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        transform: scale(1,1);
    }
}
@-webkit-keyframes btn2{
    0%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        -webkit-transform: scale(1,1);
    }
    50%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        -webkit-transform: scale(0.85,0.85);
    }
    100%{
        background:url(../../images/youngFriend/p1_pushbefore2.png) center no-repeat;
        background-size:contain;
        -webkit-transform: scale(1,1);
    }
}
*/
.decor5{
    background: url(../../images/youngFriend/p1_mod3.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 11%;
    left: 0%;
    top: 24.7%;
}
.cloud_anim{
        animation: cloud1ani 2.3s  linear infinite;
    -webkit-animation: cloud1ani 2.3s  linear infinite;
}
.elevator2,
.elevator5{
    width: 17%;
    height: 8%;
    left: 8%;
    top: 19.75%;
    overflow: hidden;
}
.elevator2_1,
.elevator2_4,
.elevator5_1,
.elevator5_4{
    background: url(../../images/youngFriend/p1_lift01.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height:100%;
}
.elevator2_2,
.elevator5_2{
    background: url(../../images/youngFriend/p1_lift2.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 89%;
    left: 0%;
    top: 0%;
    animation: dianti1ani 4s  linear infinite;
    -webkit-animation: dianti1ani 4s  linear infinite;
}
@keyframes dianti1ani{
    0%{
      transform: translateY(0%);
    }
    50%{
      transform: translateY(-40%);
    }
    100%{
      transform: translateY(0%);
    }
}
@-webkit-keyframes dianti1ani{
    0%{
      -webkit-transform: translateY(0%);
    }
    50%{
      -webkit-transform: translateY(-40%);
    }
    100%{
      -webkit-transform: translateY(0%);
    }
}
.xian1,
.xian2{
    width: 100%;
    height:100%;
    top:2%;
    overflow: hidden;
}
.elevator2_3,
.elevator5_3{
    background: url(../../images/youngFriend/p1_lift3.png) center no-repeat;
    background-size:contain;
    width: 54%;
    height: 60%;
    left: 23%;
    top: 1%;
    animation: xian1ani 4s  linear infinite;
    -webkit-animation: xian1ani 4s  linear infinite;
}
@keyframes xian1ani{
    0%{
      transform: translateY(0%);
    }
    50%{
      transform: translateY(-60%);
    }
    100%{
      transform: translateY(0%);
    }
}
@-webkit-keyframes xian1ani{
    0%{
      -webkit-transform: translateY(0%);
    }
    50%{
      -webkit-transform: translateY(-60%);
    }
    100%{
      -webkit-transform: translateY(0%);
    }
}
.elevator2_4,
.elevator5_4{
    background: url(../../images/youngFriend/p1_lift1.png) center no-repeat;
    background-size:contain;
}
.dot3,
.dot4{
    background:url(../../images/youngFriend/p1_pushcircle3.png) center no-repeat;
    background-size:contain;
    left: 84.5%;
    top: 28.1%;
}
.line3{
    background:url(../../images/youngFriend/p1_pushline3.png) top no-repeat;
    background-size:100% auto;
    width: 11%;
    height: 0%;
    left: 81.3%;
    top: 28.4%;
}
.line3ani{
   animation: line3ani 1.2s 0.2s linear forwards;
    -webkit-animation: line3ani 1.2s 0.2s linear forwards;
}
@keyframes line3ani{
    100%{
        height:5.3%;
    }
}
@-webkit-keyframes line3ani{
    100%{
        height:5.3%;
    }
}
.txt3{
    background:url(../../images/youngFriend/p1_pushtxt3.png) right no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.7%;
    right: 9.4%;
    top: 28.4%;
}
.txt3ani{
   animation: txt3ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt3ani 1.2s 0.5s linear forwards;
}
@keyframes txt3ani{
    100%{
        width:47%;
    }
}
@-webkit-keyframes txt3ani{
    100%{
        width:47%;
    }
}
.btn3{
    left: 69%;
    top: 32.77%;
}
.btn3_1{
    left: 69.2%;
    top: 32.68%;
}
.btn3_2{
    left: 69%;
    top: 32.7%;
}
.balloon{
    background:url(../../images/youngFriend/p1_qiu.png) center no-repeat;
    background-size:contain;
    width: 13%;
    height: 2%;
    left: 54.7%;
    top: 25.5%;
    animation: balloonani 4s  linear infinite;
    -webkit-animation: balloonani 4s  linear infinite;
}
@keyframes balloonani{
    0%{
      transform: translateX(0%);
    }
    50%{
      transform: translateX(30%);
    }
    100%{
      transform: translateX(0%);
    }
}
@-webkit-keyframes balloonani{
    0%{
      -webkit-transform: translateX(0%);
    }
    50%{
      -webkit-transform: translateX(30%);
    }
    100%{
      -webkit-transform: translateX(0%);
    }
}
.decor6{
    background: url(../../images/youngFriend/p1_mod4.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 11%;
    left: 0%;
    top: 33.8%;
}
.cloud5{
    width: 14%;
    height: 1.2%;
    left: 72%;
    top: 35.1%;
    animation-delay: 0.6s;
    -webkit-animation-delay:0.6s;
}
.cloud6{
    width: 9%;
    height: 0.8%;
    left: 30%;
    top: 36%;
    animation-delay: 0.9s;
    -webkit-animation-delay:0.9s;
}
.elevator3{
    background: url(../../images/youngFriend/p1_lift4.png) center no-repeat;
    background-size:contain;
    width: 57%;
    height: 6%;
    left: 23%;
    top: 31.8%;
}
.dot4{
    left: 8.2%;
    top: 37.5%;
}
.line4{
    background:url(../../images/youngFriend/p1_pushline4.png) top no-repeat;
    background-size:100% auto;
    width: 11%;
    height: 0%;
    left: 6.3%;
    top: 37.7%;
}
.line4ani{
   animation: line4ani 1.2s 0.2s linear forwards;
    -webkit-animation: line4ani 1.2s 0.2s linear forwards;
}
@keyframes line4ani{
    100%{
        height:4.7%;
    }
}
@-webkit-keyframes line4ani{
    100%{
        height:4.7%;
    }
}
.txt4{
    background:url(../../images/youngFriend/p1_pushtxt4.png) left no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.2%;
    left: 7.9%;
    top: 37.8%;
}
.txt4ani{
   animation: txt4ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt4ani 1.2s 0.5s linear forwards;
}
@keyframes txt4ani{
    100%{
        width: 56%;
    }
}
@-webkit-keyframes txt4ani{
    100%{
        width: 56%;
    }
}
.btn4{
    left: 13.5%;
    top: 41.87%;
}
.btn4_1{
    left:13.4%;
    top:41.85%;
}
.btn4_2{
    left:12.9%;
    top:41.86%;
}
.decor7{
    background: url(../../images/youngFriend/p1_mod5.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 16%;
    left: 0%;
    top: 47.5%;
}
.cloud20{
    background:url(../../images/youngFriend/p1_cloud1.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1%;
    left: -2%;
    top: 16.4%;
}
.cloud200{top: 87%;left: 9%;}
.cloud21{
        background: url(../../images/youngFriend/p1_cloud2.png) center no-repeat;
        background-size:contain;
        width: 10%;
        height: 1%;
        left: 93%;
        top: 75%;
}
.cloud211{top: 87%;background:  url(../../images/youngFriend/p1_cloud1.png) center no-repeat;background-size:  contain;left: 69%;width: 6.5%;}
.cloud22{
  background:url(../../images/youngFriend/p1_cloud1.png) center no-repeat;
  background-size:contain;
  width: 10%;
  height: 1%;
  left: 4%;
  top: 48.9%;
}
.cloud222{background: url(../../images/youngFriend/p1_cloud1.png) center no-repeat;background-size:contain;width: 7%;height: 1%;left: 43%;top: 48%;}
.cloud23{
     background:url(../../images/youngFriend/p1_cloud1.png) center no-repeat;
     background-size:contain;
     width: 10%;
     height: 1%;
     left: 9%;
     top: 64%;
}
.cloud233{
    top: 78.9%;
    left: 34%;
    background:  url(../../images/youngFriend/p1_cloud2.png) center no-repeat;
    background-size:  contain;
    width:  8%;
}
.elevator4{
    background: url(../../images/youngFriend/p1_decor3.png) center no-repeat;
    background-size:contain;
    width: 45%;
    height: 7.9%;
    left: 40%;
    top: 41.8%;
    animation: elevator4ani 0.5s  linear infinite;
    -webkit-animation: elevator4ani 0.5s linear infinite;
}
@keyframes elevator4ani{
    100%{
        background: url(../../images/youngFriend/p1_decor4.png) center no-repeat;
        background-size:contain;
    }
}
@-webkit-keyframes elevator4ani{
    100%{
        background: url(../../images/youngFriend/p1_decor4.png) center no-repeat;
        background-size:contain;
    }
}
.decor8{
    background: url(../../images/youngFriend/p1_man2.png) center no-repeat;
    background-size:contain;
    width: 11%;
    height: 1.7%;
    left: 54%;
    top: 42.1%;
}
.man{
    background: url(../../images/youngFriend/p1_bike1.png) center no-repeat;
    background-size:contain;
    width: 29.5%;
    height: 4%;
    left: 1%;
    top: 49.7%;
    animation: manani 1s  linear infinite;
    -webkit-animation: manani 1s  linear infinite;
}
@keyframes manani{
    100%{
        background: url(../../images/youngFriend/p1_bike2.png) center no-repeat;
        background-size:contain;
    }
}
@-webkit-keyframes manani{
    100%{
        background: url(../../images/youngFriend/p1_bike2.png) center no-repeat;
        background-size:contain;
    }
}
.car{
    background: url(../../images/youngFriend/p1_car.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1.2%;
    left: -10%;
    top: 52.8%;
    animation: carani 3s  linear infinite;
    -webkit-animation: carani 3s  linear infinite;
}
@keyframes carani{
    0%{
      transform: translate(0vw,0vw);
    }
    100%{
      transform: translate(46vw,28vw);
    }
}
@-webkit-keyframes carani{
    0%{
      -webkit-transform: translate(0vw,0vw);
    }
    100%{
      -webkit-transform: translate(46vw,28vw);
    }
}
.decor14{
    background: url(../../images/youngFriend/p1_build.png) center no-repeat;
    background-size:contain;
    width: 47%;
    height: 7.8%;
    left: 3.6%;
    top: 53.8%;
}
.p1_halo1,
.p1_halo2,
.p1_halo3{
    background: url(../../images/youngFriend/p1_halo.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1.8%;
    left: 79%;
    top: 61%;
    mix-blend-mode: screen;
    animation: p1_halo1ani 3s  linear infinite;
    -webkit-animation: p1_halo1ani 3s  linear infinite;
}
@keyframes p1_halo1ani{
    0%{
        transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        transform: translate(-16vw,-8vw);
    }
}
@-webkit-keyframes p1_halo1ani{
    0%{
        -webkit-transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        -webkit-transform: translate(-16vw,-8vw);
    }
}
.p1_halo2{
    width: 8%;
    height: 1.8%;
    left: 85%;
    top: 59.5%;
    animation: p1_halo2ani 3s 0.7s linear infinite;
    -webkit-animation: p1_halo2ani 3s 0.7s linear infinite;
}
@keyframes p1_halo2ani{
    0%{
        transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        transform: translate(-8vw,-18vw);
    }
}
@-webkit-keyframes p1_halo2ani{
    0%{
        -webkit-transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        -webkit-transform: translate(-8vw,-18vw);
    }
}
.p1_halo3{
    width: 5%;
    height: 1.5%;
    left: 78%;
    top: 60%;
    animation: p1_halo3ani 3s 1.3s linear infinite;
    -webkit-animation: p1_halo3ani 3s 1.3s linear infinite;
}
@keyframes p1_halo3ani{
    0%{
        transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        transform: translate(-18vw,-18vw);
    }
}
@-webkit-keyframes p1_halo3ani{
    0%{
        -webkit-transform: translate(0vw,0vw);
    }
    100%{
        opacity:0;
        -webkit-transform: translate(-18vw,-18vw);
    }
}
.dot5,
.dot6{
    background:url(../../images/youngFriend/p1_pushcircle5.png) center no-repeat;
    background-size:contain;
    left: 84%;
    top: 51.3%;
}
.line5{
    background:url(../../images/youngFriend/p1_pushline5.png) top no-repeat;
    background-size:100% auto;
    width: 10.2%;
    height: 0%;
    left: 81%;
    top: 51.6%;
    z-index:  2;
}
.line5ani{
   animation: line5ani 1.2s 0.2s linear forwards;
    -webkit-animation: line5ani 1.2s 0.2s linear forwards;
}
@keyframes line5ani{
    100%{
        height:4.2%;
    }
}
@-webkit-keyframes line5ani{
    100%{
        height:4.2%;
    }
}
.txt5{
    background:url(../../images/youngFriend/p1_pushtxt5.png) right no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.2%;
    right: 10%;
    top: 51.55%;
    z-index:  2;
}
.txt5ani{
   animation: txt5ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt5ani 1.2s 0.5s linear forwards;
}
@keyframes txt5ani{
    100%{
        width: 48%;
    }
}
@-webkit-keyframes txt5ani{
    100%{
        width: 48%;
    }
}
.btn5{
    left: 68.9%;
    top: 55.35%;
}
.btn5_1{
    left: 69.1%;
    top: 55.25%;
}
.btn5_2{
    left: 69.2%;
    top: 55.25%;
}
.decor9{
    background: url(../../images/youngFriend/p1_mod6.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 61.2%;
}
.mobinfo1{
    background: url(../../images/youngFriend/p1_decor1.png) center no-repeat;
    background-size:contain;
    width: 9%;
    height: 1.4%;
    left: 64%;
    top: 61.4%;
    animation: mobinfo1ani 2s  linear infinite;
    -webkit-animation: mobinfo1ani 2s  linear infinite;
}
@keyframes mobinfo1ani{
    0%{
      transform: scale(0.8) translate(-7vw,10vw);
    }
    49%{
      transform: scale(0.8) translate(-7vw,10vw);
    }
    50%{
      transform: scale(1) translate(0vw,0vw);
    }
    99%{
      transform: scale(1) translate(0vw,0vw);
    }
    100%{
      transform: scale(0.8) translate(-7vw,10vw);
    }
}
@-webkit-keyframes mobinfo1ani{
    0%{
      -webkit-transform: scale(0.8) translate(-7vw,10vw);
    }
    49%{
      -webkit-transform: scale(0.8) translate(-7vw,10vw);
    }
    50%{
      -webkit-transform: scale(1) translate(0vw,0vw);
    }
    99%{
      -webkit-transform: scale(1) translate(0vw,0vw);
    }
    100%{
      -webkit-transform: scale(0.8) translate(-7vw,10vw);
    }
}
.mobinfo2{
    background: url(../../images/youngFriend/p1_decor2.png) center no-repeat;
    background-size:contain;
    width: 11%;
    height: 1.4%;
    left: 47%;
    top: 62.5%;
    animation: mobinfo2ani 2s 1s linear infinite;
    -webkit-animation: mobinfo2ani 2s 1s linear infinite;
}
@keyframes mobinfo2ani{
    0%{
      transform: scale(0.5) translate(8vw,3vw);
    }
    49%{
      transform: scale(0.5) translate(8vw,3vw);
    }
    50%{
      transform: scale(1) translate(0vw,0vw);
    }
    99%{
      transform: scale(1) translate(0vw,0vw);
    }
    100%{
      transform: scale(0.5) translate(8vw,3vw);
    }
}
@-webkit-keyframes mobinfo2ani{
    0%{
      -webkit-transform: scale(0.5) translate(8vw,3vw);
    }
    49%{
      -webkit-transform: scale(0.5) translate(8vw,3vw);
    }
    50%{
      -webkit-transform: scale(1) translate(0vw,0vw);
    }
    99%{
      -webkit-transform: scale(1) translate(0vw,0vw);
    }
    100%{
      -webkit-transform: scale(0.5) translate(8vw,3vw);
    }
}
.dot6{
    left: 9.3%;
    top: 66%;
}
.line6{
    background:url(../../images/youngFriend/p1_pushline6.png) top no-repeat;
    background-size:100% auto;
    width: 9.8%;
    height: 0%;
    left: 8%;
    top: 66.3%;
    z-index:  2;
}
.line6ani{
   animation: line6ani 1.2s 0.2s linear forwards;
    -webkit-animation: line6ani 1.2s 0.2s linear forwards;
}
@keyframes line6ani{
    100%{
        height:4.2%;
    }
}
@-webkit-keyframes line6ani{
    100%{
        height:4.2%;
    }
}
.txt6{
    background:url(../../images/youngFriend/p1_pushtxt6.png) left no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.4%;
    left: 9.1%;
    top: 66.28%;
    z-index:  2;
}
.txt6ani{
   animation: txt6ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt6ani 1.2s 0.5s linear forwards;
}
@keyframes txt6ani{
    100%{
        width: 48%;
    }
}
@-webkit-keyframes txt6ani{
    100%{
        width: 48%;
    }
}
.btn6{
    left: 13.7%;
    top: 70.1%;
}
.btn6_1{
    left:13.6%;
    top:70.06%;
}
.btn6_2{
    left:12.9%;
    top:70.06%;
}
.decor10{
    background: url(../../images/youngFriend/p1_mod7.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 12%;
    left: 0%;
    top: 74%;
}
.elevator5{
    left: 59%;
    top: 69%;
}
.light{
    background:url(../../images/youngFriend/p1_deng1.png) center no-repeat;
    background-size:contain;
    width: 15%;
    height: 2.4%;
    left: 68%;
    top: 77.4%;
    animation: light 4s  linear infinite;
    -webkit-animation: light 4s  linear infinite;
}
@keyframes light{
    0%{
      transform: translateY(0%);
    }
    50%{
      transform: translateY(-30%);
    }
    100%{
      transform: translateY(0%);
    }
}
@-webkit-keyframes light{
    0%{
      -webkit-transform: translateY(0%);
    }
    50%{
      -webkit-transform: translateY(-30%);
    }
    100%{
      -webkit-transform: translateY(0%);
    }
}
.decor11{
    background: url(../../images/youngFriend/p1_man1.png) center no-repeat;
    background-size:contain;
    width: 28%;
    height: 4%;
    left: 61%;
    top: 77.5%;
}
.dot7,
.dot8{
    background:url(../../images/youngFriend/p1_pushcircle7.png) center no-repeat;
    background-size:contain;
    left: 9.5%;
    top: 78.3%;
}
.line7{
    background:url(../../images/youngFriend/p1_pushline7.png) top no-repeat;
    background-size:100% auto;
    width: 11.9%;
    height: 0%;
    left: 8%;
    top: 78.6%;
}
.line7ani{
   animation: line7ani 1.2s 0.2s linear forwards;
    -webkit-animation: line7ani 1.2s 0.2s linear forwards;
}
@keyframes line7ani{
    100%{
        height:4.8%;
    }
}
@-webkit-keyframes line7ani{
    100%{
        height:4.8%;
    }
}
.txt7{
    background:url(../../images/youngFriend/p1_pushtxt7.png) left no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.6%;
    left: 9.5%;
    top: 78.6%;
}
.txt7ani{
   animation: txt7ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt7ani 1.2s 0.5s linear forwards;
}
@keyframes txt7ani{
    100%{
        width: 48%;
    }
}
@-webkit-keyframes txt7ani{
    100%{
        width: 48%;
    }
}
.btn7{
    left: 14.75%;
    top: 82.88%;
}
.btn7_1{
    left:14.4%;
    top:82.86%;
}
.btn7_2{
    left:13.9%;
    top:82.86%;
}
.decor12{
    background: url(../../images/youngFriend/p1_mod8.png) center no-repeat;
    background-size:contain;
    width: 100%;
    height: 10%;
    left: 0%;
    top: 86%;
}
.decor13{
    background: url(../../images/youngFriend/p1_flower1.png) center no-repeat;
    background-size:contain;
    width: 10%;
    height: 1.4%;
    left: 20%;
    top: 91.55%;
}
.elevator6{
    width: 38%;
    height: 6%;
    left: 39.7%;
    top: 81.9%;
}
.dot8{
    left: 85.25%;
    top: 88.95%;
}
.line8{
    background:url(../../images/youngFriend/p1_pushline8.png) top no-repeat;
    background-size:100% auto;
    width: 11.3%;
    height: 0%;
    left: 82%;
    top: 89.2%;
}
.line8ani{
   animation: line8ani 1.2s 0.2s linear forwards;
    -webkit-animation: line8ani 1.2s 0.2s linear forwards;
}
@keyframes line8ani{
    100%{
        height:4.4%;
    }
}
@-webkit-keyframes line8ani{
    100%{
        height:4.4%;
    }
}
.txt8{
    background:url(../../images/youngFriend/p1_pushtxt8.png) right no-repeat;
    background-size:auto 100%;
    width: 0%;
    height: 3.2%;
    right: 8.2%;
    top: 89.25%;
}
.txt8ani{
   animation: txt8ani 1.2s 0.5s linear forwards;
    -webkit-animation: txt8ani 1.2s 0.5s linear forwards;
}
@keyframes txt8ani{
    100%{
        width: 48%;
    }
}
@-webkit-keyframes txt8ani{
    100%{
        width: 48%;
    }
}
.btn8{
    left: 69%;
    top: 93.19%;
}
.btn8_1{
    left: 69%;
    top: 93.08%;
}
.btn8_2{
    left: 68.8%;
    top: 93.08%;
}
.showbtn{
    background: url(../../images/youngFriend/p1_mod9.png) center no-repeat;
    background-size:contain;
    width: 92%;
    height: 2.7%;
    left: 4%;
    top: 95.7%;
    opacity: 0;
}
.showbtnani{
    animation: showbtnani 0.7s  linear forwards;
    -webkit-animation: showbtnani 0.7s  linear forwards;
}
@keyframes showbtnani {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes showbtnani {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.loading_box{
    position:absolute;
    background:white url(../../images/youngFriend/loading_bg.jpg) center no-repeat;
    background-size:cover;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    overflow: hidden;
    z-index:999;
}
.loading_txt{
    width: 100%;
    top:33%;
    text-align: center;
    color:white;
    font-size:1rem;
    font-weight: 600;
}
.loading_deocr1,
.loading_deocr3{
    background:url(../../images/youngFriend/loading_decor3.png) center no-repeat;
    background-size:contain;
    width: 120%;
    height: 66%;
    left: 7%;
    bottom: -13%;
}
.loading_deocr2{
    background:url(../../images/youngFriend/loading_decor1.png) center no-repeat;
    background-size:contain;
    width: 27%;
    height: 23%;
    left: 13%;
    bottom: 24%;
    transform: scale(0.1) translate(0vw,0vw);
}
.loading_deocr2ani{
    animation: loading_deocr2ani 2s linear forwards;
    -webkit-animation: loading_deocr2ani 2s linear forwards;
}
@keyframes loading_deocr2ani{
    0%{
      transform: scale(0.1) translate(0vw,0vw);
    }
    100%{
      transform: scale(1.5) translate(35vw,-42vw);
    }
}
@-webkit-keyframes loading_deocr2ani{
    0%{
      -webkit-transform: scale(0.1) translate(0vw,0vw);
    }
    100%{
      -webkit-transform: scale(1.5) translate(35vw,-42vw);
    }
}
.loading_deocr3{
    background:url(../../images/youngFriend/loading_decor03.png) center no-repeat;
    background-size:contain;
}
.decortxt1,
.decortxt2,
.decortxt3,
.decortxt4,
.decortxt5,
.decortxt6,
.decortxt7,
.decortxt8{
    background:url(../../images/youngFriend/p1_txt1.png) center no-repeat;
    background-size:contain;
    width: 31%;
    height: 2%;
    left: 4%;
    top: 10%;
}
.decortxt2{
    background:url(../../images/youngFriend/p1_txt2.png) center no-repeat;
    background-size:contain;
    left:67%;
    top: 18.5%;
}
.decortxt3{
    background:url(../../images/youngFriend/p1_txt3.png) center no-repeat;
    background-size:contain;
    left:67%;
    top: 29.5%;
}
.decortxt4{
    background:url(../../images/youngFriend/p1_txt4.png) center no-repeat;
    background-size:contain;
    left:1%;
    top: 38.5%;
}
.decortxt5{
    background:url(../../images/youngFriend/p1_txt5.png) center no-repeat;
    background-size:contain;
    left:68%;
    top: 52%;
}
.decortxt6{
    background:url(../../images/youngFriend/p1_txt6.png) center no-repeat;
    background-size:contain;
    left:2%;
    top: 67%;
    /* z-index: -1; */
}
.decortxt7{
    background:url(../../images/youngFriend/p1_txt7.png) center no-repeat;
    background-size:contain;
    left:2%;
    top: 80%;
}
.decortxt8{
    background:url(../../images/youngFriend/p1_txt8.png) center no-repeat;
    background-size:contain;
    left:68%;
    top: 90%;
}
.p1_ha1,
.p1_ha2,
.p1_ha3,
.p1_ha4{
    background: url(../../images/youngFriend/p1_halo.png) center no-repeat;
    background-size: contain;
    width: 2%;
    height: 0.2%;
    left: 44.5%;
    top: 0.3%;
    mix-blend-mode: screen;
    animation: bglightani 1s infinite;
    -webkit-animation: bglightani 1s infinite;
}
.p1_ha2{
    left: 62%;
    top: 0.4%;
}
.p1_ha3{
    left: 86.5%;
    top: 1.9%;
}
.p1_ha4 {
    left: 92%;
    top: 2.6%;
}