html, body {
        position: relative;
        height: 100%;
        font-family: myFirstFont;
        -webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;
    }
    * {
        -webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
    }
    body {
        background: #eee;  
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
        font-family: myFirstFont;
        -webkit-backface-visibility: hidden;
    }
    @font-face {
        font-family: myFirstFont;
        src: url(../img/qingshu.otf)
    }
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;}

      input:focus,textarea {
       outline: none;
       font-family: myFirstFont;
    }
    textarea{
        background: none;
        resize: none;
        border: none;    
        position: absolute;
        top: 190px;
        left: 100px;
        font-size: 40px;
        width: 520px;
        height: 280px;
        line-height: 70px;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
   .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
       align-items: center;
           font-family: myFirstFont;
}
*{ margin:0; padding:0}
img{ border:none;outline: none;}
a{ text-decoration:none; color: #333333;}
a:hover{ text-decoration:none; color: #a43130;}
li{ list-style: none;}
    .slide1{
        background: url(../img/background1.png) no-repeat;      
    }
    .slide2{
        background: url(../img/background2.png) no-repeat;      
    }
    .slide3,.slide5{
        background: url(../img/background3.png) no-repeat;      
    }
    .slide4{
        background: url(../img/background4.png) no-repeat;      
    }
    .slide1 .swing{
        position: absolute;
        bottom: 160px;
        left: 190px;
        width: 280px; 
        height: 313px;
        background-image:url(../img/css_sprites.png);
        -webkit-animation:p1 steps(1,end) 2.5s infinite;
    }
@-webkit-keyframes p1{
0%{background-position:-1210px -1009px;}
2%{background-position: -1510px -10px;}
4%{background-position: -1510px -343px;}
6%{background-position:-1510px -676px;}
8%{background-position:-1510px -1009px;}
10%{background-position:-10px -1342px;}
12%{background-position: -310px -1342px;}
14%{background-position:  -310px -10px;}
16%{background-position: -1210px -343px;}
18%{background-position:-610px -10px;}
20%{background-position: -10px -343px;}
22%{background-position: -310px -343px;}
24%{background-position:-610px -343px;}
26%{background-position: -910px -10px;}
28%{background-position: -910px -343px;}
30%{background-position: -10px -676px;}
32%{background-position:-310px -676px;}
34%{background-position:  -610px -676px;}
36%{background-position: -910px -676px;}
38%{background-position: -1210px -10px}
40%{background-position: -10px -10px;}
42%{background-position: -1210px -676px;}
44%{background-position:-10px -1009px;}
46%{background-position:-310px -1009px;}
48%{background-position: -610px -1009px;}
50%{background-position:  -910px -1009px;}
		
52%{background-position: -610px -1009px;}				
54%{background-position:-310px -1009px;}				
56%{background-position:-10px -1009px;}				
58%{background-position: -1210px -676px;}				
60%{background-position: -10px -10px;}				
62%{background-position: -1210px -10px}				
64%{background-position: -910px -676px;}				
66%{background-position:  -610px -676px;}				
68%{background-position:-310px -676px;}				
70%{background-position: -10px -676px;}				
72%{background-position: -910px -343px;}				
74%{background-position: -910px -10px;}				
76%{background-position:-610px -343px;}				
78%{background-position: -310px -343px;}				
80%{background-position: -10px -343px;}				
82%{background-position:-610px -10px;}				
84%{background-position: -1210px -343px;}				
86%{background-position:  -310px -10px;}				
88%{background-position: -310px -1342px;}				
90%{background-position:-10px -1342px;}				
92%{background-position:-1510px -1009px;}				
94%{background-position:-1510px -676px;}				
96%{background-position: -1510px -343px;}				
98%{background-position: -1510px -10px;}				
100%{background-position:-1210px -1009px;}				

}
    .slide1 .leftflower{
        position: absolute;
           bottom: 192px;
    left: 120px;
        width: 80px;
        height: 103px;
        background: url(../img/css_sprites1.png)  -750px -589px;
      
    }
     .slide1 .rightflower{
        position: absolute;
           right: 204px;
        bottom: 60px;
        width: 121px;
        height: 89px;
      background: url(../img/css_sprites1.png) -750px -480px;
    }

    .slide1 .butterfly, .slide4 .butterfly{
         width: 720px; height: 1280px;
         background-image:url(../img/css_sprites0.png);
        -webkit-animation:p0 steps(1,end) 4s infinite;
         position: absolute;
         bottom: 0;
    }
        @-webkit-keyframes p0{
        0%{  background-position:    -10px -1310px;}  
        10%{  background-position: -1490px -2610px;}
        15%{  background-position:   -2970px -10px;}
        20%{  background-position:  -750px -1310px;}
        25%{  background-position:  -2970px -1310px;}
        30%{  background-position:  -3710px -10px;}
        35%{  background-position:   -1490px -1310px;}
        40%{  background-position: -3710px -1310px;}
        45%{  background-position: -10px -10px;}
        55%{  background-position: -10px -2610px;}
        65%{  background-position: -750px -2610px;}
        75%{  background-position: -750px -10px;}
        85%{  background-position:  -2230px -1310px;}
        95%{  background-position:  -1490px -10px;}
        100% {background-position:  -2230px -10px;}     
    }
   .slide1 .butterfly2{
       display: block;
        position: absolute;
        bottom: 330px;
        right: 152px;
        width: 51px; 
            z-index: 999;
        height: 34px;
        background-image:url(../img/css_sprites1.png);
        -webkit-animation:butterfly steps(1,end) .565s infinite;
    }
    @-webkit-keyframes butterfly{
        0%{  
            background-position:   -891px -480px;
        }    
        50%{  
            background-position: -891px -534px;
        }    
        100%{  
            background-position:    -891px -480px;
        }

    }
    .slide1 .tree{
        position: absolute;
        bottom: 0;     
        width: 720px; height: 936px;
        background: url(../img/css_sprites1.png) -10px -10px;

    }
    .slide1 .logo{
        position: absolute;
        top: 50px;
        left: 50px;
        width: 161px; height: 77px;
        background: url(../img/css_sprites1.png)  -750px -383px;
    }
    .slide1 .text{
        position: absolute;
        top: 200px;
        right: 40px;
        width: 229px;
        height: 353px;
         background: url(../img/css_sprites1.png) -750px -10px;
    }
    .slide2 .leaf{
        width: 301px; height: 187px;
        background: url(../img/css_sprites2.png) -630px -10px;
    }
    .leaf1{
           position: absolute;
           top: 140px;
           left: 25%;
    }
    .leaf2{
           position: absolute;
           top: 340px;
           left: 25%;
    }
    .leaf3{
           position: absolute;
           top: 540px;
           left: 25%;
    }
  
    .slide2 .name{
        position: absolute;
        top: 55px;
        left: 115px;
        width: 82px; height: 46px;
        background: url(../img/css_sprites2.png)  -739px -399px;
    }
    .slide2 .phone{
        position: absolute;
           top: 55px;
    left: 115px;
        width: 78px; height: 44px;
        background: url(../img/css_sprites2.png) -841px -399px;
    }
    .slide2 .address{
       position: absolute;
       top: 55px;
       left: 115px;
       width: 95px; height: 58px;
       background: url(../img/css_sprites2.png) -818px -299px;
    }
    .slide2 .submit,.slide5 .submit{
        position: absolute;
        bottom: 160px;
        left: 240px;
        width: 168px; height: 162px;
        background: url(../img/css_sprites2.png)  -630px -217px;
    }
    .slide4 .goback{
        position: absolute;
        bottom: 10px;
        right: 149px;
        width: 168px;
        height: 162px;
        background: url(../img/css_sprites2.png) -630px -217px;
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }
    .list-item p {
        font-size: 26px;
        margin-top: 4px;
        color: #7dc71d;
        position: absolute;
        left: 200px;
        text-align: left;
    }
    .form_input{
         font-size: 32px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        border-style:none;
        font-family: myFirstFont;
        background-color: transparent;
    }
    .slide2 .form_input{
        position: absolute;
        top: 15px;
        left: 70px;
        width: 200px;
        height: 131px;
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        border-style:none;
        background-color: transparent;
    }
    .slide3 .tableform .form_input{
        color: #48a732;
        width: 500px;
        height: 70px;
        text-align: left;
            font-size: 24px;
                font-family: myFirstFont;
    }
    .slide3 .form_input:nth-child(1){
        position: absolute;
        left: 103px;
        text-align: center;
      
    }
    .slide3 .form_input:nth-child(2){
       width: 240px;
       position: absolute;
       left: 245px;
      
    }
    .slide3 .form_input:nth-child(3){
         width: 120px;
         position: absolute;
         right: 110px;
  
    }
    .slide2 .submittext{
        width: 89px; 
        height: 54px;
        position: absolute;
        top: 40px;
        left: 40px;
        background: url(../img/css_sprites2.png)  -630px -399px;
    }
    .slide2 .form_input.input_address{
          font-size: 24px;
    top: 48px;
    line-height: 30px;
    }
    .slide2 .modal{
        position: absolute;
        top: 280px;
        left: 18px;
        width: 600px; height: 456px;
        background: url(../img/css_sprites2.png)  -10px -10px;
        border-radius: 40px;
    }
    .slide2 .modalbackground{
         width:100%;
         height: 1280px;
         background: rgba(4, 32, 39, 0.8);
         position: absolute;
         left: 0;
         top: 0;
    }
    .slide2 .form{
        width: 336px; height: 155px;
        position: absolute;
        top: 90px;
        left: 60px;
        background: url(../img/css_sprites2.png) -10px -486px;
    }
    .slide2 .submitbtn{
          width: 102px;
    height: 62px;
    position: absolute;
    bottom: 125px;
     left: 60px;
    background: url(../img/css_sprites2.png) -818px -217px;
   
    }
    .slide2 .getcode {
       width: 130px; height: 71px;
       position: absolute;
       top: 98px;
       right: 72px;
       background: url(../img/css_sprites2.png)  -366px -486px;
    } 
    .slide3 .submitbtn{
       position: absolute;
       width: 186px; height: 152px;
       background: url(../img/css_sprites3.png)-10px -962px;
       bottom: 20px;
       left: 227px;
    }
    .slide3 .title1,.slide4 .title1{
       position: absolute;
       top: 50px;
       left: -32px;
       width: 720px; height: 73px;
       background: url(../img/css_sprites3.png)   -10px -869px;
    }

    .slide3 .title2{
       position: absolute;
       top: 110px;
       left: 140px;
       width: 444px; height: 45px;
       background: url(../img/css_sprites3.png) -956px -103px;

    }
    .slide3 .tableform {
      position: absolute;
      width: 720px; height: 839px;
      background: url(../img/css_sprites3.png)  -750px -10px;
      background-repeat: no-repeat;
      left: -50px;
      margin: auto;
      top: 100px;
      transform: scale(.9);
    }
    .slide3 .tableform1{  
      background: url(../img/css_sprites3.png)   -10px -10px;    
    }
    .tableform .list{
        width: 100%;
        height: 600px;
        position: absolute;
        top: 160px;
    }
    .tableform .list-item{
        height: 70px;
        width: 100%;
    }
    .slide4 .text{
       position: absolute;
       bottom: 20px;
       left: 130px;
       width: 186px; height: 111px;
       background: url(../img/css_sprites4.png)  -205px -10px;
    }
    .slide4 .sharebtn {
        width: 110px;
        height: 105px;
        position: absolute;
        bottom: 45px;
        right: 55px;
        background: url(../img/css_sprites4.png) -130px -150px;
    }
     .slide4 .tree{
        width: 720px;
        height: 1280px;
        position: absolute; 
        bottom: -60px;
        left:-40px;        
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        will-change: transform;
        
    }
    .slide4 .tree.grow{
           background: url(../img/css_sprites41.png) no-repeat;     
           background-position:  -750px -3910px;
           -webkit-transform: scale(0.9);
           transform: scale(0.9);
           will-change: transform;
          -webkit-animation:p3 steps(1,end) 1.8s 1;
  
    }
    
    @-webkit-keyframes p3{
        0%{  


            background-position:    -750px -10px;
        }      
        4%{  
            background-position:-750px -2610px;
        }   
        8%{  
            background-position: -1490px -10px;
        }    
        12%{  
            background-position:   -2230px -10px;
        }
        16%{  
            background-position:   -10px -1310px;
        }
        22%{  
            background-position:  -750px -1310px;
        }
        26%{  
            background-position:  -1490px -1310px;
        }
        32%{  
            background-position:  -2230px -1310px;
        }
        36%{  
            background-position:   -2970px -10px;
        }
        42%{  
            background-position:  -2970px -1310px;
        }
        46%{  
            background-position: -3710px -10px;
        }
        52%{  
            background-position: -3710px -1310px;
        }
         56%{  
            background-position: -10px -2610px;
        }
         62%{  
            background-position:   -10px -10px;
        }
           66%{  
            background-position:   -1490px -2610px;
        }

        72%{
             background-position:  -2230px -2610px;
        }
         76%{
             background-position:  -2970px -2610px;
        }
        82%{
             background-position:   -3710px -2610px;
        }
        86%{
             background-position:   -4450px -1310px;
        }
         92%{
             background-position:  -4450px -2610px;
        }
         96%{
             background-position:   -5190px -10px;
        }
        100%{
             background-position:  -750px -3910px;
        }
        
    }
    .slide4 .message{
        color: #237b0e;
        display: table;
        box-sizing: border-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
         
    }
    .slide4 .message p {
            display: table-cell;
        vertical-align: middle;
          text-align: center;
        font-size: 24px;
        font-family: myFirstFont;
    }
    .slide4 .message1{
        position: absolute;
        bottom: 334px;
        right: 30px;
        font-size: 25px;
        width: 244px;
        height: 140px;
        transform: rotate(340deg);
        transform: scale(0.8) rotate(340deg);
    }
    
    .slide4 .message2{
        position: absolute;
        bottom: 393px;
        left: 8px;
        font-size: 25px;
        width: 244px;
        height: 117px;
        transform: rotate(340deg);
        transform: scale(0.7) rotate(376deg);
    }
   .slide4 .message3 {
       position: absolute;
        bottom: 498px;
        right: 87px;
        font-size: 25px;
        width: 292px;
        transform: scale(0.5) rotate(337deg);
        height: 164px;
}
    .slide4 .message4{
        position: absolute;
          bottom: 548px;
        left: 67px;
        font-size: 25px;
        width: 244px;
        height: 120px;
        transform: scale(0.6) rotate(376deg);

    }
    .slide4 .message5{
        position: absolute;
        bottom: 685px;
        right: 155px;
        font-size: 25px;
        width: 244px;
            height: 108px;
        transform: scale(0.6) rotate(333deg);
    }
    .slide4 .message6{
        position: absolute;
        bottom: 721px;
        left: 105px;
        font-size: 25px;
        width: 244px;
        height: 104px;
        transform: scale(0.6) rotate(376deg);
    }
         .slide4 .message7{
         position: absolute;
    top: 342px;
    right: 177px;
    font-size: 26px;
    width: 244px;
    height: 136px;
            transform: scale(0.55) rotate(343deg);
    }
    .slide4 .message8{
          position: absolute;
    bottom: 863px;
    left: 111px;
    font-size: 22px;
    height: 110px;
    width: 194px;
        transform: scale(0.6) rotate(376deg);
    }

     .slide4 .message9{
        position: absolute;
        top: 245px;
        right: 223px;
        font-size: 25px;
        width: 244px;
            height: 100px;
        transform: scale(0.5) rotate(342deg);
    }
    .slide5 .sharemodal {
        width: 720px;
        height: 575px;
        position: absolute;
        top: 120px;
        left: -42px;
        transform: scale(0.9);
         color: #48a732;
        background: url(../img/sharemodal.png);
    }

    .sharepic {
        display: block;
        width: 150%;
        height: 1280px;
        position: absolute;
        right: -70px;
        background: rgba(0,0,0,.6);
        z-index: 99;
    }
    .sharepic img {
        width: 200px;
        height: 209px;
        position: absolute;
        right: 84px;
    }
    

    .scene{
        -webkit-background-size: 100%;
        background-size: 100% 100%;
        display: none;
    }


#loader {
    margin: auto;
    position: relative;
    width: 50px;
    height: 100px;
    top: 250px
}

@-webkit-keyframes loader {
    0% {
        left: -100px
    }

    100% {
        left: 110%
    }
}

@keyframes loader {
    0% {
        left: -100px
    }

    100% {
        left: 110%
    }
}

#box {
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-animation: animate .5s linear infinite;
    animation: animate .5s linear infinite;
    border-radius: 3px
}

@-webkit-keyframes animate {
    17% {
        border-bottom-right-radius: 3px
    }

    25% {
        -webkit-transform: translateY(9px) rotate(22.5deg);
        transform: translateY(9px) rotate(22.5deg)
    }

    50% {
        -webkit-transform: translateY(18px) scale(1,.9) rotate(45deg);
        transform: translateY(18px) scale(1,.9) rotate(45deg);
        border-bottom-right-radius: 40px
    }

    75% {
        -webkit-transform: translateY(9px) rotate(67.5deg);
        transform: translateY(9px) rotate(67.5deg)
    }

    100% {
        -webkit-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

@keyframes animate {
    17% {
        border-bottom-right-radius: 3px
    }

    25% {
        -webkit-transform: translateY(9px) rotate(22.5deg);
        transform: translateY(9px) rotate(22.5deg)
    }

    50% {
        -webkit-transform: translateY(18px) scale(1,.9) rotate(45deg);
        transform: translateY(18px) scale(1,.9) rotate(45deg);
        border-bottom-right-radius: 40px
    }

    75% {
        -webkit-transform: translateY(9px) rotate(67.5deg);
        transform: translateY(9px) rotate(67.5deg)
    }

    100% {
        -webkit-transform: translateY(0) rotate(90deg);
        transform: translateY(0) rotate(90deg)
    }
}

#shadow {
    width: 50px;
    height: 5px;
    background: #000;
    opacity: .1;
    position: absolute;
    top: 59px;
    left: 0;
    border-radius: 50%;
    -webkit-animation: shadow .5s linear infinite;
    animation: shadow .5s linear infinite
}

@-webkit-keyframes shadow {
    50% {
        -webkit-transform: scale(1.2,1);
        transform: scale(1.2,1)
    }
}

@keyframes shadow {
    50% {
        -webkit-transform: scale(1.2,1);
        transform: scale(1.2,1)
    }
}

 .music {
                width: 2rem;
                height: 2rem;
                position: absolute;
                right: .5rem;
                top: .5rem;
                z-index: 100
            }

            .music .control {
                width: 2.5rem;
                height: 2.5rem;
                background: url(//oss3.rabbitpre.com/rp2/apps/static/widget/music/music_c0fda01.gif) transparent no-repeat center center;
                background-size: contain
            }

            .music .control .control-after {
                width: 1.5rem;
                height: 1.5rem;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -.75rem;
                margin-left: -.75rem;
                background: url(//oss3.rabbitpre.com/rp2/apps/static/widget/music/music_off_8d94020.png) transparent no-repeat center center;
                background-size: 100% 100%;
                -webkit-animation: rotating 1.2s linear infinite;
                animation: rotating 1.2s linear infinite;
                z-index: -1
            }

            .music.stopped .control {
                background: 0 0
            }

            .music.stopped .control .control-after {
                -webkit-animation: none;
                animation: none
            }

              .music.stopped .control {
                background: 0 0
            }

            .music.stopped .control .control-after {
                -webkit-animation: none;
                animation: none
            }
@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

@keyframes rotating {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

@-moz-keyframes rotating {
	from {
		-moz-transform: rotate(0)
	}

	to {
		-moz-transform: rotate(360deg)
	}
}


  .wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 999;
  }

  .textmodal {
    background: url(../img/lm.png) no-repeat;
    position: absolute;
    top: 160px;
    left: 30%;
    width: 234px;
    height: 230px;
    background-size: 100%;
  }
  .textmodal .texts{
         position: absolute;
    top: 20%;
    margin: auto 5%;
    width: 90%;
    color: #fff;
 }

  body {
	color: #333;
}
#progressbar{
  height: 26px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  background: rgba(159, 159, 159, 0.5);
  border-radius: 10px;
  margin: -20px 0 0 -100px;
  padding: 2px;
}
#loading{
  transition: all 500ms ease;
  height: 20px;
  width: calc(100% - 10px);
  border-radius: 8px;
  background: green;
  position: absolute;
  margin: 3px;
  display: inline-block;
  animation: load 10s ease 1;
}
#load{
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  margin-top: -30px;
}

@keyframes load{
  0%{
    width: 2%;
  }
  10%{
    width: 10%;
  }
  100%{
    width: 90%;
  }
}