wap代码

wap/css/mobiles.css

@@ -0,0 +1,345 @@
+/*===全局===*/
+* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
+html{-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%;}
+body{font-family: "Microsoft Yahei",Helvetica, Arial, sans-serif; font-size: 1.4rem; color:#333;}
+body, button, input, optgroup, select, textarea, h1, h2, h3, h4, h5, h6, p, figure, form, blockquote, ul, ol, li, dl, dd{margin:0;padding:0}
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display: block;}
+input[type="button"], input[type="submit"], input[type="reset"]{-webkit-appearance:none;}
+img{vertical-align:middle; max-width:100%; border:0; height: auto;}
+ul,ol,li{list-style:none;}
+input,textarea,select{outline:none; font-size:100%;}
+a{color:#333; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
+.table{border-collapse:collapse; border-spacing:0;}
+.clear{clear:both; height:0; overflow:hidden;}
+.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
+.fl{float:left;}
+.fr{float:right;}
+.tl {text-align: left;}
+.tr {text-align: right;}
+html,body{height:99.9%; min-height:100%; position:relative;}
+.page{width:100%; min-height:100%; overflow-x:hidden; position: relative;}
+.page_header{padding-top:50px;}
+.page_footer{padding-bottom: 50px;}
+.page_header_footer{padding: 44px 0 49px 0;}
+.page_full{width:100%; height: 100%; position:absolute; top:0; left:0; overflow:hidden;}
+.pad100 {width: 100%; padding: 0 4%;}
+.bgfff {background: #fff;}
+.mt5 {margin-top: 5px;}
+.mt10 {margin-top: 10px;}
+.pt5 {padding-top: 5px;}
+.pt10 {padding-top: 10px;}
+.padall {width: 100%; padding: 15px 4%;}
+.bb1 {border-bottom: 1px solid #eaeaea;}
+body {background: #eaeaea;}
+body.isMask {overflow: hidden !important;}
+html.isMask {overflow: hidden !important;}
+
+.ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
+.ellipsis-2 {display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
+.ellipsis-3 {display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
+
+/*加载动画*/
+.bj-loading{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); visibility: visible; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
+.bj-loading.on{visibility: hidden; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
+.bj-loading .load-box{position: absolute; top: 50%; margin-left: -3.5rem; margin-top: -3.5rem; left: 50%;}
+.bj-loading .load-box .ball {position: relative; background: url(../img/loadinglogo.png) no-repeat center center; background-size: 55%;}
+.bj-loading .load-box .ball > div {background: transparent; width: 7rem; height: 7rem; border-radius: 100%; margin: 2px; border: 2px solid #fff; border-bottom-color: transparent; display: inline-block; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite;}
+
+/*左侧菜单*/
+#menu_input {display: none;}
+section {position: relative; transition: all 0.25s; background: #eaeaea;}
+#sidenav {background: #333; width: 130px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 80px;}
+#sidenav a { color: #fff; font-size: 15px; line-height: 42px;}
+#sidenav li {text-align: center; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s;}
+#menu_input.on ~ section {transform: translateX(130px);}
+#menu_input.on ~ #sidenav li {opacity: 1; transform: translateX(0);}
+#menu_input.on ~ #sidenav li:nth-of-type(1) {transition-delay: 0.08s;}
+#menu_input.on ~ #sidenav li:nth-of-type(2) {transition-delay: 0.16s;}
+#menu_input.on ~ #sidenav li:nth-of-type(3) {transition-delay: 0.24s;}
+#menu_input.on ~ #sidenav li:nth-of-type(4) {transition-delay: 0.32s;}
+#menu_input.on ~ #sidenav li:nth-of-type(5) {transition-delay: 0.40s;}
+#menu_input.on ~ #sidenav li:nth-of-type(6) {transition-delay: 0.48s;}
+#menu_input.on ~ #sidenav li:nth-of-type(7) {transition-delay: 0.52s;}
+#menu_input.on ~ #sidenav li:nth-of-type(8) {transition-delay: 0.60s;}
+#menu_input.on ~ #sidenav li:nth-of-type(9) {transition-delay: 0.68s;}
+#menu_input.on ~ header .menu i:before {content: "\e63d";}
+#mask {width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 9998; display: none;}
+#mask.on {display: block;}
+#sidenav .tel {position: absolute; bottom: 5%; left: 0; width: 130px; text-align: center;}
+#sidenav .tel span {display: block;}
+#sidenav .tel a {line-height: 24px;}
+
+.header {width: 100%; height: 50px; position: fixed; top: 0; left: 0; z-index: 999; padding: 0 4%; background: rgba(0,0,0,0);}
+.header .logo {padding: 10px 0;}
+.header .logo img {height: 30px; display: block;}
+.header .menu label{padding-left: 3%;}
+.header .menu i {font-size: 26px; line-height: 52px; color: #fff; transition: all 0.5s;}
+
+.all_contact .title {font-size: 18px; color: #000; line-height: 24px; padding-bottom: 5px;}
+.all_contact .info {font-size: 14px; color: #7a7a7a; line-height: 22px;}
+.all_contact .info a {color: #7a7a7a;}
+.all_footer {background: #eaeaea; text-align: center; font-size: 13px; color: #7a7a7a; line-height: 40px;}
+
+.banner img {width: 100%;}
+.banner .swiper-pagination-bullet {background: #fff; opacity: 0.8;}
+.banner .swiper-pagination-bullet-active {background: #ff0000; opacity: 0.8;}
+
+.page_title {padding: 20px 0; text-align: center;}
+.page_title .p1 {font-size: 17px; color: #333; line-height: 30px;}
+.page_title .p2 {font-size: 14px; color: #666; line-height: 20px;}
+
+.pageType {line-height: 40px; background: #303183; color: #fff;}
+.pageType .title {font-size: 16px;}
+.pageType .right {font-size: 18px; transition: all 0.5s;}
+.pageType .right.on {transform:rotate(-180deg);}
+.pageType_list {background: #303183; border-top: 1px solid #fff; display: none; position: fixed; top: 95px; left: 0; z-index: 999;}
+.pageType_list li {line-height: 40px; border-bottom: 1px dashed #fff;}
+.pageType_list li:last-of-type {border: none;}
+.pageType_list li a {font-size: 16px; color: #fff;}
+
+.in_service .top .title {font-size: 18px; color: #333; line-height: 26px;}
+.in_service .top .line span {display: block; width: 10px; height: 2px; background: #8c8c8c;}
+.in_service .top .line {padding: 8px 0;}
+.in_service .top .des {font-size: 13px; color: #8c8c8c; line-height: 20px;}
+.in_service .top .icon i {font-size: 24px; color: #666; line-height: 40px;}
+.in_service .top .img img {width: 100%;}
+.in_service .list li {border-bottom: 1px solid #eaeaea; padding-top: 30px; padding-bottom: 30px;}
+.in_service .list .li2 {text-align: right;}
+.in_service .list a {display: block;}
+.in_service .list .text {width: 80%;}
+.in_service .list .p1 {font-size: 18px; color: #333; line-height: 30px;}
+.in_service .list .p2 {font-size: 14px; color: #333; line-height: 25px;}
+.in_service .list .p3 {font-size: 12px; color: #888; line-height: 25px;}
+.in_service .list .icon {width: 20%; line-height: 80px; height: 80px; overflow: hidden;}
+.in_service .list .icon i {font-size: 36px; color: #666;}
+.in_service .list li:nth-of-type(3) .icon i {font-size: 42px; color: #666;}
+
+.in_bigCase .title {font-size: 18px; color: #333; line-height: 30px; letter-spacing: 3px;}
+.in_bigCase .des {font-size: 14px; color: #555; line-height: 30px;}
+.in_bigCase .des2 {font-size: 14px; color: #888; line-height: 22px;}
+.in_bigCase .line span {display: block; width: 20%; height: 1px; background: #333;}
+.in_bigCase .line {padding: 10px 0;}
+.in_bigCase .logo img {height: 30px;}
+.in_bigCase .img {padding-top: 20px;}
+.in_bigCase .img img {width: 100%;}
+
+.in_case_list {padding-bottom: 40px; position: relative;}
+.in_case_list img {width: 100%;}
+.in_case_list .title {font-size: 16px; color: #333; line-height: 26px; padding-top: 10px;}
+.in_case_list .des {font-size: 14px; color: #999; line-height: 24px;}
+.in_case_list .swiper-pagination {width: 100%;}
+.in_case_list .swiper-pagination-bullet {background: #c3c3c3; opacity: 0.8; margin: 0 3px;}
+.in_case_list .swiper-pagination-bullet-active {background: #ff0000; opacity: 0.8;}
+
+.in_news_list li {border-bottom: 1px solid #eaeaea;}
+.in_news_list .img {width: 40%;}
+.in_news_list .img img {width: 100%;}
+.in_news_list .right {width: 60%; padding-left: 4%;}
+.in_news_list .title {font-size: 16px; color: #333; line-height: 30px;}
+.in_news_list .des {font-size: 14px; color: #888; line-height: 20px; padding-top: 3%;}
+
+.about_history .title1 {font-size: 22px; color: #333; line-height: 36px; font-weight: bold;}
+.about_history .title2 {font-size: 14px; color: #333; line-height: 20px; padding: 8px 0;}
+.about_history .des {font-size: 13px; color: #888; line-height: 24px; padding-top: 5px;}
+.about_history .des p {padding-bottom: 5px;}
+
+.about_data {background: url(../img/about_img.jpg) no-repeat center center; background-attachment: fixed;}
+.about_data .title {font-size: 16px; color: #fff; font-weight: bold; line-height: 30px; letter-spacing: 1px; padding-top: 10px;}
+.about_data .des {font-size: 13px; color: #fff; line-height: 24px;}
+.about_data .des p {padding-top: 10px;}
+.about_data .data {padding: 20px 0 10px;}
+.about_data li {width: 33.333%; float: left; text-align: center; color: #fff;}
+.about_data li .num {font-size: 22px; font-weight: bold; line-height: 24px;}
+
+.about_partners {text-align: center;}
+.about_partners .title {padding: 5px 0 10px;}
+.about_partners .title .p1 {font-size: 16px; color: #333; line-height: 26px;}
+.about_partners .title .p2 {font-size: 15px; color: #999; line-height: 26px;}
+.about_partners .des {font-size: 13px; color: #999; line-height: 24px; padding: 10px 0;}
+
+.contact_page .info {border-bottom: 1px solid #eaeaea;}
+.contact_page .info .title {font-size: 13px; color: #999; line-height: 24px;}
+.contact_page .info .des {font-size: 14px; color: #333; line-height: 24px;}
+.contact_page .kefu {text-align: center; border-bottom: 1px solid #eaeaea;}
+.contact_page .kefu .left {width: 50%; height: 130px; border-right: 1px solid #eaeaea; }
+.contact_page .kefu .right {width: 50%; height: 130px;}
+.contact_page .kefu .img img {width: 90px;}
+.contact_page .kefu .qq {margin: 10px 0;}
+.contact_page .kefu .qq a {display: block; width: 100%; height: 36px; line-height: 36px; border-radius: 5px; border: 1px solid #999; font-size: 14px; color: #555;}
+.contact_page .kefu .qq img {height: 20px; margin-right: 5px; margin-top: -5px;}
+
+.web_advantage .list li {text-align: center; padding: 30px 8%; background-size: 100%; color: #fff;}
+.web_advantage .list li:nth-of-type(1) {background: url(../img/web_advantage_img1.jpg) no-repeat center center;}
+.web_advantage .list li:nth-of-type(2) {background: url(../img/web_advantage_img2.jpg) no-repeat center center;}
+.web_advantage .list li:nth-of-type(3) {background: url(../img/web_advantage_img3.jpg) no-repeat center center;}
+.web_advantage .list li:nth-of-type(4) {background: url(../img/web_advantage_img4.jpg) no-repeat center center;}
+.web_advantage .list li .icon i {font-size: 36px; line-height: 40px;}
+.web_advantage .list li .name {font-size: 16px; line-height: 40px;}
+.web_advantage .list li .des {font-size: 14px; line-height: 22px; min-height: 66px;}
+
+.web_service .list li {background: #f2f1f1; margin-bottom: 5px; padding: 10px 0;}
+.web_service .list li:last-of-type {margin-bottom: 0;}
+.web_service .list li .icon {width: 15%; text-align: center; line-height: 68px;}
+.web_service .list li .icon i {font-size: 26px; border-right: 1px solid #bfbfbf; width: 100%; display: inline-block; line-height: 30px;}
+.web_service .list li .right {width: 85%; padding: 0 2%;}
+.web_service .list li .title {font-size: 15px; color: #333; line-height: 24px;}
+.web_service .list li .des {font-size: 14px; color: #888; line-height: 22px;}
+
+.web_flow_list {position: relative; padding-bottom: 50px;}
+.web_flow_list li {float: left; text-align: center; background: #f9f9f9; box-shadow: 0 3px 8px #bbb;}
+.web_flow_list .title {font-size: 18px; color: #fff; line-height: 50px; background-size: 100%;}
+.web_flow_list li.li1 .title {background: #2665c3 url(../img/web_flow_num1.png) no-repeat center center;} 
+.web_flow_list li.li2 .title {background: #2665c3 url(../img/web_flow_num2.png) no-repeat center center;} 
+.web_flow_list li.li3 .title {background: #2665c3 url(../img/web_flow_num3.png) no-repeat center center;} 
+.web_flow_list li.li4 .title {background: #2665c3 url(../img/web_flow_num4.png) no-repeat center center;} 
+.web_flow_list .icon i {display: inline-block; width: 45px; height: 45px; border-radius: 50%; border: 2px solid #666; text-align: center; color: #666; line-height: 45px; font-size: 22px;}
+.web_flow_list .name {line-height: 45px; font-size: 16px; color: #666;}
+.web_flow_list .name span {padding-left: 15px;}
+.web_flow_list .list_w {padding: 15px 0;}
+.web_flow_list .list_c {display: inline-block; margin: 10px 0;}
+.web_flow_list .swiper-container {overflow: visible;}
+.web_flow_list .swiper-wrapper {margin-left: 25%;}
+.web_flow_list .swiper-pagination {width: 100%; bottom: 20px; left: 0;}
+.web_flow_list .swiper-pagination-bullet {margin: 0 4px;}
+.web_flow_list .swiper-pagination-bullet-active {background: #2665c3;}
+
+.caseList li {border-bottom: 1px solid #eaeaea;}
+.caseList img {width: 100%;}
+.caseList .title {font-size: 16px; color: #333; line-height: 26px; padding-top: 10px;}
+.caseList .des {font-size: 14px; color: #999; line-height: 24px;}
+
+.wechat_service_list li {float: left; width: 23%; margin-right: 2.6%; margin-bottom: 10px; text-align: center; padding: 5px 0 10px; border: 1px solid #e7e7e7; transition: all 0.3s;}
+.wechat_service_list li:nth-of-type(4n) {margin-right: 0;}
+.wechat_service_list .icon {line-height: 40px; height: 40px; overflow: hidden;}
+.wechat_service_list i {font-size: 26px; color: #999;}
+.wechat_service_list .title {font-size: 14px; color: #333;}
+
+.wechat_function_list {padding-bottom: 50px; position: relative;}
+.wechat_function_list li {padding: 0 5%; text-align: center;}
+.wechat_function_list .title {font-size: 14px; color: #333; line-height: 20px; padding: 6px 0 3px;}
+.wechat_function_list .des {font-size: 12px; color: #888; line-height: 16px;}
+.wechat_function_list .swiper-pagination {width: 100%; bottom: 20px; left: 0;}
+.wechat_function_list .swiper-pagination-bullet {margin: 0 4px; background: none; border: 1px solid #333;}
+.wechat_function_list .swiper-pagination-bullet-active {background: #1b85d4; border: 1px solid #1b85d4;}
+
+.miniApps_introduce .img {padding: 0 3%; text-align: center; padding-bottom: 20px;}
+.miniApps_introduce .img img {width: 80%; margin-left: -10%;}
+
+.miniApps_advantage_list {padding-bottom: 50px; position: relative;}
+.miniApps_advantage_list li {box-shadow: 0 3px 5px #ddd;}
+.miniApps_advantage_list img {width: 100%;}
+.miniApps_advantage_list .text {font-size: 13px; color: #333; line-height: 24px; padding: 10px 10%; border: 1px solid #f9f9f9; min-height: 94px;}
+.miniApps_advantage_list .swiper-container {overflow: visible;}
+.miniApps_advantage_list .swiper-wrapper {margin-left: 25%;}
+.miniApps_advantage_list .swiper-pagination {width: 100%; bottom: 20px; left: 0;}
+.miniApps_advantage_list .swiper-pagination-bullet {margin: 0 4px; background: none; border: 1px solid #333;}
+.miniApps_advantage_list .swiper-pagination-bullet-active {background: #1b85d4; border: 1px solid #1b85d4;}
+
+.miniApps_solution_list li {float: left; width: 30.333%; margin: 0 1.5% 10px; text-align: center; position: relative;}
+.miniApps_solution_list .li_c {border: 1px solid #ededed; padding: 15px 0 10px;}
+.miniApps_solution_list i {font-size: 40px; color: #3b8ae9; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3058a5), to(#3b8ae9)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
+.miniApps_solution_list .title {font-size: 12px; color: #333; line-height: 16px; min-height: 32px; padding-top: 6px;}
+
+.app_service_list li {text-align: center; padding: 30px 8%; color: #fff;}
+.app_service_list li:nth-of-type(1) {background: url(../img/app_service_img1.jpg) no-repeat center center; background-size: 100%;}
+.app_service_list li:nth-of-type(2) {background: url(../img/app_service_img2.jpg) no-repeat center center; background-size: 100%;}
+.app_service_list li:nth-of-type(3) {background: url(../img/app_service_img3.jpg) no-repeat center center; background-size: 100%;}
+.app_service_list li .icon i {font-size: 36px; line-height: 40px;}
+.app_service_list li .name {font-size: 16px; line-height: 40px;}
+.app_service_list li .des {font-size: 14px; line-height: 22px; min-height: 88px;}
+
+.app_advantage_list {position: relative; padding-bottom: 50px;}
+.app_advantage_list li {text-align: center; border: 1px solid #eaeaea;}
+.app_advantage_list .li1 i {background: #1988d8;}
+.app_advantage_list .li2 i {background: #ec870f;}
+.app_advantage_list .li3 i {background: #2ba76e;}
+.app_advantage_list .li4 i {background: #ee504d;}
+.app_advantage_list li i {display: inline-block; width: 80px; height: 80px; line-height: 75px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 5px 8px #bbb; font-size: 40px; color: #fff;}
+.app_advantage_list li .title_cn {font-size: 18px; color: #333; line-height: 24px; font-weight: bold; padding-top: 10px;}
+.app_advantage_list li .title_en {font-size: 13px; color: #666; line-height: 20px;}
+.app_advantage_list li .line span {display: inline-block; width: 40px; height: 1px;}
+.app_advantage_list .li1 .line span {background: #1988d8;}
+.app_advantage_list .li2 .line span {background: #ec870f;}
+.app_advantage_list .li3 .line span {background: #2ba76e;}
+.app_advantage_list .li4 .line span {background: #ee504d;}
+.app_advantage_list li .des {font-size: 13px; color: #999; line-height: 22px; min-height: 66px;}
+.app_advantage_list .swiper-pagination {width: 100%; bottom: 20px; left: 0;}
+.app_advantage_list .swiper-pagination-bullet {margin: 0 4px; background: none; border: 1px solid #333;}
+.app_advantage_list .swiper-pagination-bullet-active {background: #1b85d4; border: 1px solid #1b85d4;}
+
+.app_flow_list {padding-bottom: 20px;}
+.app_flow_list li {padding: 10px 0; box-shadow: 0 3px 5px #ccc; margin-bottom: 10px; padding-left: 2%;}
+.app_flow_list li .img {width: 20%;}
+.app_flow_list li .right {width: 80%; font-size: 13px; color: #666; line-height: 22px; padding: 4%;}
+
+.news_type li {float: left; width: 27%; text-align: center;}
+.news_type li a {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #333;}
+.news_type li.current a {color: #fff; background: #333;}
+.news_type li:first-of-type {width: 19%;}
+
+.news_list li {margin-bottom: 10px;}
+.news_list li img {width: 100%;}
+.news_list li .bottom {background: #fff; padding: 0 4% 10px;}
+.news_list li .title {font-size: 15px; color: #333; line-height: 40px; border-bottom: 1px solid #ccc;}
+.news_list li .des {font-size: 14px; color: #666; line-height: 20px; margin: 10px 0;}
+.news_list li .date {font-size: 14px; color: #999; line-height: 20px;}
+
+.news_detail .title {font-size: 16px; color: #333; line-height: 20px; padding-bottom: 10px;}
+.news_detail .date {font-size: 14px; color: #666; line-height: 20px; padding-bottom: 25px;}
+
+.case_detail_top .title {font-size: 16px; color: #000; line-height: 30px;}
+.case_detail_top .line {padding: 5px 0;}
+.case_detail_top .line span {display: block; width: 20px; height: 2px; background: #222;}
+.case_detail_top .name {font-size: 16px; color: #333; line-height: 30px;}
+.case_detail_top .des {font-size: 13px; color: #999; line-height: 22px; padding-top: 10px;}
+
+.case_detail_content img {max-width: 100%;}
+
+.miniAppsList {position: relative; padding: 0 4% 50px;}
+.miniAppsList li {padding: 0 10px;}
+.miniAppsList img {width: 100%;}
+.miniAppsList .name {font-size: 14px; color: #333; line-height: 30px; text-align: center;}
+.miniAppsList .swiper-pagination {width: 100%; bottom: 20px; left: 0;}
+.miniAppsList .swiper-pagination-bullet {margin: 0 4px; background: none; border: 1px solid #333;}
+.miniAppsList .swiper-pagination-bullet-active {background: #1b85d4; border: 1px solid #1b85d4;}
+
+
+/** ajax翻页 **/
+.ajaxpage{display:none;}
+.ajax_tips{height: 30px; line-height: 30px; background: #eaeaea; text-align:center; margin-top: 10px;}
+.fixedloading{width:80px; height:80px; position:fixed; top:50%; left:50%; margin:-40px 0 0 -40px; z-index:9999; display:none; background: url(../img/loading.svg) 0 0 no-repeat; background-size: cover;}
+.fixedloadingbg{position:fixed; top:0px; left:0; width:100%; height:100%; background-color: rgba(0,0,0,.5); z-index:9998; display:none;}
+
+
+#newBridge .nb-icon-wrap-0 {width: 15% !important; height: 9% !important;}
+#newBridge .nb-icon-wrap-0 .nb-icon-wrap-base {background-color: #333 !important;}
+#newBridge .nb-invite-wrap-0 {background: #333 !important;}
+#newBridge .nb-invite-tool-base {font-size: 2em !important; right: 8px !important;} 
+#newBridge .nb-icon-right-center {top: 70% !important;}
+#newBridge .nb-invite-wrap-0 .nb-invite-ok {color: #333 !important;}
+#newBridge .nb-invite-wrap-base {min-height: 15% !important;}
+#newBridge .nb-invite-body-base {padding: 1em 0 !important;}
+#newBridge {z-index: 9998 !important;}
+#newBridge .nb-invite-body-base .nb-invite-welcom {font-size: 1.3em !important;}
+
+
+.join_page .top .text {font-size: 14px; color: #666; padding-bottom: 15px; line-height: 22px;}
+.join_page .top .contact {font-size: 14px; color: #333; line-height: 22px;}
+.join_page .list li {border-top: 1px solid #eaeaea;}
+.join_page .list li .title {font-size: 16px; color: #333; line-height: 28px; padding-bottom: 3px;}
+.join_page .list li .des {font-size: 14px; color: #888; line-height: 22px;}
+.join_page .list li .left {width: 70%;}
+.join_page .list li .img {width: 30%; text-align: right; height: 102px;}
+.join_page .list li .img_c {height: 102px; display: table-cell; vertical-align: middle;}
+.join_page .list li img {width: 60%;}
+
+.joinDetail_page .bottom {border-top: 1px solid #eaeaea;}
+.joinDetail_page .bottom .text {font-size: 14px; color: #666; padding-bottom: 15px; line-height: 22px;}
+.joinDetail_page .bottom .contact {font-size: 14px; color: #333; line-height: 22px;}
+.joinDetail_page .top {border-bottom: 1px solid #eaeaea;}
+.joinDetail_page .top .title {font-size: 16px; color: #333; line-height: 28px; padding-bottom: 3px;}
+.joinDetail_page .top .des {font-size: 14px; color: #888; line-height: 22px;}
+.joinDetail_page .top .left {width: 70%;}
+.joinDetail_page .top .img {width: 30%; text-align: right; height: 102px;}
+.joinDetail_page .top .img_c {height: 102px; display: table-cell; vertical-align: middle;}
+.joinDetail_page .top img {width: 60%;}

wap/font/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

wap/font/demo_fontclass.html

@@ -0,0 +1,460 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-tuan"></i>
+                    <div class="name">团</div>
+                    <div class="fontclass">.icon-tuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kafei"></i>
+                    <div class="name">咖啡</div>
+                    <div class="fontclass">.icon-kafei</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shequ"></i>
+                    <div class="name">社区</div>
+                    <div class="fontclass">.icon-shequ</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiazai"></i>
+                    <div class="name">下载</div>
+                    <div class="fontclass">.icon-xiazai</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-android"></i>
+                    <div class="name">android</div>
+                    <div class="fontclass">.icon-android</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouji"></i>
+                    <div class="name">手机</div>
+                    <div class="fontclass">.icon-shouji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xin"></i>
+                    <div class="name">心</div>
+                    <div class="fontclass">.icon-xin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yaoqing"></i>
+                    <div class="name">邀请</div>
+                    <div class="fontclass">.icon-yaoqing</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-goutong"></i>
+                    <div class="name">沟通</div>
+                    <div class="fontclass">.icon-goutong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shubiao"></i>
+                    <div class="name">鼠标</div>
+                    <div class="fontclass">.icon-shubiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-73316"></i>
+                    <div class="name">医疗</div>
+                    <div class="fontclass">.icon-73316</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yumingjiexi"></i>
+                    <div class="name">域名解析</div>
+                    <div class="fontclass">.icon-yumingjiexi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xuchaobiaoqian"></i>
+                    <div class="name">别针</div>
+                    <div class="fontclass">.icon-xuchaobiaoqian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mjiantou"></i>
+                    <div class="name">右箭头</div>
+                    <div class="fontclass">.icon-mjiantou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-app"></i>
+                    <div class="name">app</div>
+                    <div class="fontclass">.icon-app</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-canyin"></i>
+                    <div class="name">餐饮</div>
+                    <div class="fontclass">.icon-canyin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-svgiconyouxi"></i>
+                    <div class="name">眼睛</div>
+                    <div class="fontclass">.icon-svgiconyouxi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ios"></i>
+                    <div class="name">ios</div>
+                    <div class="fontclass">.icon-ios</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kaifa"></i>
+                    <div class="name">开发</div>
+                    <div class="fontclass">.icon-kaifa</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weixin"></i>
+                    <div class="name">微信</div>
+                    <div class="fontclass">.icon-weixin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-huojian"></i>
+                    <div class="name">1火箭</div>
+                    <div class="fontclass">.icon-huojian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-service"></i>
+                    <div class="name">服务</div>
+                    <div class="fontclass">.icon-service</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kaiqihuodong"></i>
+                    <div class="name">开启活动</div>
+                    <div class="fontclass">.icon-kaiqihuodong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-diannao1"></i>
+                    <div class="name">电脑</div>
+                    <div class="fontclass">.icon-diannao1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-o2o"></i>
+                    <div class="name">O2O</div>
+                    <div class="fontclass">.icon-o2o</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kaxinxi"></i>
+                    <div class="name">会员卡</div>
+                    <div class="fontclass">.icon-kaxinxi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qiuhuixuanzhong"></i>
+                    <div class="name">球会选中</div>
+                    <div class="fontclass">.icon-qiuhuixuanzhong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xianshang"></i>
+                    <div class="name">线上</div>
+                    <div class="fontclass">.icon-xianshang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-wifi"></i>
+                    <div class="name">wifi</div>
+                    <div class="fontclass">.icon-wifi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lvyou"></i>
+                    <div class="name">旅游</div>
+                    <div class="fontclass">.icon-lvyou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu1"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weihu"></i>
+                    <div class="name">维护</div>
+                    <div class="fontclass">.icon-weihu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fene"></i>
+                    <div class="name">买入份额</div>
+                    <div class="fontclass">.icon-fene</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xitong"></i>
+                    <div class="name">系统</div>
+                    <div class="fontclass">.icon-xitong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-menu"></i>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">.icon-menu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jianrongxing"></i>
+                    <div class="name">兼容性</div>
+                    <div class="fontclass">.icon-jianrongxing</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-gengduo"></i>
+                    <div class="name">更多</div>
+                    <div class="fontclass">.icon-gengduo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ui"></i>
+                    <div class="name">UI</div>
+                    <div class="fontclass">.icon-ui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jhyxsj"></i>
+                    <div class="name">交互原型设计</div>
+                    <div class="fontclass">.icon-jhyxsj</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shangcheng"></i>
+                    <div class="name">商城</div>
+                    <div class="fontclass">.icon-shangcheng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-cuo"></i>
+                    <div class="name">错</div>
+                    <div class="fontclass">.icon-cuo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-taideng"></i>
+                    <div class="name">台灯</div>
+                    <div class="fontclass">.icon-taideng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhenghe"></i>
+                    <div class="name">iconfont整合-29</div>
+                    <div class="fontclass">.icon-zhenghe</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-peixun"></i>
+                    <div class="name">培训 (1)</div>
+                    <div class="fontclass">.icon-peixun</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shangchuan"></i>
+                    <div class="name">上传</div>
+                    <div class="fontclass">.icon-shangchuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-liaotian"></i>
+                    <div class="name">聊天</div>
+                    <div class="fontclass">.icon-liaotian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiangce"></i>
+                    <div class="name">相册</div>
+                    <div class="fontclass">.icon-xiangce</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiangji"></i>
+                    <div class="name">相机</div>
+                    <div class="fontclass">.icon-xiangji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shijuesheji"></i>
+                    <div class="name">视觉设计</div>
+                    <div class="fontclass">.icon-shijuesheji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-liucheng"></i>
+                    <div class="name">流程</div>
+                    <div class="fontclass">.icon-liucheng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-pintu"></i>
+                    <div class="name">拼图</div>
+                    <div class="fontclass">.icon-pintu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiazai1"></i>
+                    <div class="name">下载</div>
+                    <div class="fontclass">.icon-xiazai1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shuju"></i>
+                    <div class="name">数据</div>
+                    <div class="fontclass">.icon-shuju</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-sheji"></i>
+                    <div class="name">设计</div>
+                    <div class="fontclass">.icon-sheji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yingxiaoxinxi"></i>
+                    <div class="name">营销信息</div>
+                    <div class="fontclass">.icon-yingxiaoxinxi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qiche"></i>
+                    <div class="name">汽车</div>
+                    <div class="fontclass">.icon-qiche</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-huizhang"></i>
+                    <div class="name">徽章</div>
+                    <div class="fontclass">.icon-huizhang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-huaban"></i>
+                    <div class="name">工具</div>
+                    <div class="fontclass">.icon-huaban</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xiangyouyo"></i>
+                    <div class="name">向右</div>
+                    <div class="fontclass">.icon-xiangyouyo</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shezhi"></i>
+                    <div class="name">设置</div>
+                    <div class="fontclass">.icon-shezhi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua1"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yinhangqia"></i>
+                    <div class="name">银行卡</div>
+                    <div class="fontclass">.icon-yinhangqia</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-diannao"></i>
+                    <div class="name">电脑</div>
+                    <div class="fontclass">.icon-diannao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianshang"></i>
+                    <div class="name">电商</div>
+                    <div class="fontclass">.icon-dianshang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jinrong"></i>
+                    <div class="name">金融</div>
+                    <div class="fontclass">.icon-jinrong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ziyuan"></i>
+                    <div class="name">合同</div>
+                    <div class="fontclass">.icon-ziyuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yanshou"></i>
+                    <div class="name">6收货验收</div>
+                    <div class="fontclass">.icon-yanshou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yingyee"></i>
+                    <div class="name">累计营业额</div>
+                    <div class="fontclass">.icon-yingyee</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

wap/font/demo_symbol.html

@@ -0,0 +1,623 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tuan"></use>
+                    </svg>
+                    <div class="name">团</div>
+                    <div class="fontclass">#icon-tuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kafei"></use>
+                    </svg>
+                    <div class="name">咖啡</div>
+                    <div class="fontclass">#icon-kafei</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shequ"></use>
+                    </svg>
+                    <div class="name">社区</div>
+                    <div class="fontclass">#icon-shequ</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiazai"></use>
+                    </svg>
+                    <div class="name">下载</div>
+                    <div class="fontclass">#icon-xiazai</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-android"></use>
+                    </svg>
+                    <div class="name">android</div>
+                    <div class="fontclass">#icon-android</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouji"></use>
+                    </svg>
+                    <div class="name">手机</div>
+                    <div class="fontclass">#icon-shouji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xin"></use>
+                    </svg>
+                    <div class="name">心</div>
+                    <div class="fontclass">#icon-xin</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yaoqing"></use>
+                    </svg>
+                    <div class="name">邀请</div>
+                    <div class="fontclass">#icon-yaoqing</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-goutong"></use>
+                    </svg>
+                    <div class="name">沟通</div>
+                    <div class="fontclass">#icon-goutong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shubiao"></use>
+                    </svg>
+                    <div class="name">鼠标</div>
+                    <div class="fontclass">#icon-shubiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-73316"></use>
+                    </svg>
+                    <div class="name">医疗</div>
+                    <div class="fontclass">#icon-73316</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yumingjiexi"></use>
+                    </svg>
+                    <div class="name">域名解析</div>
+                    <div class="fontclass">#icon-yumingjiexi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xuchaobiaoqian"></use>
+                    </svg>
+                    <div class="name">别针</div>
+                    <div class="fontclass">#icon-xuchaobiaoqian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mjiantou"></use>
+                    </svg>
+                    <div class="name">右箭头</div>
+                    <div class="fontclass">#icon-mjiantou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-app"></use>
+                    </svg>
+                    <div class="name">app</div>
+                    <div class="fontclass">#icon-app</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-canyin"></use>
+                    </svg>
+                    <div class="name">餐饮</div>
+                    <div class="fontclass">#icon-canyin</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-svgiconyouxi"></use>
+                    </svg>
+                    <div class="name">眼睛</div>
+                    <div class="fontclass">#icon-svgiconyouxi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ios"></use>
+                    </svg>
+                    <div class="name">ios</div>
+                    <div class="fontclass">#icon-ios</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kaifa"></use>
+                    </svg>
+                    <div class="name">开发</div>
+                    <div class="fontclass">#icon-kaifa</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weixin"></use>
+                    </svg>
+                    <div class="name">微信</div>
+                    <div class="fontclass">#icon-weixin</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-huojian"></use>
+                    </svg>
+                    <div class="name">1火箭</div>
+                    <div class="fontclass">#icon-huojian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-service"></use>
+                    </svg>
+                    <div class="name">服务</div>
+                    <div class="fontclass">#icon-service</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kaiqihuodong"></use>
+                    </svg>
+                    <div class="name">开启活动</div>
+                    <div class="fontclass">#icon-kaiqihuodong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-diannao1"></use>
+                    </svg>
+                    <div class="name">电脑</div>
+                    <div class="fontclass">#icon-diannao1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-o2o"></use>
+                    </svg>
+                    <div class="name">O2O</div>
+                    <div class="fontclass">#icon-o2o</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kaxinxi"></use>
+                    </svg>
+                    <div class="name">会员卡</div>
+                    <div class="fontclass">#icon-kaxinxi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-qiuhuixuanzhong"></use>
+                    </svg>
+                    <div class="name">球会选中</div>
+                    <div class="fontclass">#icon-qiuhuixuanzhong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xianshang"></use>
+                    </svg>
+                    <div class="name">线上</div>
+                    <div class="fontclass">#icon-xianshang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-wifi"></use>
+                    </svg>
+                    <div class="name">wifi</div>
+                    <div class="fontclass">#icon-wifi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lvyou"></use>
+                    </svg>
+                    <div class="name">旅游</div>
+                    <div class="fontclass">#icon-lvyou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu1"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-kefu1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weihu"></use>
+                    </svg>
+                    <div class="name">维护</div>
+                    <div class="fontclass">#icon-weihu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fene"></use>
+                    </svg>
+                    <div class="name">买入份额</div>
+                    <div class="fontclass">#icon-fene</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xitong"></use>
+                    </svg>
+                    <div class="name">系统</div>
+                    <div class="fontclass">#icon-xitong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-menu"></use>
+                    </svg>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">#icon-menu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jianrongxing"></use>
+                    </svg>
+                    <div class="name">兼容性</div>
+                    <div class="fontclass">#icon-jianrongxing</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-gengduo"></use>
+                    </svg>
+                    <div class="name">更多</div>
+                    <div class="fontclass">#icon-gengduo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ui"></use>
+                    </svg>
+                    <div class="name">UI</div>
+                    <div class="fontclass">#icon-ui</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jhyxsj"></use>
+                    </svg>
+                    <div class="name">交互原型设计</div>
+                    <div class="fontclass">#icon-jhyxsj</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-kefu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shangcheng"></use>
+                    </svg>
+                    <div class="name">商城</div>
+                    <div class="fontclass">#icon-shangcheng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-cuo"></use>
+                    </svg>
+                    <div class="name">错</div>
+                    <div class="fontclass">#icon-cuo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-taideng"></use>
+                    </svg>
+                    <div class="name">台灯</div>
+                    <div class="fontclass">#icon-taideng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhenghe"></use>
+                    </svg>
+                    <div class="name">iconfont整合-29</div>
+                    <div class="fontclass">#icon-zhenghe</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-peixun"></use>
+                    </svg>
+                    <div class="name">培训 (1)</div>
+                    <div class="fontclass">#icon-peixun</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shangchuan"></use>
+                    </svg>
+                    <div class="name">上传</div>
+                    <div class="fontclass">#icon-shangchuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-liaotian"></use>
+                    </svg>
+                    <div class="name">聊天</div>
+                    <div class="fontclass">#icon-liaotian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiangce"></use>
+                    </svg>
+                    <div class="name">相册</div>
+                    <div class="fontclass">#icon-xiangce</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiangji"></use>
+                    </svg>
+                    <div class="name">相机</div>
+                    <div class="fontclass">#icon-xiangji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shijuesheji"></use>
+                    </svg>
+                    <div class="name">视觉设计</div>
+                    <div class="fontclass">#icon-shijuesheji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-liucheng"></use>
+                    </svg>
+                    <div class="name">流程</div>
+                    <div class="fontclass">#icon-liucheng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-pintu"></use>
+                    </svg>
+                    <div class="name">拼图</div>
+                    <div class="fontclass">#icon-pintu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiazai1"></use>
+                    </svg>
+                    <div class="name">下载</div>
+                    <div class="fontclass">#icon-xiazai1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shuju"></use>
+                    </svg>
+                    <div class="name">数据</div>
+                    <div class="fontclass">#icon-shuju</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-sheji"></use>
+                    </svg>
+                    <div class="name">设计</div>
+                    <div class="fontclass">#icon-sheji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yingxiaoxinxi"></use>
+                    </svg>
+                    <div class="name">营销信息</div>
+                    <div class="fontclass">#icon-yingxiaoxinxi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-qiche"></use>
+                    </svg>
+                    <div class="name">汽车</div>
+                    <div class="fontclass">#icon-qiche</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-huizhang"></use>
+                    </svg>
+                    <div class="name">徽章</div>
+                    <div class="fontclass">#icon-huizhang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-huaban"></use>
+                    </svg>
+                    <div class="name">工具</div>
+                    <div class="fontclass">#icon-huaban</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xiangyouyo"></use>
+                    </svg>
+                    <div class="name">向右</div>
+                    <div class="fontclass">#icon-xiangyouyo</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shezhi"></use>
+                    </svg>
+                    <div class="name">设置</div>
+                    <div class="fontclass">#icon-shezhi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua1"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yinhangqia"></use>
+                    </svg>
+                    <div class="name">银行卡</div>
+                    <div class="fontclass">#icon-yinhangqia</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-diannao"></use>
+                    </svg>
+                    <div class="name">电脑</div>
+                    <div class="fontclass">#icon-diannao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianshang"></use>
+                    </svg>
+                    <div class="name">电商</div>
+                    <div class="fontclass">#icon-dianshang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jinrong"></use>
+                    </svg>
+                    <div class="name">金融</div>
+                    <div class="fontclass">#icon-jinrong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ziyuan"></use>
+                    </svg>
+                    <div class="name">合同</div>
+                    <div class="fontclass">#icon-ziyuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yanshou"></use>
+                    </svg>
+                    <div class="name">6收货验收</div>
+                    <div class="fontclass">#icon-yanshou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yingyee"></use>
+                    </svg>
+                    <div class="name">累计营业额</div>
+                    <div class="fontclass">#icon-yingyee</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

wap/font/demo_unicode.html

@@ -0,0 +1,498 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe600;</i>
+                    <div class="name">团</div>
+                    <div class="code">&amp;#xe600;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe601;</i>
+                    <div class="name">咖啡</div>
+                    <div class="code">&amp;#xe601;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe602;</i>
+                    <div class="name">社区</div>
+                    <div class="code">&amp;#xe602;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60c;</i>
+                    <div class="name">下载</div>
+                    <div class="code">&amp;#xe60c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe619;</i>
+                    <div class="name">android</div>
+                    <div class="code">&amp;#xe619;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe621;</i>
+                    <div class="name">手机</div>
+                    <div class="code">&amp;#xe621;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60a;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe60a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe623;</i>
+                    <div class="name">心</div>
+                    <div class="code">&amp;#xe623;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe78d;</i>
+                    <div class="name">邀请</div>
+                    <div class="code">&amp;#xe78d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe606;</i>
+                    <div class="name">沟通</div>
+                    <div class="code">&amp;#xe606;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">鼠标</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe646;</i>
+                    <div class="name">医疗</div>
+                    <div class="code">&amp;#xe646;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe622;</i>
+                    <div class="name">域名解析</div>
+                    <div class="code">&amp;#xe622;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60f;</i>
+                    <div class="name">别针</div>
+                    <div class="code">&amp;#xe60f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61e;</i>
+                    <div class="name">右箭头</div>
+                    <div class="code">&amp;#xe61e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62e;</i>
+                    <div class="name">app</div>
+                    <div class="code">&amp;#xe62e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65c;</i>
+                    <div class="name">餐饮</div>
+                    <div class="code">&amp;#xe65c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe609;</i>
+                    <div class="name">眼睛</div>
+                    <div class="code">&amp;#xe609;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe681;</i>
+                    <div class="name">ios</div>
+                    <div class="code">&amp;#xe681;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62f;</i>
+                    <div class="name">开发</div>
+                    <div class="code">&amp;#xe62f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe635;</i>
+                    <div class="name">微信</div>
+                    <div class="code">&amp;#xe635;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe647;</i>
+                    <div class="name">1火箭</div>
+                    <div class="code">&amp;#xe647;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe614;</i>
+                    <div class="name">服务</div>
+                    <div class="code">&amp;#xe614;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe624;</i>
+                    <div class="name">开启活动</div>
+                    <div class="code">&amp;#xe624;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6d3;</i>
+                    <div class="name">电脑</div>
+                    <div class="code">&amp;#xe6d3;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe9ac;</i>
+                    <div class="name">O2O</div>
+                    <div class="code">&amp;#xe9ac;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe610;</i>
+                    <div class="name">会员卡</div>
+                    <div class="code">&amp;#xe610;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe603;</i>
+                    <div class="name">球会选中</div>
+                    <div class="code">&amp;#xe603;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe856;</i>
+                    <div class="name">线上</div>
+                    <div class="code">&amp;#xe856;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe634;</i>
+                    <div class="name">wifi</div>
+                    <div class="code">&amp;#xe634;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60d;</i>
+                    <div class="name">旅游</div>
+                    <div class="code">&amp;#xe60d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe63e;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe63e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe604;</i>
+                    <div class="name">维护</div>
+                    <div class="code">&amp;#xe604;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe70a;</i>
+                    <div class="name">买入份额</div>
+                    <div class="code">&amp;#xe70a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe626;</i>
+                    <div class="name">系统</div>
+                    <div class="code">&amp;#xe626;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe631;</i>
+                    <div class="name">菜单</div>
+                    <div class="code">&amp;#xe631;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe630;</i>
+                    <div class="name">兼容性</div>
+                    <div class="code">&amp;#xe630;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a4;</i>
+                    <div class="name">更多</div>
+                    <div class="code">&amp;#xe6a4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">UI</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6b9;</i>
+                    <div class="name">交互原型设计</div>
+                    <div class="code">&amp;#xe6b9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe617;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe617;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe660;</i>
+                    <div class="name">商城</div>
+                    <div class="code">&amp;#xe660;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe63d;</i>
+                    <div class="name">错</div>
+                    <div class="code">&amp;#xe63d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe605;</i>
+                    <div class="name">台灯</div>
+                    <div class="code">&amp;#xe605;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe661;</i>
+                    <div class="name">iconfont整合-29</div>
+                    <div class="code">&amp;#xe661;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe644;</i>
+                    <div class="name">培训 (1)</div>
+                    <div class="code">&amp;#xe644;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe838;</i>
+                    <div class="name">上传</div>
+                    <div class="code">&amp;#xe838;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe64c;</i>
+                    <div class="name">聊天</div>
+                    <div class="code">&amp;#xe64c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe64e;</i>
+                    <div class="name">相册</div>
+                    <div class="code">&amp;#xe64e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60b;</i>
+                    <div class="name">相机</div>
+                    <div class="code">&amp;#xe60b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65d;</i>
+                    <div class="name">视觉设计</div>
+                    <div class="code">&amp;#xe65d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe642;</i>
+                    <div class="name">流程</div>
+                    <div class="code">&amp;#xe642;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6fa;</i>
+                    <div class="name">拼图</div>
+                    <div class="code">&amp;#xe6fa;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe615;</i>
+                    <div class="name">下载</div>
+                    <div class="code">&amp;#xe615;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62d;</i>
+                    <div class="name">数据</div>
+                    <div class="code">&amp;#xe62d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60e;</i>
+                    <div class="name">设计</div>
+                    <div class="code">&amp;#xe60e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe616;</i>
+                    <div class="name">营销信息</div>
+                    <div class="code">&amp;#xe616;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7f7;</i>
+                    <div class="name">汽车</div>
+                    <div class="code">&amp;#xe7f7;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe638;</i>
+                    <div class="name">徽章</div>
+                    <div class="code">&amp;#xe638;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe607;</i>
+                    <div class="name">工具</div>
+                    <div class="code">&amp;#xe607;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66a;</i>
+                    <div class="name">向右</div>
+                    <div class="code">&amp;#xe66a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe618;</i>
+                    <div class="name">设置</div>
+                    <div class="code">&amp;#xe618;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe613;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe613;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe639;</i>
+                    <div class="name">银行卡</div>
+                    <div class="code">&amp;#xe639;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe608;</i>
+                    <div class="name">电脑</div>
+                    <div class="code">&amp;#xe608;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe637;</i>
+                    <div class="name">电商</div>
+                    <div class="code">&amp;#xe637;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe636;</i>
+                    <div class="name">金融</div>
+                    <div class="code">&amp;#xe636;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe698;</i>
+                    <div class="name">合同</div>
+                    <div class="code">&amp;#xe698;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe684;</i>
+                    <div class="name">6收货验收</div>
+                    <div class="code">&amp;#xe684;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61a;</i>
+                    <div class="name">累计营业额</div>
+                    <div class="code">&amp;#xe61a;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

wap/js/ajax.js

@@ -0,0 +1,30 @@
+a = 1;
+$(window.document).on("scroll",function(){
+if( $(document).scrollTop() + $(window).height() > $(document).height() - 20 && a==1) {
+	a = 0;
+	$(".fixedloading,.fixedloadingbg").fadeIn(300);
+	$(".ajax_tips").html("努力加载中...");
+		$.ajax( {
+			url: $("#page_ajax").attr("href"),
+			success:function(data){
+				setTimeout(function(){
+					var nowHref = $("#page_ajax_now").attr("href"),
+						nextHref = $("#page_ajax").attr("href"),
+						datanextHref = jQuery(data).find("#page_ajax").attr("href"),
+						datanowHref = jQuery(data).find("#page_ajax_now").attr("href");
+					if(nowHref != nextHref){
+						$("#page_ajax").attr("href",datanextHref);
+						$("#page_ajax_now").attr("href",datanowHref);
+						html = $(data).find("#ajax_list_ul").html();
+						$("#ajax_list_ul").append(html);
+						$(".ajax_tips").html("下拉加载更多...");
+						a = 1;
+					}else{
+						$(".ajax_tips").html("没有更多内容了！").addClass("nomore");
+					} 
+					$(".fixedloading,.fixedloadingbg").fadeOut(300);
+				},1000)
+			}
+		});
+	}
+});

wap/js/countTo.js

@@ -0,0 +1,63 @@
+$(document).ready(function (){
+ 	var win = $(window).height();
+ 	var height = $('.counter').offset().top;
+   	var Counter = 1;
+   	$(window).scroll(function () {
+		if($(document).scrollTop() < (height-win+100) && Counter==1){
+			$('.counter').each(function(){
+				var dataperc = $(this).attr('data-perc');
+				$(this).delay(5000).countTo({
+					from: 0,
+					to: dataperc,
+					speed: 5000,
+					refreshInterval: 100
+				});
+				Counter = 0;
+			});
+		}
+	});
+});
+$.fn.countTo = function(options) {
+	// merge the default plugin settings with the custom options
+	options = $.extend({}, $.fn.countTo.defaults, options || {});
+
+	// how many times to update the value, and how much to increment the value on each update
+	var loops = Math.ceil(options.speed / options.refreshInterval),
+		increment = (options.to - options.from) / loops;
+
+	return $(this).delay(1000).each(function() {
+		var _this = this,
+			loopCount = 0,
+			value = options.from,
+			interval = setInterval(updateTimer, options.refreshInterval);
+
+		function updateTimer() {
+			value += increment;
+			loopCount++;
+			$(_this).html(value.toFixed(options.decimals));
+
+			if (typeof(options.onUpdate) == 'function') {
+				options.onUpdate.call(_this, value);
+			}
+
+			if (loopCount >= loops) {
+				clearInterval(interval);
+				value = options.to;
+
+				if (typeof(options.onComplete) == 'function') {
+					options.onComplete.call(_this, value);
+				}
+			}
+		}
+	});
+};
+
+$.fn.countTo.defaults = {
+	from: 0,	// the number the element should start at
+	to: 100,	// the number the element should end at
+	speed: 1000,	// how long it should take to count between the target numbers
+	refreshInterval: 100,	//how often the element should be updated
+	decimals: 0,	//the number of decimal places to show
+	onUpdate: null,	//callback method for every time the element is updated,
+	onComplete: null,//callback method for when the element finishes updating
+};

wap/js/loading.js

@@ -0,0 +1,54 @@
+//
+//$("body").on("touchmove", function(e) {
+//  e.preventDefault();
+//}).on("mousewheel", function(e) {
+// e.preventDefault();
+// e.stopPropagation();
+//
+//});
+//var html = $('html');
+//html.css('overflow', 'hidden');
+//var loadedState = false;
+//var selfMotion = false;
+//$(window).load(function() {	
+//	setTimeout(function  () {
+//		if (loadedState) {
+//			$(".bj-loading").addClass("on");
+//			$("body").off('mousewheel').off('touchmove');  
+//			$('html').css('overflow', 'visible');
+//		}else{
+//			$(".load-box .bj-digest").addClass('on');
+//			selfMotion = true;
+//		}
+//	},100);
+//});
+//
+//document.onreadystatechange = changeState;//当页面加载状态改变的时候执行这个方法. 
+//function changeState(){ 
+//	if(document.readyState == 'complete'){ //当页面加载状态
+//		loadedState = true;
+//		if (selfMotion) {
+//			$(".bj-loading").addClass("on");
+//			$("body").off('mousewheel').off('touchmove');  
+//			$('html').css('overflow', 'visible');
+//		};
+//	}  
+//} 
+
+
+$("body").on("touchmove", function(e) {
+    e.preventDefault();
+}).on("mousewheel", function(e) {
+   e.preventDefault();
+   e.stopPropagation();
+});
+var html = $('html');
+html.css('overflow', 'hidden');
+var loadedState = false;
+var selfMotion = false;
+setTimeout(function  () {
+		$(".bj-loading").addClass("on");
+		$("body").off('mousewheel').off('touchmove');  
+		$('html').css('overflow', 'visible');
+},1000);
+

wap/js/main.js

@@ -0,0 +1,85 @@
+
+$(function(){
+	
+	var swiper = new Swiper('.in_banner-swiper', {
+	    pagination: '.in_banner-pagination',
+	    autoplay: 3000,
+	    autoplayDisableOnInteraction: false,
+	    loop: true
+	});
+	
+	
+	$("#menu").on("click",function(){
+		$("#menu_input").toggleClass("on");
+		$("body").toggleClass("isMask");
+		$("html").toggleClass("isMask");
+		$("#mask").toggleClass("on");
+		$('html,body').scrollTop(0);
+	})
+	$("#mask").on("click",function(){
+		$("#mask").toggleClass("on");
+		$("#menu_input").toggleClass("on");
+		$("body").toggleClass("isMask");
+		$("html").toggleClass("isMask");
+	})
+
+	$(window).scroll(function(){
+		var scrollTop=0;
+		scrollTop = $(document).scrollTop();
+		var a = scrollTop/500;
+	    if(a<=0.9){
+	    	$("header").css({"background":"rgba(0,0,0,"+a+")"});
+	    }if(a>0.9){
+	    	$("header").css({"background":"rgba(0,0,0,0.9)"});
+	    }
+	});
+	
+	var in_case_swiper = new Swiper('.in_case-swiper', {
+	    pagination: '.in_case-pagination',
+	    autoplayDisableOnInteraction: false
+	});
+	
+	var angle = 0;
+	setInterval(function() { 
+	    angle += 10; 
+	    $("#bj-loding .ball div").rotate(angle); 
+	}, 50);
+	
+	var web_flow_swiper = new Swiper ('.web_flow-swiper', {
+	    slidesPerView: 2,
+	    paginationClickable: true,
+	    spaceBetween: 10,
+	    pagination: '.web_flow-pagination',
+	    loop:true
+	})
+	
+	var web_flow_swiper = new Swiper ('.wechat_function-swiper', {
+	    slidesPerView: 2,
+	    paginationClickable: true,
+	    spaceBetween: 20,
+	    pagination: '.wechat_function-pagination',
+	    loop:true
+	})
+	
+	var web_flow_swiper = new Swiper ('.miniApps_advantage-swiper', {
+	    slidesPerView: 2,
+	    paginationClickable: true,
+	    spaceBetween: 10,
+	    pagination: '.miniApps_advantage-pagination',
+	    loop:true
+	})
+	
+	var web_flow_swiper = new Swiper ('.app_advantage-swiper', {
+	    paginationClickable: true,
+	    pagination: '.app_advantage-pagination',
+	    loop:true
+	})
+	
+	var miniAppsList_swiper = new Swiper ('.miniAppsList-swiper', {
+		slidesPerView: 2,
+	    paginationClickable: true,
+	    pagination: '.miniAppsList-pagination',
+	    loop:true
+	})
+	
+})

wap/lib/animate.css

@@ -0,0 +1,1579 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.2
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2017 Daniel Eden
+ */
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  animation-duration: .75s;
+}
+
+@keyframes bounce {
+  from, 20%, 53%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    transform: translate3d(0,0,0);
+  }
+
+  40%, 43% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -30px, 0);
+  }
+
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+    transform: translate3d(0, -15px, 0);
+  }
+
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+}
+
+.bounce {
+  animation-name: bounce;
+  transform-origin: center bottom;
+}
+
+@keyframes flash {
+  from, 50%, to {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  animation-name: pulse;
+}
+
+@keyframes rubberBand {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, .95, 1);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.rubberBand {
+  animation-name: rubberBand;
+}
+
+@keyframes shake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  animation-name: shake;
+}
+
+@keyframes headShake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}
+
+.headShake {
+  animation-timing-function: ease-in-out;
+  animation-name: headShake;
+}
+
+@keyframes swing {
+  20% {
+    transform: rotate3d(0, 0, 1, 15deg);
+  }
+
+  40% {
+    transform: rotate3d(0, 0, 1, -10deg);
+  }
+
+  60% {
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  80% {
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.swing {
+  transform-origin: top center;
+  animation-name: swing;
+}
+
+@keyframes tada {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  10%, 20% {
+    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+
+  40%, 60%, 80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.tada {
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@keyframes wobble {
+  from {
+    transform: none;
+  }
+
+  15% {
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+.wobble {
+  animation-name: wobble;
+}
+
+@keyframes jello {
+  from, 11.1%, to {
+    transform: none;
+  }
+
+  22.2% {
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+
+  33.3% {
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+
+  44.4% {
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+
+  55.5% {
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+
+  66.6% {
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+
+  77.7% {
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+
+  88.8% {
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
+}
+
+.jello {
+  animation-name: jello;
+  transform-origin: center;
+}
+
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  animation-name: bounceIn;
+}
+
+@keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+.bounceInDown {
+  animation-name: bounceInDown;
+}
+
+@keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+.bounceInLeft {
+  animation-name: bounceInLeft;
+}
+
+@keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+.bounceInRight {
+  animation-name: bounceInRight;
+}
+
+@keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounceInUp {
+  animation-name: bounceInUp;
+}
+
+@keyframes bounceOut {
+  20% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+}
+
+.bounceOut {
+  animation-name: bounceOut;
+}
+
+@keyframes bounceOutDown {
+  20% {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.bounceOutDown {
+  animation-name: bounceOutDown;
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.bounceOutLeft {
+  animation-name: bounceOutLeft;
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.bounceOutRight {
+  animation-name: bounceOutRight;
+}
+
+@keyframes bounceOutUp {
+  20% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.bounceOutUp {
+  animation-name: bounceOutUp;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  animation-name: fadeInDown;
+}
+
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInDownBig {
+  animation-name: fadeInDownBig;
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInLeft {
+  animation-name: fadeInLeft;
+}
+
+@keyframes fadeInLeftBig {
+  from {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInLeftBig {
+  animation-name: fadeInLeftBig;
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInRight {
+  animation-name: fadeInRight;
+}
+
+@keyframes fadeInRightBig {
+  from {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInRightBig {
+  animation-name: fadeInRightBig;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation-name: fadeInUp;
+}
+
+@keyframes fadeInUpBig {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUpBig {
+  animation-name: fadeInUpBig;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  animation-name: fadeOut;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  animation-name: fadeOutDown;
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}
+
+.fadeOutDownBig {
+  animation-name: fadeOutDownBig;
+}
+
+@keyframes fadeOutLeft {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fadeOutLeft {
+  animation-name: fadeOutLeft;
+}
+
+@keyframes fadeOutLeftBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+.fadeOutLeftBig {
+  animation-name: fadeOutLeftBig;
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fadeOutRight {
+  animation-name: fadeOutRight;
+}
+
+@keyframes fadeOutRightBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+.fadeOutRightBig {
+  animation-name: fadeOutRightBig;
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  animation-name: fadeOutUp;
+}
+
+@keyframes fadeOutUpBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}
+
+.fadeOutUpBig {
+  animation-name: fadeOutUpBig;
+}
+
+@keyframes flip {
+  from {
+    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    transform: perspective(400px) scale3d(.95, .95, .95);
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    transform: perspective(400px);
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  backface-visibility: visible;
+  animation-name: flip;
+}
+
+@keyframes flipInX {
+  from {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    transform: perspective(400px);
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  animation-name: flipInX;
+}
+
+@keyframes flipInY {
+  from {
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+  }
+
+  to {
+    transform: perspective(400px);
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  animation-name: flipInY;
+}
+
+@keyframes flipOutX {
+  from {
+    transform: perspective(400px);
+  }
+
+  30% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    opacity: 1;
+  }
+
+  to {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@keyframes flipOutY {
+  from {
+    transform: perspective(400px);
+  }
+
+  30% {
+    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+    opacity: 1;
+  }
+
+  to {
+    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  animation-name: flipOutY;
+}
+
+@keyframes lightSpeedIn {
+  from {
+    transform: translate3d(100%, 0, 0) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    transform: skewX(20deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: skewX(-5deg);
+    opacity: 1;
+  }
+
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  animation-name: lightSpeedIn;
+  animation-timing-function: ease-out;
+}
+
+@keyframes lightSpeedOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(100%, 0, 0) skewX(30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  animation-name: lightSpeedOut;
+  animation-timing-function: ease-in;
+}
+
+@keyframes rotateIn {
+  from {
+    transform-origin: center;
+    transform: rotate3d(0, 0, 1, -200deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: center;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  animation-name: rotateIn;
+}
+
+@keyframes rotateInDownLeft {
+  from {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  animation-name: rotateInDownLeft;
+}
+
+@keyframes rotateInDownRight {
+  from {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  animation-name: rotateInDownRight;
+}
+
+@keyframes rotateInUpLeft {
+  from {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  animation-name: rotateInUpLeft;
+}
+
+@keyframes rotateInUpRight {
+  from {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, -90deg);
+    opacity: 0;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  animation-name: rotateInUpRight;
+}
+
+@keyframes rotateOut {
+  from {
+    transform-origin: center;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: center;
+    transform: rotate3d(0, 0, 1, 200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  animation-name: rotateOut;
+}
+
+@keyframes rotateOutDownLeft {
+  from {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, 45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  animation-name: rotateOutDownLeft;
+}
+
+@keyframes rotateOutDownRight {
+  from {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  animation-name: rotateOutDownRight;
+}
+
+@keyframes rotateOutUpLeft {
+  from {
+    transform-origin: left bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: left bottom;
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  animation-name: rotateOutUpLeft;
+}
+
+@keyframes rotateOutUpRight {
+  from {
+    transform-origin: right bottom;
+    opacity: 1;
+  }
+
+  to {
+    transform-origin: right bottom;
+    transform: rotate3d(0, 0, 1, 90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  animation-name: rotateOutUpRight;
+}
+
+@keyframes hinge {
+  0% {
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    transform: rotate3d(0, 0, 1, 80deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+  }
+
+  40%, 80% {
+    transform: rotate3d(0, 0, 1, 60deg);
+    transform-origin: top left;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  animation-name: hinge;
+}
+
+@keyframes jackInTheBox {
+  from {
+    opacity: 0;
+    transform: scale(0.1) rotate(30deg);
+    transform-origin: center bottom;
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  70% {
+    transform: rotate(3deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.jackInTheBox {
+  animation-name: jackInTheBox;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@keyframes rollIn {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.rollIn {
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@keyframes rollOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+  }
+}
+
+.rollOut {
+  animation-name: rollOut;
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  animation-name: zoomIn;
+}
+
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInDown {
+  animation-name: zoomInDown;
+}
+
+@keyframes zoomInLeft {
+  from {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInLeft {
+  animation-name: zoomInLeft;
+}
+
+@keyframes zoomInRight {
+  from {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInRight {
+  animation-name: zoomInRight;
+}
+
+@keyframes zoomInUp {
+  from {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomInUp {
+  animation-name: zoomInUp;
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  animation-name: zoomOut;
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
+    transform-origin: center bottom;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutDown {
+  animation-name: zoomOutDown;
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.1) translate3d(-2000px, 0, 0);
+    transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  animation-name: zoomOutLeft;
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(.1) translate3d(2000px, 0, 0);
+    transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  animation-name: zoomOutRight;
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
+    transform-origin: center bottom;
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
+  }
+}
+
+.zoomOutUp {
+  animation-name: zoomOutUp;
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown {
+  animation-name: slideInDown;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInLeft {
+  animation-name: slideInLeft;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  animation-name: slideInRight;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInUp {
+  animation-name: slideInUp;
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.slideOutDown {
+  animation-name: slideOutDown;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.slideOutLeft {
+  animation-name: slideOutLeft;
+}
+
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  animation-name: slideOutRight;
+}
+
+@keyframes slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp {
+  animation-name: slideOutUp;
+}

wap/lib/jquery.rotate.min.js

@@ -0,0 +1,22 @@
+// VERSION: 2.3 LAST UPDATE: 11.07.2013
+/* 
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
+ * Website: http://code.google.com/p/jqueryrotate/ 
+ */
+(function(k){for(var d,f,l=document.getElementsByTagName("head")[0].style,h=["transformProperty","WebkitTransform","OTransform","msTransform","MozTransform"],g=0;g<h.length;g++)void 0!==l[h[g]]&&(d=h[g]);d&&(f=d.replace(/[tT]ransform/,"TransformOrigin"),"T"==f[0]&&(f[0]="t"));eval('IE = "v"=="\v"');jQuery.fn.extend({rotate:function(a){if(0!==this.length&&"undefined"!=typeof a){"number"==typeof a&&(a={angle:a});for(var b=[],c=0,d=this.length;c<d;c++){var e=this.get(c);if(e.Wilq32&&e.Wilq32.PhotoEffect)e.Wilq32.PhotoEffect._handleRotation(a);
+else{var f=k.extend(!0,{},a),e=(new Wilq32.PhotoEffect(e,f))._rootObj;b.push(k(e))}}return b}},getRotateAngle:function(){for(var a=[],b=0,c=this.length;b<c;b++){var d=this.get(b);d.Wilq32&&d.Wilq32.PhotoEffect&&(a[b]=d.Wilq32.PhotoEffect._angle)}return a},stopRotate:function(){for(var a=0,b=this.length;a<b;a++){var c=this.get(a);c.Wilq32&&c.Wilq32.PhotoEffect&&clearTimeout(c.Wilq32.PhotoEffect._timer)}}});Wilq32=window.Wilq32||{};Wilq32.PhotoEffect=function(){return d?function(a,b){a.Wilq32={PhotoEffect:this};
+this._img=this._rootObj=this._eventObj=a;this._handleRotation(b)}:function(a,b){this._img=a;this._onLoadDelegate=[b];this._rootObj=document.createElement("span");this._rootObj.style.display="inline-block";this._rootObj.Wilq32={PhotoEffect:this};a.parentNode.insertBefore(this._rootObj,a);if(a.complete)this._Loader();else{var c=this;jQuery(this._img).bind("load",function(){c._Loader()})}}}();Wilq32.PhotoEffect.prototype={_setupParameters:function(a){this._parameters=this._parameters||{};"number"!==
+typeof this._angle&&(this._angle=0);"number"===typeof a.angle&&(this._angle=a.angle);this._parameters.animateTo="number"===typeof a.animateTo?a.animateTo:this._angle;this._parameters.step=a.step||this._parameters.step||null;this._parameters.easing=a.easing||this._parameters.easing||this._defaultEasing;this._parameters.duration=a.duration||this._parameters.duration||1E3;this._parameters.callback=a.callback||this._parameters.callback||this._emptyFunction;this._parameters.center=a.center||this._parameters.center||
+["50%","50%"];this._rotationCenterX="string"==typeof this._parameters.center[0]?parseInt(this._parameters.center[0],10)/100*this._imgWidth*this._aspectW:this._parameters.center[0];this._rotationCenterY="string"==typeof this._parameters.center[1]?parseInt(this._parameters.center[1],10)/100*this._imgHeight*this._aspectH:this._parameters.center[1];a.bind&&a.bind!=this._parameters.bind&&this._BindEvents(a.bind)},_emptyFunction:function(){},_defaultEasing:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-
+1)+c},_handleRotation:function(a,b){d||this._img.complete||b?(this._setupParameters(a),this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()):this._onLoadDelegate.push(a)},_BindEvents:function(a){if(a&&this._eventObj){if(this._parameters.bind){var b=this._parameters.bind,c;for(c in b)b.hasOwnProperty(c)&&jQuery(this._eventObj).unbind(c,b[c])}this._parameters.bind=a;for(c in a)a.hasOwnProperty(c)&&jQuery(this._eventObj).bind(c,a[c])}},_Loader:function(){return IE?function(){var a=
+this._img.width,b=this._img.height;this._imgWidth=a;this._imgHeight=b;this._img.parentNode.removeChild(this._img);this._vimage=this.createVMLNode("image");this._vimage.src=this._img.src;this._vimage.style.height=b+"px";this._vimage.style.width=a+"px";this._vimage.style.position="absolute";this._vimage.style.top="0px";this._vimage.style.left="0px";this._aspectW=this._aspectH=1;this._container=this.createVMLNode("group");this._container.style.width=a;this._container.style.height=b;this._container.style.position=
+"absolute";this._container.style.top="0px";this._container.style.left="0px";this._container.setAttribute("coordsize",a-1+","+(b-1));this._container.appendChild(this._vimage);this._rootObj.appendChild(this._container);this._rootObj.style.position="relative";this._rootObj.style.width=a+"px";this._rootObj.style.height=b+"px";this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;for(this._eventObj=this._rootObj;a=this._onLoadDelegate.shift();)this._handleRotation(a,
+!0)}:function(){this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;this._imgWidth=this._img.naturalWidth;this._imgHeight=this._img.naturalHeight;var a=Math.sqrt(this._imgHeight*this._imgHeight+this._imgWidth*this._imgWidth);this._width=3*a;this._height=3*a;this._aspectW=this._img.offsetWidth/this._img.naturalWidth;this._aspectH=this._img.offsetHeight/this._img.naturalHeight;this._img.parentNode.removeChild(this._img);this._canvas=document.createElement("canvas");
+this._canvas.setAttribute("width",this._width);this._canvas.style.position="relative";this._canvas.style.left=-this._img.height*this._aspectW+"px";this._canvas.style.top=-this._img.width*this._aspectH+"px";this._canvas.Wilq32=this._rootObj.Wilq32;this._rootObj.appendChild(this._canvas);this._rootObj.style.width=this._img.width*this._aspectW+"px";this._rootObj.style.height=this._img.height*this._aspectH+"px";this._eventObj=this._canvas;for(this._cnv=this._canvas.getContext("2d");a=this._onLoadDelegate.shift();)this._handleRotation(a,
+!0)}}(),_animateStart:function(){this._timer&&clearTimeout(this._timer);this._animateStartTime=+new Date;this._animateStartAngle=this._angle;this._animate()},_animate:function(){var a=+new Date,b=a-this._animateStartTime>this._parameters.duration;if(b&&!this._parameters.animatedGif)clearTimeout(this._timer);else{if(this._canvas||this._vimage||this._img)a=this._parameters.easing(0,a-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration),
+this._rotate(~~(10*a)/10);this._parameters.step&&this._parameters.step(this._angle);var c=this;this._timer=setTimeout(function(){c._animate.call(c)},10)}this._parameters.callback&&b&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:function(){var a=Math.PI/180;return IE?function(a){this._angle=a;this._container.style.rotation=a%360+"deg";this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px";this._vimage.style.left=
+-(this._rotationCenterX-this._imgWidth/2)+"px";this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px";this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:d?function(a){this._angle=a;this._img.style[d]="rotate("+a%360+"deg)";this._img.style[f]=this._parameters.center.join(" ")}:function(b){this._angle=b;b=b%360*a;this._canvas.width=this._width;this._canvas.height=this._height;this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH);this._cnv.translate(this._rotationCenterX,
+this._rotationCenterY);this._cnv.rotate(b);this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY);this._cnv.scale(this._aspectW,this._aspectH);this._cnv.drawImage(this._img,0,0)}}()};IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(a){return document.createElement("<rvml:"+a+' class="rvml">')}}catch(a){return function(a){return document.createElement("<"+
+a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())})(jQuery);