html,body{
    margin: 0 ;
    height:auto;
	width : 100% ;
	position : absolute ;
}
#page{
    position: relative ;
	width : 100% ;
    height : auto ;
}

.mm-page{
    position: relative ;
	width : 100% ;
   height : auto ;
}

.section{
	   position: relative ;
	   width: 100% ;
	   height : 100% ;
	   
}


.wrapper{
	    position : relative ;
		width:100%;
		margin: auto ;
		height : 100% ;
	}
	
	
	
	.part{
	   position: relative ;
	   width: 100% ;
	   height: 100% ; margin-top : 0 ; 
	   overflow: hidden ;
	}
	
	 .left{ 
        position : relative ;
		float: left ;
		width: 50% ;
		height : 100% ;
	  }
	  .right{ 
        position : relative ;
		float: right ;
		width: 50% ;
		height : 100% ;
	  }
	  
	   .words{
	   
		margin-top : 40% ;
		margin-left : 30% ;
	  }
	  .words p{
	    font-size : 28px ;
		font-weight : bold ;
		margin: 10px auto;
	  }
	
	  .words h1{
	    font-size : 48px ;
		margin: 8px auto 24px auto;
	  }
	  
	  .upup{
	    -webkit-transition:  1s all ;transition:  1s all ; -webkit-transition-delay : .6s ;
	}
	
	 #part1{
	     color : white ;
	     background: url('../images/an_bg1.jpg') ;
		 background-size : 100% 100% ;
	 }
	 
	 #hand{
	   position : absolute ;
	   left : 30%;
		bottom : -40px ;
		width :  550px ;
		height :  780px;
		display : none ;
		background: url('../images/an_phone1.png') no-repeat ;
		background-size : 100% auto ;
	
	  }
	  
	   #abutton{
	    margin-left : 30% ;
		
		width : 200px  ;
		height : 70px ;
		
	  }
      #abutton a{
        display: block;
      }
     #abutton img {
         width: 100%;
     }
	  #part2{
	     color : white ;
	     
		 background-color : #212121 ;
	 }
	 
	 #p2phone{
	     margin-top : 10% ;
		 margin-left : 30% ;
		 
		 
	 }
	 
	 #p2phone img{
	     width  : 400px ;
	 }
	 
	 .boxContainer{
	     position : relative;
	     left : 15% ;
         top: 20% ;
		 width : 60% ;
		 height : 200px ;
	 }
	 
	 .item{
	     display : inline-block ;
		 position: absolute ;
		 
	     -webkit-transition: 1s all;transition:  1s all   ; 
	  }
	  #item1{
	     
		  left : 0 ;
	  }
	  #item2{
	      
		  left : 33% ;
	  }
	  #item3{
	     
		  left : 66%  ;
	  }
	  
	 
	 .itemImg{
	     width : 70% ;
		margin-left : 0 ;
	 }
	 
	 .p2words{
	     position : relative ;
		 top : 18% ;
	     margin-left : 15% ;
		 width : 50% ;
		  
	 }
	 

	 
	 #part3{
	     color : white ;
	     
		 background-color : #d7e8f7 ;
	 }
	 
	 #p3phone{
	     margin-top : 10% ;
		 margin-left : 20% ;
	 }
	 
	 #p3phone img{
	     width : 400px ;
	 }
	 
	 #p3animate{
	    position : relative ;
	     left : 30% ;
		 width : 70% ;
		 height : 40% ;
		
	 }
	 
	 .p3words{
	     color : black ;
		
	     margin-left : 32% ;
		 margin-top : 60px;
		 width : 66% ;
	 }
	 .p3words p{
	    font-size : 22px ;
	 }
	 
	 .d{
	    position : absolute ;
		top : -100% ;
		width : 25% ;
		height : 100% ;
		background : url('../images/an_link.jpg') no-repeat ;
		background-position : top center ;
		-webkit-transition: .5s all;transition:  .5s all   ; 
		transition-timing-function:  ease-out;
		-webkit-transition-timing-function:  ease-out;
	 }
	 .drop{
	     top : 0 ;
	 }
	 
	 #d1{
	    left  : 0 ;
		height : 90% ;
		-webkit-transition-delay : .5s ;
	 }
	 #d2{
	    left : 25% ;
		height : 80% ;
		-webkit-transition-delay : 1s ;
	 }
	 #d3{
	    left : 45% ;
		-webkit-transition-delay : 2s ;
	 }
	 #d4{
	    left : 75% ;
		height : 90% ;
		-webkit-transition-delay : 1.5s ;
	 }
	 
	 .p3img{
	     display : block ;
		 position : absolute ;
		 bottom : 0 ;
		 width : 60% ;
		 left : 20% ;
		 
	 }
	 
	 #i1.show{
	   
		
        
		
	 }
	 #i2.show{
	     -webkit-animation-name:swag2;
		-webkit-animation-delay:1s;
        
	 } 
	 #i3.show{
	     -webkit-animation-name:swag3;
		-webkit-animation-delay:2s;
       
	 }
	  #i4.show{
	     -webkit-animation-name:swag4;
		-webkit-animation-delay:1.5s;
       
	 }
	 
	 .show{
	     -webkit-animation-duration:1s;
	      -webkit-animation-iteration-count:1;
		  
		/*-webkit-animation-direction:linear;*/
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-fill-mode :forwards ;
	 }
	 
	  #part4{
	     color : white ;
	     
		 background-color : black ;
	 }
	 
	 #p4phone{
	     position : relative ;
	     top : 10% ;
		 left : 30% ;
		 width : 400px ;
		 
	 }
	 
	  #p4show{
	    width : 100% ;
	 }
	 
	 #rulerContainer{
	     margin-top : 30% ;
		 margin-left : 15% ;
		 width : 50% ;
		  -webkit-transform-origin:50% 50%;
		 transform-origin:50% 50%;
		 transition: all .1s linear 0s, -webkit-transform .1s linear 0s;
		 -webkit-transition: all .1s linear 0s, -webkit-transform .1s linear 0s;
	 }
	 
	 #bk{
	     display : block ; 
		 position : absolute ;
		 z-index : 3 ;
		 width : 82.5% ;
		 height : 34% ;
		 top  : 51.7% ;
		 right : 10% ;
		 background : url('../images/an_keyb.jpg') no-repeat ; 
		 background-size : 104% 100% ;
		 background-position : top right   ;
		 transition: all .4s  ease-out 0s;
		 -webkit-transition: all .4s  ease-out 0s;
	 }
	 
	 #arrow{
	    position : relative ;
		width : 20% ;
		top : 36% ;
		left : 42% ;
        transition: all .4s  ease-out 0s;
		 -webkit-transition: all .4s  ease-out 0s;   
		}

	 
	  .p4words{
	     margin-top : 5% ;
	     margin-left : 15% ;
		 width : 50% ;
	 }
	 
	 
	 @-webkit-keyframes swag1 {
			0% {
				-webkit-transform:rotate(20deg)
			}
			50% {
				-webkit-transform:rotate(-20deg)
			}
			
			100% {
				-webkit-transform:rotate(20deg)
			}
			
			
		}
	@-webkit-keyframes swag2 {
			0% {
				-webkit-transform:rotate(15deg)
			}
			50% {
				-webkit-transform:rotate(-15deg)
			}
			
			100% {
				-webkit-transform:rotate(15deg)
			}
			
			
		}
	@-webkit-keyframes swag3 {
			0% {
				-webkit-transform:rotate(-20deg)
			}
			50% {
				-webkit-transform:rotate(20deg)
			}
			
			100% {
				-webkit-transform:rotate(-20deg)
			}
			
			
		}
	@-webkit-keyframes swag4 {
			0% {
				-webkit-transform:rotate(-15deg)
			}
			50% {
				-webkit-transform:rotate(15deg)
			}
			
			100% {
				-webkit-transform:rotate(-15deg)
			}
			
			
		}
	 #part5{
	     color : black ;
	     
		 background-color : #d7e8f7 ;
	 }	
		
	.p5words{
	   
		
	     margin-left : 32% ;
		 margin-top : 60px;
		 width : 66% ;
	 }
	 .p5words p{
	    font-size : 22px ;
	 }
	 
	 #balls{
	    position : relative ;
	     left : 30% ;
		 width : 70% ;
		 height : 40% ;
		
	 }
	 
	 .b{
	    position : absolute ;
		top : 0 ;
		width : 25% ;
		height : 100% ;
		
		-webkit-animation:ToptoA 1.6s ease-out infinite; 
	 }
	 .drop{
	     top : 0 ;
	 }
	 
	 #b1{
	    left  : 0 ;
		top : 40px ;
		height : 90% ;
		-webkit-animation-delay : .5s ;
	 }
	 #b2{
	    left : 25% ;
		height : 80% ;
		-webkit-animation-delay  : 1s ;
	 }
	 #b3{
	    left : 45% ;
		top : 80px ;
		-webkit-animation-delay  : 2s ;
	 }
	 #b4{
	    left : 75% ;
		height : 90% ;
	    -webkit-animation-delay   : 1.5s ;
	 }
	 
	  @-webkit-keyframes ToptoA {
            0%   { -webkit-transform:translate(0,0px); }
            50%   { -webkit-transform:translate(0,-40px); }
            100% { -webkit-transform:translate(0,0px);  }
        }
	 
	 .p5img{
	     display : block ;
		 position : absolute ;
		 bottom : 0 ;
		 width : 80% ;
		 left : 20% ;
		 
	 }
	 
	  #p5phone{
	     margin-top : 10% ;
		 margin-left : 20% ;
	 }
	 
	 #p5phone img{
	     width : 400px ;
	 }
	 
	 #back6{
	   position: fixed  ;
	   width: 100% ;
	   height: 100% ;
	   bottom : 0 ;
	   background : url('../images/an_bg2.jpg') no-repeat  ;
	   background-size : 100% auto ;
	   background-position : bottom center ;
	}
	
	#part6 h1{
	    position : relative ;
	    margin : auto ;
		top : 30% ;
		font-size : 48px ;
		text-align : center ;
		color : white ;
	}
	
	 .smallBox{
	   position : relative ;
	   margin : auto ;
	   top : 35% ;
	   width : 13% ;
	   height : 200px;
	}
	
	  
	
	  #button2{
	    position : absolute ;
		
		
		width : 100%  ;
		height :100% ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  
	  #footer{
	    position : absolute ;
		bottom : 0 ;
		width : 100% ;
		height : 200px ;
		background-color : rgba(238,238,238,1) ;
		
	}
	
	.foot-wrap{
	   margin-top : 10px ;
	   
	}
	
	 .line{
	      
	      position : relative ;
		  top: 10px ;
		  width : 100% ;
		  height : 1px ;
		   border-top:1px solid rgb(0,0,0) ;
	 }
	 
	 .bottomLine{
	     top: -10px ;
	 }
	 
	  .footer-nav1{
		     display : none ;
		 }
	.menu{
	    position : relative ;
		float : left ;
		width : 60% ;
		height : 30px ;
		padding : 0 ;
		margin-top  : 0 ;
		margin-left : 0 ;
	}
	.sep{
	    position : relative ;
		float : left ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 25px;
		margin-left : 0 ;
	}
	
	
	 .li-item-left{
	    position : relative ;
		float : left ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 25px;
		margin-left : 0 ;
		color : black ;
		padding-right : 25px ;
		border-right:2px solid #bcbcbc;
		
	}
	
	.li-item-left a {
	   color : black ;
	 
	}
	.li-item-right{
	    position : relative ;
		float : right ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 0px;
		margin-left : 25px ;
		
	}
	
	.footer-nav1 ul{
	    border-bottom:1px solid black;
	}
	
	.footer-nav1 .li-item-right{
	    position : relative ;
		float : left  ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-left  : 14% ;
		
		
	}
	
	.footer-nav1 .lastOne{
	    position : relative ;
	    float: right ;
		margin-left : 0  ;
		margin-right : 0  ;
	}
	
	.footer-nav1 .firstOne{
	    position : relative ;
	    float: left ;
		margin-left : 0  ;
		margin-right : 0  ;
	}
	
	#fb-icon{
	    background : url('../images/facebook_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	
	#tw-icon{
	    background : url('../images/twitter_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	#gp-icon{
	    background : url('../images/googleplus_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	#yt-icon{
	    background : url('../images/youtube_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	.clear {
  clear: both;
  }