@charset "utf-8";
/*手机端样式*/
#wrap {display:block;min-width: 320px; margin:0 auto; max-width:640px; width: 100%;overflow: hidden;-webkit-box-sizing: border-box; -moz-box-sizing:border-box; background:#ededed; }
.banner{display:block; with:100%; max-width:640px;*/}
.banner img{display:block; with:100%;}
.telnav {display:block; position:relative; width:100%;
    -moz-perspective:800px;/*将平面图形转换为具有透视的3D图形*/
  	-moz-transform-style:preserve-3d;/*transform-style: flat,所有子元素在 2D 平面呈现 | preserve-3d,保留3D空间*/
  	-webkit-perspective:800px;
  	-webkit-transform-style:preserve-3d;
  	-moz-backface-visibility:;/*定义当元素不面向屏幕时是否可见,如果在旋转元素不希望看到其背面时，该属性很有用*/
    -webkit-backface-visibility:hidden;/*visible背面是可见的,hidden背面是不可见的。*/}
	
.telnav li{display:block;float:left; position:relative;font-size:1.5em;  color:#48487b; background:#ededed;  width:33.3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333%;
  -webkit-animation-name:wobble;/*动画名称，需要跟@keyframes定义的名称一致*/
  -webkit-animation-duration: 1s;/*表示动画持续的时间,如果没有设置duration的话，则表示为无穷大*/
  -webkit-animation-timing-function: linear;/*表示动画使用的时间曲线*/
  -webkit-animation-delay: 0;/*表示开始动画之前的延时*/
  -webkit-animation-iteration-count: 1;/*播放1数，infinite;播放无限次数*/
  -webkit-animation-direction: ;/*表示动画的方向*/
  -moz-animation-name:wobble;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-animation-delay: 0;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: ;	
}
.telnav li span{display:block;float:left;  position:relative; width:100%; text-align:center; padding:2% 0% 18% 0%;}
.telnav .telbtn {display:block;float:left; position:relative;font-size:1.5em; color:#fff; background:#48487b;width:33.3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333%;}
.telnav .telbtn span{}
.icon {display:block; float:left; width:100%;padding:5% 0%;
}
.icon img {display:block; float:left;width:40%; margin:16% 30% 0% 30%;
}
footer {display:block;width:100%;line-height:30px; background:#1f1f1f; color:#fff; font-size:1.4em; text-align:center;}
@-webkit-keyframes wobble{
     0% {
  		-webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
  		-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
  		-webkit-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
  		-webkit-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
  		-webkit-transform:rotateY(00deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }
@-moz-keyframes wobble{
     0% {
  		-moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
  		-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
  		-moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
  		-moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
  		-moz-transform:rotateY(00deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }