@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:#fff; }
.banner{display:block; width:100%; max-width:640px;}
.banner img{/*display:block;*/ width: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:#858585;border-bottom:1px solid #ececec;border-left:1px solid #ececec; width:33%;text-align:center;
  -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: ;	
}
@-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(270deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);}
  100% {-webkit-transform:rotateY(360deg) 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(270deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);}
  100% {-moz-transform:rotateY(360deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);}
  }
.telnav li span{display:block;float:left;  position:relative; width:100%; text-align:center; padding:2% 0% 15% 0%; }
.telnav .telbtn {display:block;float:left; position:relative;font-size:1.5em; color:#858585;width:32%; border-left:2px solid #fff;  /*border-right:1px solid #a5a5a5;*/}
.telnav .telbtn span{}
.icon {display:block;width:50px; height:50px;/*padding:5% 0%; */ margin:18% auto 3%; padding:0%;border-radius:100px; overflow:hidden; }
.c_01{background:#8f8f8f;}
.c_02{background:#f57a4f;}
.c_03{background:#897de8; }
.c_04{background:#ff58da;}
.c_05{background:#28cc27; }
.c_06{background:#279fcc;}
.c_07{background:#f5c84f; }
.c_08{background:#ffa88d; }
.c_09{background:#f54f66; }
.c_10{background:#138AC6; }
.c_11{background:#0A0A0B; }

.icon img {display:block; width:100%; min-height:100%; vertical-align:middle;}
footer {display:block;width:100%;line-height:30px; background:#1f1f1f; color:#fff; font-size:1.4em; text-align:center;}