浏览代码

引入前台

Ethan 6 年之前
父节点
当前提交
db3410bf35
共有 56 个文件被更改,包括 8508 次插入197 次删除
  1. 1 1
      application/config.php
  2. 39 8
      application/home/controller/Index.php
  3. 33 0
      application/home/model/Navigation.php
  4. 185 0
      application/home/view/index/index - 副本 (2).html
  5. 206 0
      application/home/view/index/index - 副本.html
  6. 764 188
      application/home/view/index/index.html
  7. 3296 0
      public/static/home/css/animate.css
  8. 4 0
      public/static/home/css/bootstrap.min.css
  9. 二进制
      public/static/home/css/fancybox_loading.gif
  10. 二进制
      public/static/home/css/fancybox_overlay.png
  11. 二进制
      public/static/home/css/fancybox_sprite.png
  12. 3 0
      public/static/home/css/font-awesome.min.css
  13. 274 0
      public/static/home/css/jquery.fancybox.css
  14. 1140 0
      public/static/home/css/main.css
  15. 231 0
      public/static/home/css/owl.carousel.css
  16. 261 0
      public/static/home/css/responsive.css
  17. 二进制
      public/static/home/font/FontAwesome.otf
  18. 二进制
      public/static/home/font/fontawesome-webfont.eot
  19. 196 0
      public/static/home/font/fontawesome-webfont.svg
  20. 二进制
      public/static/home/font/fontawesome-webfont.ttf
  21. 二进制
      public/static/home/font/fontawesome-webfont.woff
  22. 二进制
      public/static/home/img/about.png
  23. 二进制
      public/static/home/img/bg/bg1 - 副本.jpg
  24. 二进制
      public/static/home/img/bg/bg1.jpg
  25. 二进制
      public/static/home/img/bg/bg2.jpg
  26. 二进制
      public/static/home/img/bg/bg3.jpg
  27. 二进制
      public/static/home/img/client/1.jpg
  28. 二进制
      public/static/home/img/client/2.jpg
  29. 二进制
      public/static/home/img/client/3.jpg
  30. 二进制
      public/static/home/img/iphone/iphone-black.png
  31. 二进制
      public/static/home/img/iphone/iphone-white.png
  32. 二进制
      public/static/home/img/logo - 副本.png
  33. 二进制
      public/static/home/img/overlay/plus.png
  34. 二进制
      public/static/home/img/portfolio/portfolio-1.jpg
  35. 二进制
      public/static/home/img/portfolio/portfolio-2.jpg
  36. 二进制
      public/static/home/img/portfolio/portfolio-3.jpg
  37. 二进制
      public/static/home/img/portfolio/portfolio-4.jpg
  38. 二进制
      public/static/home/img/young-men.png
  39. 5 0
      public/static/home/js/bootstrap.min.js
  40. 85 0
      public/static/home/js/jquery-countTo.js
  41. 150 0
      public/static/home/js/jquery.appear.js
  42. 46 0
      public/static/home/js/jquery.fancybox.pack.js
  43. 13 0
      public/static/home/js/jquery.mixitup.min.js
  44. 223 0
      public/static/home/js/jquery.nav.js
  45. 69 0
      public/static/home/js/jquery.parallax-1.1.3.js
  46. 121 0
      public/static/home/js/main.js
  47. 9 0
      public/static/home/js/owl.carousel.min.js
  48. 1 0
      public/static/home/js/vendor/jquery-1.11.1.min.js
  49. 3 0
      public/static/home/js/vendor/modernizr-2.6.2.min.js
  50. 1 0
      public/static/home/js/wow.min.js
  51. 二进制
      public/uploads/home/bg1.jpg
  52. 二进制
      public/uploads/home/logo.png
  53. 196 0
      runtime/temp/10bad90ba7af352e9fe4e52b115adce2.php
  54. 783 0
      runtime/temp/212e2acb8d1ff94e46cf7e755bcd4848.php
  55. 116 0
      runtime/temp/28b1060d85358e609cc4f8d9925b9c74.php
  56. 54 0
      runtime/temp/9472d155ad46f0eb15c712768d66cbf5.php

+ 1 - 1
application/config.php

@@ -17,7 +17,7 @@ return [
     // 应用命名空间
     'app_namespace' => 'app',
     // 应用调试模式
-    'app_debug' => false,
+    'app_debug' => true,
     // 应用Trace
     'app_trace' => false,
     // 应用模式状态

+ 39 - 8
application/home/controller/Index.php

@@ -4,21 +4,52 @@ namespace app\home\controller;
 
 use think\Lang;
 use think\Cache;
+use think\Request;
+use think\Controller;
 
-class Index extends AdminControl
+/**
+ * 主页管理类
+ */
+class Index extends Controller
 {
 
-    public function _initialize()
+
+    /**
+     * 构造函数
+     *
+     * @access public
+     */
+    public function __construct()
     {
-        parent::_initialize();
-        Lang::load(APP_PATH . 'home/lang/' . config('default_lang') . '/index.lang.php');
-    }
+        parent::__construct();
+    }// end__construct()
 
+    /**
+     * 主页管理
+     *
+     * @access public
+     * @return array JsonString
+     */
     public function index()
     {
-        $allpower = $this->qxhans();
-        $this->assign('allpower',$allpower);
-        $this->assign('admin_info', $this->getAdminInfo());
+        $navigationField = [
+            'navigation_zhName',
+            'navigation_enName',
+            'navigation_id',
+        ];
+        $getNavigation = model('Navigation')->getSelect($navigationField);
+        $this->assign('navigation', $getNavigation);
+        $navigationId = [
+            'home',
+            'service',
+            'portfolio',
+            'about',
+            'pricing',
+            'contact',
+        ];
+        $this->assign('navigationId', $navigationId);
+
+        $this->assign('admin_info', 11);
         return $this->fetch();
     }
 

+ 33 - 0
application/home/model/Navigation.php

@@ -0,0 +1,33 @@
+<?php
+namespace app\home\model;
+
+use think\Model;
+
+/**
+ * 主页导航管理模型
+ */
+class Navigation extends Model
+{
+
+
+    /**
+     * 主页导航管理模型
+     *
+     * @access public
+     * @param mixed $field 查询字段
+     * @param mixed $where 条件
+     * @return array 返回类型
+     */
+    public function getSelect($field, $where=[])
+    {
+        $result = $this->field($field);
+        if (empty($where) === false) {
+            $result = $result->where($where);
+        }
+
+        $result = $result->select();
+        return $result;
+    }//endgetSelect()
+
+
+}

+ 185 - 0
application/home/view/index/index - 副本 (2).html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>麦帮官网</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <!-- Bootstrap 3.3.7 -->
+    <link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/layui/css/layui.css">
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/admin.css">
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/iconfont/iconfont.css">
+    <script src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js"></script>
+    <script src="{$Think.HOME_SITE_ROOT}/js/admin.js"></script>
+    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/layui/layui.js"></script>
+    <script type="text/javascript">
+        var BASESITEROOT = "{$Think.BASE_SITE_ROOT}";
+        var ADMINSITEROOT = "{$Think.HOME_SITE_ROOT}";
+        var BASESITEURL = "{$Think.BASE_SITE_URL}";
+        var HOMESITEURL = "{$Think.HOME_SITE_URL}";
+        var ADMINSITEURL = "{$Think.ADMIN_SITE_URL}";
+    </script>
+</head>
+<body>
+<style type="text/css">
+    .layui-tab {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 10;
+        margin: 0;
+        border: none;
+        overflow: hidden;
+    }
+
+    .layui-tab-content {
+        padding: 0;
+        height: 100%;
+    }
+
+    .layui-tab-item {
+        height: 100%;
+    }
+	.treeview .admin-nav-item{
+		    color: #a7b1c2 !important;
+			padding-left: 5px;
+	}
+	.treeview .admin-nav-item:hover{
+			color: #fff !important;
+	}
+</style>
+<div class="admincp-header">
+    <div class="logo">
+        <img width="200" src="{$Think.HOME_SITE_ROOT}/images/backlogo.jpg"/>
+    </div>
+    <div class="navbar">
+        <ul class="fr" style="float:right" id="nav">
+            <li>
+                <span>{$Think.lang.ds_shalom},{$Think.session.service_name}</span>
+                <dl class="layui-nav-child"> <!-- 二级菜单 -->
+                    <dd><a href="javascript:dsLayerOpen('{:url('Index/modifypw')}','{$Think.lang.ds_change_password}')">{$Think.lang.ds_change_password}</a></dd>
+                    <dd><a href="{:url('Login/logout')}">{$Think.lang.ds_safe_withdrawing}</a></dd>
+                </dl>
+            </li>
+            <li><a href="javascript:dsLayerConfirm('{:url('Index/clear')}','{$Think.lang.ds_clear_cache_confirm}')">{$Think.lang.ds_clear_cache}</a></li>
+        </ul>
+    </div>
+</div>
+<div class="admincp-container">
+    <div class="admincp-container-left">
+    </div>
+
+    <div class="admincp-container-right">
+        <div class="layui-tab layui-tab-card" lay-filter="dsTab" lay-allowclose="true">
+            <ul class="layui-tab-title">
+                <li class="layui-this" lay-id="0">
+                    <cite>{$Think.lang.ds_welcome}</cite>
+                </li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                   
+                </div>
+            </div>
+        </div>
+    </div>
+    {block name="container"}{/block}
+</div>
+<script type="text/javascript">
+    var width =document.body.clientWidth;
+    var changesmall =function(){
+        if($(".admincp-container-left").css("width")=="200px"){
+            $(".admincp-container-left").css("width","55px");
+            $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
+            $(".title").attr('title',$(".title .title-txt").html())
+            $(".title .title-txt").css("display","none");
+            $('.admincp-container-right').css("left","55px");
+        }else{
+            $(".admincp-container-left").css("width","200px");
+            $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
+            $(".title").attr('title',"")
+            $(".title span").css("display","inline-block");
+            $('.admincp-container-right').css("left","200px");
+        }
+    }
+
+</script>
+<script type="text/javascript">
+    layui.use(['jquery', 'element', 'layer'], function () {
+        var $ = layui.jquery, element = layui.element, layer = layui.layer;
+        $('.layui-tab-content').height($(window).height() - 145);
+        var tab = {
+            add: function (title, url, id) {
+                element.tabAdd('dsTab', {
+                    title: title,
+                    content: '<iframe width="100%" height="100%" lay-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>',
+                    id: id
+                });
+            }, change: function (id) {
+                element.tabChange('dsTab', id);
+            }
+        };
+        $('.admin-nav-item').click(function (event) {
+            var that = $(this);
+            if ($('iframe[src="' + that.attr('href') + '"]')[0]) {
+                tab.change(that.attr('data-id'));
+				$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
+				that.css({color: '#fff',backgroundColor:'#009688'});
+                event.stopPropagation();
+                return false;
+            }
+            if ($('iframe').length == 20) {
+                layer.msg('最多可打开20个标签页');
+                return false;
+            }
+            that.css({color: '#fff'});
+            tab.add(that.text(), that.attr('href'), that.attr('data-id'));
+            tab.change(that.attr('data-id'));
+			$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
+			that.css({color: '#fff',backgroundColor:'#009688'});
+            event.stopPropagation();
+            return false;
+        });
+        $(document).on('click', '.layui-tab-close', function () {
+            $('.layui-nav-child a[data-id="' + $(this).parent('li').attr('lay-id') + '"]').css({color: 'rgba(255,255,255,.7)'});
+        });
+    });
+    $('#gloMenu').on('click', '#navT', function () {
+		$('.treeview .title').css({borderLeft:'5px solid transparent'});
+		$(this).css({borderLeft:'5px solid #009688',backgroundColr:'#333'})
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#navC').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#navC').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#navC').stop(true).slideUp(300);
+                parent.addClass('open').find('#navC').stop(true).slideDown(300);
+            }
+        }
+    })
+    $('#nav').on('click', '#nav1', function () {
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#nav2').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#nav2').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#nav2').stop(true).slideUp(300);
+                parent.addClass('open').find('#nav2').stop(true).slideDown(300);
+            }
+        }
+    })
+</script>
+</body>
+
+
+</html>

+ 206 - 0
application/home/view/index/index - 副本.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>麦帮官网</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <!-- Bootstrap 3.3.7 -->
+    <link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/layui/css/layui.css">
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/admin.css">
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/iconfont/iconfont.css">
+    <script src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js"></script>
+    <script src="{$Think.HOME_SITE_ROOT}/js/admin.js"></script>
+    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/layui/layui.js"></script>
+    <script type="text/javascript">
+        var BASESITEROOT = "{$Think.BASE_SITE_ROOT}";
+        var ADMINSITEROOT = "{$Think.HOME_SITE_ROOT}";
+        var BASESITEURL = "{$Think.BASE_SITE_URL}";
+        var HOMESITEURL = "{$Think.HOME_SITE_URL}";
+        var ADMINSITEURL = "{$Think.ADMIN_SITE_URL}";
+    </script>
+</head>
+<body>
+<style type="text/css">
+    .layui-tab {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 10;
+        margin: 0;
+        border: none;
+        overflow: hidden;
+    }
+
+    .layui-tab-content {
+        padding: 0;
+        height: 100%;
+    }
+
+    .layui-tab-item {
+        height: 100%;
+    }
+	.treeview .admin-nav-item{
+		    color: #a7b1c2 !important;
+			padding-left: 5px;
+	}
+	.treeview .admin-nav-item:hover{
+			color: #fff !important;
+	}
+</style>
+<div class="admincp-header">
+    <div class="logo">
+        <img width="200" src="{$Think.HOME_SITE_ROOT}/images/backlogo.jpg"/>
+    </div>
+    <div class="navbar">
+        <ul class="fr" style="float:right" id="nav">
+            <li>
+                <span>{$Think.lang.ds_shalom},{$Think.session.service_name}</span>
+                <dl class="layui-nav-child"> <!-- 二级菜单 -->
+                    <dd><a href="javascript:dsLayerOpen('{:url('Index/modifypw')}','{$Think.lang.ds_change_password}')">{$Think.lang.ds_change_password}</a></dd>
+                    <dd><a href="{:url('Login/logout')}">{$Think.lang.ds_safe_withdrawing}</a></dd>
+                </dl>
+            </li>
+            <li><a href="javascript:dsLayerConfirm('{:url('Index/clear')}','{$Think.lang.ds_clear_cache_confirm}')">{$Think.lang.ds_clear_cache}</a></li>
+        </ul>
+    </div>
+</div>
+<div class="admincp-container">
+    <div class="admincp-container-left">
+        <ul class="sidebar-menu" id="gloMenu">
+            {foreach name="menu_list" item="menu" key="fe_menu"}
+            {if !empty($menu.children)}
+            <li class="treeview">
+                <div class="title" id="navT"><i class="iconfont icon-{$fe_menu}"></i><span class="title-txt"> {$menu.text}</span><span class="layui-nav-more"></span></div>
+                <ul class="treeview-menu" id="navC" style="display:none;">
+                    {foreach name="menu.children" item="submenu" key="fe_submenu" }
+                    {if array_intersect(explode("/",substr($submenu['url'],6,-5)),$gupinfo)}
+                        <li><a data-id="{$fe_menu}-{$fe_submenu}" href="{$submenu.url}" class="admin-nav-item">{$submenu.text}</a></li>
+                    {/if}
+                    {/foreach}
+                </ul>
+            </li>
+			{else}
+				<li class="treeview">
+					<div class="title" id="navT"><i class="iconfont icon-{$fe_menu}"></i><a data-id="{$fe_menu}" href="{$menu.url}" class="admin-nav-item">{$menu.text}</a></div>
+				</li>
+            {/if}
+
+            {/foreach}
+        </ul>
+    </div>
+
+    <div class="admincp-container-right">
+        <div class="layui-tab layui-tab-card" lay-filter="dsTab" lay-allowclose="true">
+            <ul class="layui-tab-title">
+                <li class="layui-this" lay-id="0">
+                    <cite>{$Think.lang.ds_welcome}</cite>
+                </li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                    <iframe lay-id="0" src="{:url('Wlcome/index')}" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+    {block name="container"}{/block}
+</div>
+<script type="text/javascript">
+    var width =document.body.clientWidth;
+    var changesmall =function(){
+        if($(".admincp-container-left").css("width")=="200px"){
+            $(".admincp-container-left").css("width","55px");
+            $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
+            $(".title").attr('title',$(".title .title-txt").html())
+            $(".title .title-txt").css("display","none");
+            $('.admincp-container-right').css("left","55px");
+        }else{
+            $(".admincp-container-left").css("width","200px");
+            $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
+            $(".title").attr('title',"")
+            $(".title span").css("display","inline-block");
+            $('.admincp-container-right').css("left","200px");
+        }
+    }
+
+</script>
+<script type="text/javascript">
+    layui.use(['jquery', 'element', 'layer'], function () {
+        var $ = layui.jquery, element = layui.element, layer = layui.layer;
+        $('.layui-tab-content').height($(window).height() - 145);
+        var tab = {
+            add: function (title, url, id) {
+                element.tabAdd('dsTab', {
+                    title: title,
+                    content: '<iframe width="100%" height="100%" lay-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>',
+                    id: id
+                });
+            }, change: function (id) {
+                element.tabChange('dsTab', id);
+            }
+        };
+        $('.admin-nav-item').click(function (event) {
+            var that = $(this);
+            if ($('iframe[src="' + that.attr('href') + '"]')[0]) {
+                tab.change(that.attr('data-id'));
+				$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
+				that.css({color: '#fff',backgroundColor:'#009688'});
+                event.stopPropagation();
+                return false;
+            }
+            if ($('iframe').length == 20) {
+                layer.msg('最多可打开20个标签页');
+                return false;
+            }
+            that.css({color: '#fff'});
+            tab.add(that.text(), that.attr('href'), that.attr('data-id'));
+            tab.change(that.attr('data-id'));
+			$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
+			that.css({color: '#fff',backgroundColor:'#009688'});
+            event.stopPropagation();
+            return false;
+        });
+        $(document).on('click', '.layui-tab-close', function () {
+            $('.layui-nav-child a[data-id="' + $(this).parent('li').attr('lay-id') + '"]').css({color: 'rgba(255,255,255,.7)'});
+        });
+    });
+    $('#gloMenu').on('click', '#navT', function () {
+		$('.treeview .title').css({borderLeft:'5px solid transparent'});
+		$(this).css({borderLeft:'5px solid #009688',backgroundColr:'#333'})
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#navC').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#navC').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#navC').stop(true).slideUp(300);
+                parent.addClass('open').find('#navC').stop(true).slideDown(300);
+            }
+        }
+    })
+    $('#nav').on('click', '#nav1', function () {
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#nav2').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#nav2').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#nav2').stop(true).slideUp(300);
+                parent.addClass('open').find('#nav2').stop(true).slideDown(300);
+            }
+        }
+    })
+</script>
+</body>
+
+
+</html>

+ 764 - 188
application/home/view/index/index.html

@@ -1,206 +1,782 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/html">
+<!--[if lt IE 7]>      <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html lang="en" class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
 <head>
-    <meta charset="utf-8">
+    <!-- Mobile Specific Meta -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Always force latest IE rendering engine -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>麦帮官网</title>
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-    <!-- Bootstrap 3.3.7 -->
-    <link rel="stylesheet" href="{$Think.PLUGINS_SITE_ROOT}/layui/css/layui.css">
-    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/admin.css">
-    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/iconfont/iconfont.css">
-    <script src="{$Think.PLUGINS_SITE_ROOT}/jquery-2.1.4.min.js"></script>
-    <script src="{$Think.HOME_SITE_ROOT}/js/admin.js"></script>
-    <script type="text/javascript" src="{$Think.PLUGINS_SITE_ROOT}/layui/layui.js"></script>
-    <script type="text/javascript">
-        var BASESITEROOT = "{$Think.BASE_SITE_ROOT}";
-        var ADMINSITEROOT = "{$Think.HOME_SITE_ROOT}";
-        var BASESITEURL = "{$Think.BASE_SITE_URL}";
-        var HOMESITEURL = "{$Think.HOME_SITE_URL}";
-        var ADMINSITEURL = "{$Think.ADMIN_SITE_URL}";
-    </script>
+    <!-- Meta Keyword -->
+    <meta name="keywords" content="one page, business template, single page, onepage, responsive, parallax, creative, business, html5, css3, css3 animation">
+    <!-- meta character set -->
+    <meta charset="utf-8">
+
+    <!-- Site Title -->
+    <title>AQM官网</title>
+
+    <!--
+    Google Fonts
+    ============================================= -->
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Baloo+Thambi|Slabo+27px" rel="stylesheet">
+
+    <!--
+    CSS
+    ============================================= -->
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/font-awesome.min.css">
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/bootstrap.min.css">
+    <!-- Fancybox -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/jquery.fancybox.css">
+    <!-- owl carousel -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/owl.carousel.css">
+    <!-- Animate -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/animate.css">
+    <!-- Main Stylesheet -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/main.css">
+    <!-- Main Responsive -->
+    <link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/css/responsive.css">
+
+    <!-- Modernizer Script for old Browsers -->
+    <script src="{$Think.HOME_SITE_ROOT}/js/vendor/modernizr-2.6.2.min.js"></script>
+
 </head>
+
 <body>
-<style type="text/css">
-    .layui-tab {
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-        z-index: 10;
-        margin: 0;
-        border: none;
-        overflow: hidden;
-    }
-
-    .layui-tab-content {
-        padding: 0;
-        height: 100%;
-    }
-
-    .layui-tab-item {
-        height: 100%;
-    }
-	.treeview .admin-nav-item{
-		    color: #a7b1c2 !important;
-			padding-left: 5px;
-	}
-	.treeview .admin-nav-item:hover{
-			color: #fff !important;
-	}
-</style>
-<div class="admincp-header">
-    <div class="logo">
-        <img width="200" src="{$Think.HOME_SITE_ROOT}/images/backlogo.jpg"/>
+
+<!--
+Fixed Navigation
+==================================== -->
+<header id="navigation" class="navbar-fixed-top">
+    <div class="container">
+
+        <div class="navbar-header">
+            <!-- responsive nav button -->
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <!-- /responsive nav button -->
+
+            <!-- logo -->
+            <!--<h1 class="navbar-brand">-->
+            <h1 class="">
+                <a href="#body">
+                    <img src="{$Think.HOME_SITE_ROOT}/img/logo.png" width="40%">
+                    <!--<div class="site-logo"><span>K</span>eeper</div>-->
+                </a>
+            </h1>
+            <!-- /logo -->
+
+        </div>
+
+        <!-- main nav -->
+        <nav class="collapse navigation navbar-collapse navbar-right" role="navigation">
+            <ul id="nav" class="nav navbar-nav">
+                {foreach name="navigation" item="value" key="key"}
+                    <li><a href="#{$navigationId[$key]}">{$value.navigation_zhName}</a></li>
+                {/foreach}
+                <!--<li><a href="#service">Service</a></li>
+                <li><a href="#portfolio">portfolio</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#pricing">Pricing</a></li>
+                <li><a href="#contact">Contact</a></li>-->
+            </ul>
+        </nav>
+        <!-- /main nav -->
     </div>
-    <div class="navbar">
-        <ul class="fr" style="float:right" id="nav">
-            <li>
-                <span>{$Think.lang.ds_shalom},{$Think.session.service_name}</span>
-                <dl class="layui-nav-child"> <!-- 二级菜单 -->
-                    <dd><a href="javascript:dsLayerOpen('{:url('Index/modifypw')}','{$Think.lang.ds_change_password}')">{$Think.lang.ds_change_password}</a></dd>
-                    <dd><a href="{:url('Login/logout')}">{$Think.lang.ds_safe_withdrawing}</a></dd>
-                </dl>
-            </li>
-            <li><a href="javascript:dsLayerConfirm('{:url('Index/clear')}','{$Think.lang.ds_clear_cache_confirm}')">{$Think.lang.ds_clear_cache}</a></li>
-        </ul>
+
     </div>
-</div>
-<div class="admincp-container">
-    <div class="admincp-container-left">
-        <ul class="sidebar-menu" id="gloMenu">
-            {foreach name="menu_list" item="menu" key="fe_menu"}
-            {if !empty($menu.children)}
-            <li class="treeview">
-                <div class="title" id="navT"><i class="iconfont icon-{$fe_menu}"></i><span class="title-txt"> {$menu.text}</span><span class="layui-nav-more"></span></div>
-                <ul class="treeview-menu" id="navC" style="display:none;">
-                    {foreach name="menu.children" item="submenu" key="fe_submenu" }
-                    {if array_intersect(explode("/",substr($submenu['url'],6,-5)),$gupinfo)}
-                        <li><a data-id="{$fe_menu}-{$fe_submenu}" href="{$submenu.url}" class="admin-nav-item">{$submenu.text}</a></li>
-                    {/if}
-                    {/foreach}
+</header>
+<!--
+End Fixed Navigation
+==================================== -->
+
+
+<!--
+Home Slider
+==================================== -->
+<section id="home">
+    <div class="container">
+        <div class="home-intro">
+            <div class="animated bounceInRight">
+                <h2>HELLO Keeper <br>WE ARE KASPER,WE MAKE ART.</h2>
+                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam. Accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt accumsan id imperdiet.</p>
+                <ul class="list-inline available">
+                    <li><span>Available On :</span></li>
+                    <li><i class="fa fa-android"></i></li>
+                    <li><i class="fa fa-apple"></i></li>
+                    <li><i class="fa fa-windows"></i></li>
                 </ul>
-            </li>
-			{else}
-				<li class="treeview">
-					<div class="title" id="navT"><i class="iconfont icon-{$fe_menu}"></i><a data-id="{$fe_menu}" href="{$menu.url}" class="admin-nav-item">{$menu.text}</a></div>
-				</li>
-            {/if}
-		
-            {/foreach}
-        </ul>
+            </div>
+        </div>
     </div>
+</section>
+<!--
+End #home Slider
+========================== -->
+
+
+<!--
+#service
+========================== -->
+<section id="{$navigationId[1]}">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="section-title text-center wow fadeInDown">
+                    <h2>Services</h2>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
 
-    <div class="admincp-container-right">
-        <div class="layui-tab layui-tab-card" lay-filter="dsTab" lay-allowclose="true">
-            <ul class="layui-tab-title">
-                <li class="layui-this" lay-id="0">
-                    <cite>{$Think.lang.ds_welcome}</cite>
-                </li>
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div> <!-- end .row -->
+    </div> <!-- end .container -->
+</section><div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >自助建站</a></div>
+<!--
+End #service
+========================== -->
+
+<!--
+#service-bottom
+========================== -->
+
+<section id="service-bottom">
+    <div class="container">
+        <div class="mobile-device">
+            <img data-wow-delay="0.2s" class="img-responsive black  wow fadeInLeftBig" src="img/iphone/iphone-black.png" alt="iPhone Black">
+            <img data-wow-delay="0.5s" class="img-responsive white  wow fadeInLeftBig" src="img/iphone/iphone-white.png" alt="iPhone White">
+        </div>
+        <div class="service-features wow fadeInRight">
+            <h3>Our Latest Services</h3>
+            <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+            <ul>
+                <li><i class="fa fa-android"></i>Responsive Design</li>
+                <li><i class="fa fa-apple"></i>Modern And Clean Design</li>
+                <li><i class="fa fa-globe"></i>Browser Friendly</li>
+                <li><i class="fa fa-code"></i>Clean Code</li>
             </ul>
-            <div class="layui-tab-content">
-                <div class="layui-tab-item layui-show">
-                    <iframe lay-id="0" src="{:url('Wlcome/index')}" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+        </div>
+    </div>
+</section>
+<!--
+End #service-bottom
+========================== -->
+
+
+<!--
+#Portfolio
+========================== -->
+
+<section id="portfolio">
+
+    <div class="section-title text-center wow fadeInDown">
+        <h2>Portfolio</h2>
+        <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+    </div>
+
+    <nav class="project-filter clearfix text-center wow fadeInLeft"  data-wow-delay="0.5s">
+        <ul class="list-inline">
+            <li><a href="javascript:;" class="filter" data-filter="all">All</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".app">App</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".photography">Photography</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".web">Web</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".print">Print</a></li>
+        </ul>
+    </nav>
+
+    <div id="projects" class="clearfix">
+
+        <figure class="mix portfolio-item app">
+            <img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-1.jpg" title="Title One" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item photography">
+            <img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-2.jpg" title="Title Two" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item web">
+            <img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-3.jpg" title="Title Three" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item print">
+            <img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-4.jpg" title="Title Four" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item app">
+            <img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-4.jpg" title="Title Five" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item photography">
+            <img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-1.jpg" title="Title Six" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item web app">
+            <img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-2.jpg" title="Title Seven" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item print web">
+            <img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-3.jpg" title="Title Eight" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+    </div> <!-- end #projects -->
+
+</section>
+<!--
+End #Portfolio
+========================== -->
+
+<!--
+#about
+========================== -->
+<section id="about">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-12">
+                <div class="section-title text-center wow fadeInUp">
+                    <h2>About Us</h2>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+                    <a class="btn btn-blue" role="button">Read More</a>
+                </div>
+            </div>
+            <div class="col-md-12 text-center">
+
+                <div class="about-us text-center wow fadeInDown">
+                    <img src="img/about.png" alt="About Us" class="img-responsive">
                 </div>
             </div>
+
         </div>
     </div>
-    {block name="container"}{/block}
-</div>
-<script type="text/javascript">
-    var width =document.body.clientWidth;
-    var changesmall =function(){
-        if($(".admincp-container-left").css("width")=="200px"){
-            $(".admincp-container-left").css("width","55px");
-            $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
-            $(".title").attr('title',$(".title .title-txt").html())
-            $(".title .title-txt").css("display","none");
-            $('.admincp-container-right').css("left","55px");
-        }else{
-            $(".admincp-container-left").css("width","200px");
-            $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
-            $(".title").attr('title',"")
-            $(".title span").css("display","inline-block");
-            $('.admincp-container-right').css("left","200px");
-        }
-    }
-
-</script>
-<script type="text/javascript">
-    layui.use(['jquery', 'element', 'layer'], function () {
-        var $ = layui.jquery, element = layui.element, layer = layui.layer;
-        $('.layui-tab-content').height($(window).height() - 145);
-        var tab = {
-            add: function (title, url, id) {
-                element.tabAdd('dsTab', {
-                    title: title,
-                    content: '<iframe width="100%" height="100%" lay-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>',
-                    id: id
-                });
-            }, change: function (id) {
-                element.tabChange('dsTab', id);
-            }
-        };
-        $('.admin-nav-item').click(function (event) {
-            var that = $(this);
-            if ($('iframe[src="' + that.attr('href') + '"]')[0]) {
-                tab.change(that.attr('data-id'));
-				$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
-				that.css({color: '#fff',backgroundColor:'#009688'});
-                event.stopPropagation();
-                return false;
-            }
-            if ($('iframe').length == 20) {
-                layer.msg('最多可打开20个标签页');
-                return false;
-            }
-            that.css({color: '#fff'});
-            tab.add(that.text(), that.attr('href'), that.attr('data-id'));
-            tab.change(that.attr('data-id'));
-			$('.admin-nav-item').css({color: '#a7b1c2',backgroundColor:'#2c3b41'});
-			that.css({color: '#fff',backgroundColor:'#009688'});
-            event.stopPropagation();
-            return false;
-        });
-        $(document).on('click', '.layui-tab-close', function () {
-            $('.layui-nav-child a[data-id="' + $(this).parent('li').attr('lay-id') + '"]').css({color: 'rgba(255,255,255,.7)'});
-        });
-    });
-    $('#gloMenu').on('click', '#navT', function () {
-		$('.treeview .title').css({borderLeft:'5px solid transparent'});
-		$(this).css({borderLeft:'5px solid #009688',backgroundColr:'#333'})
-        var parent = $(this).closest('li');
-        var index = parent.index();
-        if (parent.find('#navC').find('li').length) {
-            if (parent.hasClass('open')) {
-                parent.find('#navC').stop(true).slideUp(300, function () {
-                    parent.removeClass('open')
-                });
-            } else {
-                var openLi = $('.sidebar-menu').find('li.open');
-                openLi.removeClass('open').find('#navC').stop(true).slideUp(300);
-                parent.addClass('open').find('#navC').stop(true).slideDown(300);
-            }
-        }
-    })
-    $('#nav').on('click', '#nav1', function () {
-        var parent = $(this).closest('li');
-        var index = parent.index();
-        if (parent.find('#nav2').find('li').length) {
-            if (parent.hasClass('open')) {
-                parent.find('#nav2').stop(true).slideUp(300, function () {
-                    parent.removeClass('open')
-                });
-            } else {
-                var openLi = $('.sidebar-menu').find('li.open');
-                openLi.removeClass('open').find('#nav2').stop(true).slideUp(300);
-                parent.addClass('open').find('#nav2').stop(true).slideDown(300);
-            }
-        }
-    })
-</script>
-</body>
+</section>
+<!--
+End #about
+========================== -->
+
+
+<!--
+#count
+========================== -->
+
+<section id="count">
+    <div class="container">
+        <div class="row">
 
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="0.5s">
+                <div class="fact-item text-center">
+                    <div class="count-icon">
+                        <i class="fa fa-android"></i>
+                    </div>
+                    <span data-to="120">0</span>
+                    <p>Completed Projects</p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="0.8s">
+                <div class="fact-item text-center">
+                    <div class="count-icon">
+                        <i class="fa fa-users"></i>
+                    </div>
+                    <span data-to="152">0</span>
+                    <p>Satisfied Clients</p>
+                </div>
+            </div>
 
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="1.1s">
+                <div class="fact-item text-center last">
+                    <div class="count-icon">
+                        <i class="fa fa-clock-o"></i>
+                    </div>
+                    <span data-to="2500">0</span>
+                    <p>Working Hours</p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="1.3s">
+                <div class="fact-item text-center last">
+                    <div class="count-icon">
+                        <i class="fa fa-trophy"></i>
+                    </div>
+                    <span data-to="150">0</span>
+                    <p>Award Won</p>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+<!--
+End #count
+========================== -->
+
+<!--
+#about-us
+========================== -->
+<section id="about-us">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-5 col-md-offset-1 wow fadeInLeft">
+
+                <div class="subtitle">
+                    <h3>Testimonials</h3>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc eifend eget turp.</p>
+                </div>
+
+                <div id="testimonial">
+
+                    <div class="tst-item clearfix">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/1.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>Albart Windy, CEO</span>
+                            </div>
+                        </div>
+
+                        <div class="tst-single clearfix">
+                            <img src="img/client/2.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tst-item">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/3.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                        <div class="tst-single clearfix">
+                            <img src="img/client/1.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tst-item">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/2.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                        <div class="tst-single clearfix">
+                            <img src="img/client/3.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div> <!-- end #testimonial -->
+            </div> <!-- end .col-md-5 -->
+
+            <div class="col-md-5 col-md-offset-1 wow fadeInRight">
+
+                <div class="subtitle">
+                    <h3>OUR SKILLS</h3>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc eifend eget turp.</p>
+                </div>
+
+                <div class="progress-bars">
+
+                    <span>HTML 5</span>
+                    <div class="progress"  data-progress="85">
+                        <div class="bar"><small>85%</small></div>
+                    </div>
+                    <span>CSS 3</span>
+                    <div class="progress"  data-progress="90">
+                        <div class="bar"><small>90%</small></div>
+                    </div>
+                    <span>PHP</span>
+                    <div class="progress" data-progress="65">
+                        <div class="bar"><small>65%</small></div>
+                    </div>
+                    <span>mySQL</span>
+                    <div class="progress kill-margin"  data-progress="50">
+                        <div class="bar"><small>50%</small></div>
+                    </div>
+
+                </div>  <!-- progress-bars -->
+
+            </div>  <!-- end .col-md-5 -->
+
+        </div>
+    </div>
+</section>
+<!--
+End #about-us
+========================== -->
+
+<!--
+#quotes
+========================== -->
+<section id="quotes">
+    <div class="container">
+        <div class="row wow zoomIn">
+            <div class="col-lg-12">
+                <div class="call-to-action text-center">
+                    <div class="twitter"><i class="fa fa-twitter"></i></div>
+                    <p>“ACCUMSAN ID CURABITUR ET PORTITOR MAURIS BLANDIT DOLOR LOREM SOME EST OUR DONEC STIN LORTIOS”</p>
+                    <span>Albart Windy, ThemeForest</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!--
+End #quotes
+========================== -->
+
+<!--
+#pricing
+========================== -->
+<section id="pricing">
+    <div class="container">
+        <div class="row">
+
+            <div class="section-title text-center wow fadeInUp">
+                <h2>Pricing</h2>
+                <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-taxi"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Basic</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.3s">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-ambulance"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Premium</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.6s">
+                <div class="pricing-table highlight text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-rocket"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Pro</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.9s">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-plane"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Platinum</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 wow fadeInUp">
+                <div class="special-plan text-center">
+                    <p>Contact us if you have special request</p>
+                    <a href="#" class="btn btn-blue">Contact Us</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!--
+End #pricing
+========================== -->
+
+
+<!--
+#subscribe
+========================== -->
+<section id="subscribe">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-4 col-sm-5 col-xs-12 text-left wow fadeInRight">
+                <div class="subscribe-man"><img class="img-responsive" src="img/young-men.png" /></div>
+            </div>
+            <div class="col-md-7 col-sm-7 col-xs-12 wow fadeInLeft">
+                <form action="#" method="post" class="subscription-form">
+                    <i class="fa fa-envelope-o fa-lg"></i>
+                    <input type="email" name="subscribe" class="subscribe" placeholder="YOUR MAIL">
+                    <input type="submit" value="SUBSCRIBE" id="mail-submit">
+                </form>
+            </div>
+
+        </div>
+    </div>
+</section>
+<!--
+End #subscribe
+========================== -->
+
+<!--
+#contact
+========================== -->
+<section id="contact">
+    <div class="container">
+        <div class="row">
+
+            <div class="section-title text-center wow fadeInDown">
+                <h2>Contact Us</h2>
+                <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+            </div>
+
+            <div class="col-md-8 col-md-offset-2 wow fadeInLeft">
+                <div class="contact-form clearfix">
+                    <form class="text-center" action="index.html" method="post">
+                        <div class="input-field">
+                            <input type="text" class="form-control" name="name" placeholder="Your Name" required="">
+                        </div>
+                        <div class="input-field">
+                            <input type="email" class="form-control" name="email" placeholder="Your Email" required="">
+                        </div>
+                        <div class="input-field message">
+                            <textarea name="message" class="form-control" placeholder="Your Message" required></textarea>
+                        </div>
+                        <input type="submit" class="btn btn-blue" value="SEND MESSAGE" id="msg-submit">
+                    </form>
+                </div> <!-- end .contact-form -->
+            </div> <!-- .col-md-8 -->
+
+        </div>
+    </div>
+</section>
+<!--
+End #contact
+========================== -->
+
+<!--
+#footer
+========================== -->
+<footer id="footer" class="text-center">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12">
+
+                <div class="footer-social wow fadeInUp">
+                    <h3><span>K</span>eeper</h3>
+                    <ul class="text-center list-inline">
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-facebook fa-lg"></i>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-twitter fa-lg"></i>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-google-plus fa-lg"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="copyright">
+
+                    <p>Theme by Scripteden. Developed by Shaifuddin / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</footer>
+<!--
+End #footer
+========================== -->
+
+
+<!--
+JavaScripts
+========================== -->
+
+<!-- main jQuery -->
+<script src="js/vendor/jquery-1.11.1.min.js"></script>
+<!-- Bootstrap -->
+<script src="{$Think.HOME_SITE_ROOT}/js/bootstrap.min.js"></script>
+<!-- jquery.nav -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery.nav.js"></script>
+<!-- Portfolio Filtering -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery.mixitup.min.js"></script>
+<!-- Fancybox -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery.fancybox.pack.js"></script>
+<!-- Parallax sections -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery.parallax-1.1.3.js"></script>
+<!-- jQuery Appear -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery.appear.js"></script>
+<!-- countTo -->
+<script src="{$Think.HOME_SITE_ROOT}/js/jquery-countTo.js"></script>
+<!-- owl carousel -->
+<script src="{$Think.HOME_SITE_ROOT}/js/owl.carousel.min.js"></script>
+<!-- WOW script -->
+<script src="{$Think.HOME_SITE_ROOT}/js/wow.min.js"></script>
+<!-- theme custom scripts -->
+<script src="{$Think.HOME_SITE_ROOT}/js/main.js"></script>
+</body>
 </html>

+ 3296 - 0
public/static/home/css/animate.css

@@ -0,0 +1,3296 @@
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2013 Daniel Eden
+*/
+.animated {
+  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}
+
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+.flash {
+  -webkit-animation-name: flash;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  30% {
+    -webkit-transform: scaleX(1.25) scaleY(0.75);
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+
+  40% {
+    -webkit-transform: scaleX(0.75) scaleY(1.25);
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+
+  60% {
+    -webkit-transform: scaleX(1.15) scaleY(0.85);
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes rubberBand {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  30% {
+    -webkit-transform: scaleX(1.25) scaleY(0.75);
+    -ms-transform: scaleX(1.25) scaleY(0.75);
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+
+  40% {
+    -webkit-transform: scaleX(0.75) scaleY(1.25);
+    -ms-transform: scaleX(0.75) scaleY(1.25);
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+
+  60% {
+    -webkit-transform: scaleX(1.15) scaleY(0.85);
+    -ms-transform: scaleX(1.15) scaleY(0.85);
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.rubberBand {
+  -webkit-animation-name: rubberBand;
+  animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    -ms-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    -ms-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    -ms-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    -ms-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    -ms-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    -ms-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    -ms-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    -ms-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    -ms-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+@keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    -ms-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    -ms-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    -ms-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    -ms-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    -ms-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    -ms-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    -ms-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    -ms-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+
+@-webkit-keyframes slideInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes slideOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.slideOutDown {
+  -webkit-animation-name: slideOutDown;
+  animation-name: slideOutDown;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    -ms-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    -ms-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    -ms-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    -ms-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    -ms-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    -ms-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.zoomIn {
+  -webkit-animation-name: zoomIn;
+  animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(-2000px);
+    transform: scale(.1) translateY(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(60px);
+    transform: scale(.475) translateY(60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes zoomInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(-2000px);
+    -ms-transform: scale(.1) translateY(-2000px);
+    transform: scale(.1) translateY(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(60px);
+    -ms-transform: scale(.475) translateY(60px);
+    transform: scale(.475) translateY(60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+.zoomInDown {
+  -webkit-animation-name: zoomInDown;
+  animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(-2000px);
+    transform: scale(.1) translateX(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(48px);
+    transform: scale(.475) translateX(48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes zoomInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(-2000px);
+    -ms-transform: scale(.1) translateX(-2000px);
+    transform: scale(.1) translateX(-2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(48px);
+    -ms-transform: scale(.475) translateX(48px);
+    transform: scale(.475) translateX(48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+.zoomInLeft {
+  -webkit-animation-name: zoomInLeft;
+  animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(2000px);
+    transform: scale(.1) translateX(2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(-48px);
+    transform: scale(.475) translateX(-48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes zoomInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(2000px);
+    -ms-transform: scale(.1) translateX(2000px);
+    transform: scale(.1) translateX(2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(-48px);
+    -ms-transform: scale(.475) translateX(-48px);
+    transform: scale(.475) translateX(-48px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+.zoomInRight {
+  -webkit-animation-name: zoomInRight;
+  animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(2000px);
+    transform: scale(.1) translateY(2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(-60px);
+    transform: scale(.475) translateY(-60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes zoomInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(2000px);
+    -ms-transform: scale(.1) translateY(2000px);
+    transform: scale(.1) translateY(2000px);
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(-60px);
+    -ms-transform: scale(.475) translateY(-60px);
+    transform: scale(.475) translateY(-60px);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
+.zoomInUp {
+  -webkit-animation-name: zoomInUp;
+  animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.zoomOut {
+  -webkit-animation-name: zoomOut;
+  animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(-60px);
+    transform: scale(.475) translateY(-60px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(2000px);
+    transform: scale(.1) translateY(2000px);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+}
+
+@keyframes zoomOutDown {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(-60px);
+    -ms-transform: scale(.475) translateY(-60px);
+    transform: scale(.475) translateY(-60px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(2000px);
+    -ms-transform: scale(.1) translateY(2000px);
+    transform: scale(.1) translateY(2000px);
+    -webkit-transform-origin: center bottom;
+    -ms-transform-origin: center bottom;
+    transform-origin: center bottom;
+  }
+}
+
+.zoomOutDown {
+  -webkit-animation-name: zoomOutDown;
+  animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(42px);
+    transform: scale(.475) translateX(42px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(-2000px);
+    transform: scale(.1) translateX(-2000px);
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+@keyframes zoomOutLeft {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(42px);
+    -ms-transform: scale(.475) translateX(42px);
+    transform: scale(.475) translateX(42px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(-2000px);
+    -ms-transform: scale(.1) translateX(-2000px);
+    transform: scale(.1) translateX(-2000px);
+    -webkit-transform-origin: left center;
+    -ms-transform-origin: left center;
+    transform-origin: left center;
+  }
+}
+
+.zoomOutLeft {
+  -webkit-animation-name: zoomOutLeft;
+  animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(-42px);
+    transform: scale(.475) translateX(-42px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(2000px);
+    transform: scale(.1) translateX(2000px);
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+@keyframes zoomOutRight {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateX(-42px);
+    -ms-transform: scale(.475) translateX(-42px);
+    transform: scale(.475) translateX(-42px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateX(2000px);
+    -ms-transform: scale(.1) translateX(2000px);
+    transform: scale(.1) translateX(2000px);
+    -webkit-transform-origin: right center;
+    -ms-transform-origin: right center;
+    transform-origin: right center;
+  }
+}
+
+.zoomOutRight {
+  -webkit-animation-name: zoomOutRight;
+  animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(60px);
+    transform: scale(.475) translateY(60px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(-2000px);
+    transform: scale(.1) translateY(-2000px);
+    -webkit-transform-origin: center top;
+    transform-origin: center top;
+  }
+}
+
+@keyframes zoomOutUp {
+  40% {
+    opacity: 1;
+    -webkit-transform: scale(.475) translateY(60px);
+    -ms-transform: scale(.475) translateY(60px);
+    transform: scale(.475) translateY(60px);
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.1) translateY(-2000px);
+    -ms-transform: scale(.1) translateY(-2000px);
+    transform: scale(.1) translateY(-2000px);
+    -webkit-transform-origin: center top;
+    -ms-transform-origin: center top;
+    transform-origin: center top;
+  }
+}
+
+.zoomOutUp {
+  -webkit-animation-name: zoomOutUp;
+  animation-name: zoomOutUp;
+}

文件差异内容过多而无法显示
+ 4 - 0
public/static/home/css/bootstrap.min.css


二进制
public/static/home/css/fancybox_loading.gif


二进制
public/static/home/css/fancybox_overlay.png


二进制
public/static/home/css/fancybox_sprite.png


文件差异内容过多而无法显示
+ 3 - 0
public/static/home/css/font-awesome.min.css


+ 274 - 0
public/static/home/css/jquery.fancybox.css

@@ -0,0 +1,274 @@
+/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
+.fancybox-wrap,
+.fancybox-skin,
+.fancybox-outer,
+.fancybox-inner,
+.fancybox-image,
+.fancybox-wrap iframe,
+.fancybox-wrap object,
+.fancybox-nav,
+.fancybox-nav span,
+.fancybox-tmp
+{
+	padding: 0;
+	margin: 0;
+	border: 0;
+	outline: none;
+	vertical-align: top;
+}
+
+.fancybox-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 8020;
+}
+
+.fancybox-skin {
+	position: relative;
+	background: #f9f9f9;
+	color: #444;
+	text-shadow: none;
+	-webkit-border-radius: 4px;
+	   -moz-border-radius: 4px;
+	        border-radius: 4px;
+}
+
+.fancybox-opened {
+	z-index: 8030;
+}
+
+.fancybox-opened .fancybox-skin {
+	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.fancybox-outer, .fancybox-inner {
+	position: relative;
+}
+
+.fancybox-inner {
+	overflow: hidden;
+}
+
+.fancybox-type-iframe .fancybox-inner {
+	-webkit-overflow-scrolling: touch;
+}
+
+.fancybox-error {
+	color: #444;
+	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+	margin: 0;
+	padding: 15px;
+	white-space: nowrap;
+}
+
+.fancybox-image, .fancybox-iframe {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.fancybox-image {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
+	background-image: url('fancybox_sprite.png');
+}
+
+#fancybox-loading {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	margin-top: -22px;
+	margin-left: -22px;
+	background-position: 0 -108px;
+	opacity: 0.8;
+	cursor: pointer;
+	z-index: 8060;
+}
+
+#fancybox-loading div {
+	width: 44px;
+	height: 44px;
+	background: url('fancybox_loading.gif') center center no-repeat;
+}
+
+.fancybox-close {
+	position: absolute;
+	top: -18px;
+	right: -18px;
+	width: 36px;
+	height: 36px;
+	cursor: pointer;
+	z-index: 8040;
+}
+
+.fancybox-nav {
+	position: absolute;
+	top: 0;
+	width: 40%;
+	height: 100%;
+	cursor: pointer;
+	text-decoration: none;
+	background: transparent url('blank.gif'); /* helps IE */
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	z-index: 8040;
+}
+
+.fancybox-prev {
+	left: 0;
+}
+
+.fancybox-next {
+	right: 0;
+}
+
+.fancybox-nav span {
+	position: absolute;
+	top: 50%;
+	width: 36px;
+	height: 34px;
+	margin-top: -18px;
+	cursor: pointer;
+	z-index: 8040;
+	visibility: hidden;
+}
+
+.fancybox-prev span {
+	left: 10px;
+	background-position: 0 -36px;
+}
+
+.fancybox-next span {
+	right: 10px;
+	background-position: 0 -72px;
+}
+
+.fancybox-nav:hover span {
+	visibility: visible;
+}
+
+.fancybox-tmp {
+	position: absolute;
+	top: -99999px;
+	left: -99999px;
+	visibility: hidden;
+	max-width: 99999px;
+	max-height: 99999px;
+	overflow: visible !important;
+}
+
+/* Overlay helper */
+
+.fancybox-lock {
+    overflow: hidden !important;
+    width: auto;
+}
+
+.fancybox-lock body {
+    overflow: hidden !important;
+}
+
+.fancybox-lock-test {
+    overflow-y: hidden !important;
+}
+
+.fancybox-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	display: none;
+	z-index: 8010;
+	background: url('fancybox_overlay.png');
+}
+
+.fancybox-overlay-fixed {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+}
+
+.fancybox-lock .fancybox-overlay {
+	overflow: auto;
+	overflow-y: scroll;
+}
+
+/* Title helper */
+
+.fancybox-title {
+	visibility: hidden;
+	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+	position: relative;
+	text-shadow: none;
+	z-index: 8050;
+}
+
+.fancybox-opened .fancybox-title {
+	visibility: visible;
+}
+
+.fancybox-title-float-wrap {
+	position: absolute;
+	bottom: 0;
+	right: 50%;
+	margin-bottom: -35px;
+	z-index: 8050;
+	text-align: center;
+}
+
+.fancybox-title-float-wrap .child {
+	display: inline-block;
+	margin-right: -100%;
+	padding: 2px 20px;
+	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
+	background: rgba(0, 0, 0, 0.8);
+	-webkit-border-radius: 15px;
+	   -moz-border-radius: 15px;
+	        border-radius: 15px;
+	text-shadow: 0 1px 2px #222;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 24px;
+	white-space: nowrap;
+}
+
+.fancybox-title-outside-wrap {
+	position: relative;
+	margin-top: 10px;
+	color: #fff;
+}
+
+.fancybox-title-inside-wrap {
+	padding-top: 10px;
+}
+
+.fancybox-title-over-wrap {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	color: #fff;
+	padding: 10px;
+	background: #000;
+	background: rgba(0, 0, 0, .8);
+}
+
+/*Retina graphics!*/
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+	   only screen and (min--moz-device-pixel-ratio: 1.5),
+	   only screen and (min-device-pixel-ratio: 1.5){
+
+	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
+		background-image: url('fancybox_sprite@2x.png');
+		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
+	}
+
+	#fancybox-loading div {
+		background-image: url('fancybox_loading@2x.gif');
+		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
+	}
+}

+ 1140 - 0
public/static/home/css/main.css

@@ -0,0 +1,1140 @@
+
+/* ========================================================================= */
+/*  
+/*  
+/******************************* Main Style Sheet ****************************/
+/*  
+/*  
+/* ========================================================================= */
+
+body {
+    background-color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    line-height: 1.9;
+	font-size: 14px;
+    color: #777;
+}
+
+ol, ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+figure, p {
+    margin: 0;
+}
+
+a {
+    -webkit-transition: all .3s ease-in 0s;
+            transition: all .3s ease-in 0s;
+}
+
+iframe {
+    border: 0;
+}
+
+a, a:focus, a:hover {
+    text-decoration: none;
+    outline: 0;
+}
+
+a:focus, a:hover {
+    color: inherit;
+}
+
+h1, h2, h3,
+h4, h5, h6 {
+    font-family: 'Open Sans', sans-serif;
+	font-weight: normal;
+	margin: 0;
+}
+
+.clear:before,
+.clear:after {
+    content: " ";
+    display: table;
+}
+ 
+.clear:after {
+   clear: both;
+}
+ 
+.clear {
+   *zoom: 1;
+}
+
+body > section {
+    padding: 100px 0;
+}
+
+.section-title {
+  margin: 0 auto 85px;
+  width: 700px;
+}
+
+.section-title h2 {
+    color: #333;
+    font-family: "Baloo Thambi",cursive;
+    font-size: 40px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    margin-bottom: 45px;
+    padding-bottom: 20px;
+    position: relative;
+    text-transform: uppercase;
+}
+
+.section-title h2::before,
+.section-title h2:after {
+  border-bottom: 1px solid #1f2021;
+  bottom: 0;
+  content: "";
+  left: 50%;
+  margin-left: -50px;
+  position: absolute;
+  width: 100px;
+}
+
+.section-title h2::after {
+    border-bottom: 1px solid #1f2021;
+    bottom: -7px;
+    margin-left: -37.5px;
+    width: 75px;
+}
+
+.section-title p {
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 1.9;
+}
+
+.btn {
+    border-radius: 0;
+}
+
+.btn:hover,
+.btn:focus {
+    outline: 0;
+}
+.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
+.btn-blue {
+    background-color: #E7EF4A;
+    color: #333;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 10px 35px;
+    text-transform: uppercase;
+}
+
+.kill-margin {
+    margin: 0 !important;
+}
+
+.p-0 {
+    padding: 0 !important;
+}
+
+#home{
+    display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-webkit-box-align: center;
+	-webkit-align-items: center;
+	/*-ms-flex-align: center;*/
+}
+
+/*************************
+*******Navigation******
+**************************/
+
+#navigation,
+.navbar-brand,
+.navbar-toggle,
+.navbar-nav > li > a,
+.search-form > #search-sub {
+  -webkit-transition: all 0.6s ease;
+          transition: all 0.6s ease;
+}
+
+.animated-nav .navigation .navbar-nav > li > a {
+  padding: 23px 25px;
+}
+
+.animated-nav#navigation > .container {
+  border-bottom: none;
+}
+
+.navbar-brand {
+  height: inherit;
+  padding: 30px 0;
+}
+
+.navbar-brand .site-logo{
+    font-size: 30px;
+    color: #fff; 
+    text-transform: uppercase;
+    font-weight: 900; 
+}
+
+.site-logo span{
+    font-size: 55px; 
+    color: #E7EF4A;
+    font-weight: 900;
+}
+
+.animated-nav .site-logo span{
+    color: #333;
+}
+
+.navbar-brand a {
+  display: block;
+}
+
+.navigation .navbar-nav > li > a {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 38px 25px;
+  text-transform: uppercase;
+}
+
+.navigation .navbar-nav > li.current > a {
+    color: #E7EF4A;
+    position: relative;
+}
+
+.animated-nav .navigation .navbar-nav > li.current > a::before, 
+.animated-nav .navigation .navbar-nav > li.current > a::after {
+    top: 50px;
+}
+
+.navigation .navbar-nav > li.current > a::before, 
+.navigation .navbar-nav > li.current > a::after {
+    background-color: #fff;
+    content: "";
+    height: 5px;
+    position: absolute;
+    top: 65px;
+    border-radius: 50%;
+    width: 5px;
+}
+
+.navigation .navbar-nav > li.current > a::before {
+    left: 50%;
+}
+
+.navigation .navbar-nav > li.current > a::after {
+    right: 50%;
+}
+
+.animated-nav .navigation .navbar-nav > li.current > a {
+    color: #fff;
+}
+
+.navigation .navbar-nav > li > a:focus,
+.navigation .navbar-nav > li > a:hover {
+  background-color: transparent;
+}
+
+.search-form {
+  position: relative;
+}
+
+.search-form > #search {
+  width: 100%;
+}
+
+.search-form > #search {
+  background-color: transparent;
+  height: 40px;
+    border: 0 ;
+  margin-top: 28px;
+  width: 100%;
+}
+
+.search-form > #search-sub {
+  background: url("../img/icons/search.png") no-repeat scroll 0 0 transparent;
+  border: 0 ;
+  bottom: 11px;
+  height: 15px;
+  position: absolute;
+  right: 8px;
+  padding: 0;
+  text-indent: -9999em;
+  width: 15px;
+}
+
+.animated-nav .search-form > #search-sub {
+    bottom: 22px;
+}
+
+/*************************
+*******Main Slider******
+**************************/
+#home {
+    background: url('../img/bg/bg1.jpg') fixed no-repeat left top / cover;
+    background-color: #121116;
+}
+
+#home{
+    color: #fff;
+    padding: 0;
+    text-align: center;
+    overflow: hidden;
+    background-color: #E7EF4A;
+    min-height: 800px;
+}
+
+.home-intro {
+    max-width: 850px;
+    margin: 0 auto; 
+    padding: 70px 0;
+}
+
+.home-intro h2 {
+    font-size: 55px;
+    font-weight: 100;
+    line-height: 1.4;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    font-family: 'Baloo Thambi', cursive;
+}
+
+.home-intro p{
+    font-size: 18px;
+    font-weight: 100;
+}
+    
+.home-intro .available{
+    margin-top: 50px;
+    display: inline-block;
+    border: 2px solid #fff;
+    padding: 17px 30px;
+}
+
+.home-intro .available li span{
+    font-size: 14px; 
+    letter-spacing: 1px;
+    font-family: 'Slabo 27px', serif;
+    text-transform: uppercase;
+}
+
+.home-intro .available li i {
+    font-size: 20px;
+    padding: 0 5px;
+}
+
+/*============================================================
+    Services
+============================================================*/
+#service{
+    padding-bottom: 40px;
+}
+
+#service .media > .pull-left{
+    margin-right: 20px;
+}
+
+#service .media .media-body h3 {
+    color: #555;
+    font-family: 'Slabo 27px', serif;
+    font-size: 25px;
+    font-weight: 600;
+    margin-bottom: 20px;
+}
+
+#service .media .media-body p{
+    max-width: 265px;
+}
+
+#service .media{
+    padding-bottom: 10px;
+}
+
+.service-item {
+    margin-bottom: 70px;
+}
+
+.service-icon {
+  float: left;
+  margin-top: 8px;
+}
+
+.service-desc {
+    margin-left: 115px;
+}
+
+.service-item h3 {
+  color: #E7EF4A;
+  font-size: 20px;
+  margin-bottom: 28px;
+}
+
+.service-item p {
+  line-height: 24px;
+}
+
+
+.fact-icon {
+  position: relative;
+  width: 50px; 
+  height: 28.87px;
+  background-color: #E7EF4A;
+  margin: 14.43px auto;
+}
+
+.fact-icon:before,
+.fact-icon:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  left: 0;
+  border-left: 25px solid transparent;
+  border-right: 25px solid transparent;
+}
+
+.fact-icon:before {
+  bottom: 100%;
+  border-bottom: 14.43px solid #E7EF4A;
+}
+
+.fact-icon:after {
+  top: 100%;
+  width: 0;
+  border-top: 14.43px solid #E7EF4A;
+}
+
+.fact-icon > i {
+    color: #555;
+}
+
+/*============================================================
+    Service Bottom
+============================================================*/
+
+#service-bottom {
+    background: url('../img/bg/bg2.jpg') scroll no-repeat left top / cover;
+    background-color: #121116;
+}
+
+#service-bottom {
+    background-color: #1f2021;
+    padding-bottom: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.mobile-device {
+  position: relative;
+}
+
+.mobile-device img {
+  float: left;
+  position: relative;
+}
+
+.mobile-device .black {
+  left: 98px;
+  z-index: 2;
+}
+
+.mobile-device .white {
+  bottom: -62px;
+  z-index: 1;
+}
+
+.service-features {
+    background-color: rgba(231, 239, 74, 0.8);
+    bottom: 0;
+    color: #fff;
+    padding: 70px 0 50px 65px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 45%;
+}
+
+.service-features h3 {
+    color: #333;
+    font-size:30px;
+    font-weight: 600;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+    font-family: 'Baloo Thambi', cursive;
+}
+
+.service-features p {
+    max-width: 420px; 
+    font-size: 18px;
+    margin-bottom: 20px; 
+    color: #333;
+    font-family: 'Slabo 27px', serif;
+}
+
+.service-features ul li i {
+    font-size: 22px;
+    padding-right: 15px;
+}
+
+.service-features ul li {
+    color: #333;
+    font-size: 16px;
+    line-height: 36px;
+}
+
+/*============================================================
+    Portfolio
+============================================================*/
+
+#portfolio{
+    padding-bottom: 0;
+}
+
+#projects {
+    width: 100%;
+}
+
+.project-filter {
+  margin-bottom: 40px;
+}
+
+.project-filter ul li {
+  padding: 0;
+}
+
+.project-filter ul li a {
+    color: #777;
+    display: block;
+    font-family: "Slabo 27px",serif;
+    font-weight: 600;
+    letter-spacing: 1px;
+    line-height: 18px;
+    padding: 10px 12px;
+    position: relative;
+}
+
+.project-filter ul li a::before {
+    background-color: #999;
+    border-radius: 50%;
+    content: "";
+    height: 6px;
+    left: -6px;
+    position: absolute;
+    top: 16px;
+    width: 6px;
+}
+
+.project-filter ul li a.active:before {
+    background-color: #E7EF4A;
+    border-radius: 50%;
+    content: "";
+    height: 6px;
+    left: -6px;
+    position: absolute;
+    top: 16px;
+    width: 6px;
+}
+
+.project-filter ul li a:hover,
+.project-filter ul li a.active {
+    color: #E7EF4A;
+}
+
+.mix {
+    display: none;
+}
+
+.portfolio-item {
+    position: relative;
+    float: left;
+    overflow: hidden;
+    width: 25%;
+}
+
+.plus {
+    cursor: pointer;
+    background: rgba(231, 239, 74, 0.8) url("../img/overlay/plus.png") no-repeat scroll center center;
+    display: inline-block;
+    height: 100%;
+    position: absolute;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    -webkit-transition: all 0.3s ease-out 0s;
+    transition: all 0.3s ease-out 0s;
+    width: 100%;
+    top: 0;
+}
+
+.portfolio-item:hover .plus {
+     -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+}
+
+.portfolio-item img{ 
+    width: 100%;
+    -webkit-transform: scale(1.15);
+    transform: scale(1.15);
+    -webkit-transition: all 0.3s ease-out 0s;
+    transition: all 0.3s ease-out 0s;
+}
+
+.portfolio-item:hover img{ 
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+
+/*============================================================
+    About Us
+============================================================*/
+
+#about {
+    padding-bottom: 0;
+}
+
+#about .section-title p{
+    margin-bottom: 30px;
+}
+
+.about-us img {
+  margin: 0 auto;
+}
+
+/* Counter section */
+
+#count {
+    background: url('../img/bg/bg3.jpg') scroll no-repeat center bottom / cover;
+    background-color: #121116;
+    padding-bottom: 90px;
+}
+
+.fact-item {
+    background-color: rgba(231, 239, 74, 0.5);
+    border-bottom-right-radius: 30px;
+    border-top-left-radius: 30px;
+    color: #fff;
+    margin: 15px auto;
+    max-width: 260px;
+    padding: 30px 0;
+}
+
+.count-icon i{
+    color: #333;
+    font-size: 20px;
+    width: 50px;
+    height: 50px;
+    background-color: rgba(255, 255, 255, 0.5);
+    padding-top: 14px;
+    border-radius: 50%;
+}
+
+.count-icon{
+    border-bottom: 2px solid #fff; 
+    padding-bottom: 25px;
+    display: inline-block;
+}
+
+.fact-item span {
+    display: block;
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 25px 0 9px;
+    font-family: "Baloo Thambi",cursive;
+}
+
+.fact-item p {
+  font-weight: 600;
+}
+
+
+/*============================================================
+    About Us
+============================================================*/
+
+.subtitle h3 {
+    color: #555;
+    font-family: 'Baloo Thambi', cursive;
+    font-size: 30px;
+    font-weight: 600;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+}
+
+.subtitle p {
+  line-height: 25px;
+  margin-bottom: 65px;
+}
+
+.tst-single {
+  margin-bottom: 40px;
+    border-bottom: 1px solid #eee;
+}
+
+.tst-single img {
+    border: 1px solid #eee;
+    float: left;
+    max-width: 78px;
+    padding: 6px;
+}
+
+.tst-content {
+    margin: 0 0 0 115px;
+    padding-bottom: 25px;
+}
+
+.tst-content p {
+    max-width: 340px;
+}
+
+.tst-content span {
+    display: block;
+    font-weight: 600;
+    margin-top: 12px;
+}
+
+/* carousel navigation */
+
+.owl-pagination {
+    
+}
+
+.owl-controls .owl-page {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.owl-controls .owl-page span {
+  background-color: #fff;
+  border: 1px solid #ACACAC;
+  display: block;
+  height: 12px;
+  margin: 5px 4px;
+  width: 12px;
+}
+
+.owl-controls .owl-page.active span,
+.owl-controls .owl-page:hover span {
+  background-color: #E7EF4A;
+  border-color: #E7EF4A;
+}
+
+
+/* progress bars */
+
+.progress-bars > span {
+    color: #1f2021;
+    font-weight: 700;
+    line-height: 1;
+    text-transform: uppercase;
+    font-size: 15px;
+    margin-bottom: 15px;
+    display: block;
+}
+
+.progress {
+    background-color: #eee;
+    border-radius: 30px;
+    box-shadow: none;
+    height: 15px;
+    margin-bottom: 35px;
+    overflow: visible;
+}
+
+.progress .bar {
+    width: 0;
+    height: 15px;
+    border-top-left-radius: 30px;
+    border-bottom-left-radius: 30px;
+    background-color: #E7EF4A;
+    position: relative;
+    -webkit-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+}
+
+
+.progress .bar small {
+    background-color: #777;
+    color: #fafafa;
+    float: right;
+    font-size: 12px;
+    margin-top: -40px;
+    overflow: visible;
+    padding: 0 10px;
+    position: relative;
+    right: -22.5px;
+    text-align: center;
+    width: 45px;
+    z-index: 1000;
+}
+
+.progress .bar small::after {
+    background-color: #777;
+    bottom: -5px;
+    content: "";
+    height: 10px;
+    left: 50%;
+    margin-left: -5px;
+    position: absolute;
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    width: 10px;
+}
+
+.progress.active .bar {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
+
+.progress-success .bar, 
+.progress-green .bar {
+  background-color: #E7EF4A;
+
+}
+
+/*=================================
+    Quotes
+===================================*/
+
+#quotes {
+    background-color: #1F2021;
+}
+
+.call-to-action {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 100;
+}
+
+.call-to-action p {
+    font-family: "Slabo 27px",serif;
+    font-size: 36px;
+    line-height: 1.4;
+    margin-bottom: 35px;
+}
+
+.twitter i{
+    font-size: 60px; 
+    margin-bottom: 30px;
+    border-bottom: 3px solid #fff;
+    padding-bottom: 20px;
+}
+
+/*============================================================
+    Pricing
+============================================================*/
+
+#pricing{
+    background-color: #E7EF4A;
+}
+
+#pricing .section-title p {
+    color: #333;
+    font-weight: 400;
+}
+
+.pricing-table {
+    margin: 20px 0;
+    background-color: #e7ef4a;
+    color: #1f2021;
+    font-size: 16px;
+    line-height: 24px;
+    border: 2px solid #555;
+}
+
+.highlight{
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+    border-width: 3px
+}
+
+.pricing-table .price {
+    padding: 10px 0 35px;
+}
+
+.pricing-table .plan-icon {
+    padding-top: 30px;
+}
+
+.pricing-table .plan-icon i{ 
+    font-size: 28px;
+}  
+    
+.pricing-table .plan-title {
+    padding: 30px 0;
+}
+
+.pricing-table .plan {
+    font-size: 27px;
+    font-weight: 700;
+}
+
+.pricing-table .value {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.pricing-table .value > small {
+    font-size: 28px;
+    font-weight: 100;
+    margin-right: 10px;
+    position: relative;
+    top: -20px;
+    font-family: 'Baloo Thambi', cursive;
+}
+
+.pricing-table .value > strong {
+    font-size: 60px;
+    margin-right: 10px;
+    line-height: 69.22px;
+    font-family: 'Baloo Thambi', cursive;
+}
+
+.pricing-table ul li {
+    margin: 0;
+    font-size: 14px;
+    padding-bottom: 10px;
+    position: relative;
+}
+
+.pricing-table ul li:last-child:after {
+  border-bottom: none;
+}
+
+.pricing-table ul li:last-child {
+  margin-bottom: 0;
+}
+
+.btn-price {
+    background-color: #333;
+    border-radius: 30px;
+    color: #fff;
+    margin: 30px 0;
+    padding: 13px 60px;
+    text-transform: uppercase;
+    font-size: 12px;
+}
+
+.btn-price:hover {
+    color: #fff;
+}
+
+.special-plan {
+    margin-top: 100px;
+}
+
+.special-plan p {
+    font-family: 'Slabo 27px', serif;
+    font-size: 20px;
+    margin-bottom: 35px;
+    color: #1f2021;
+}
+
+.special-plan .btn-blue{
+    background-color: #F94C43;
+    color: #fff;
+}
+
+
+/*============================================================
+    subscribe
+============================================================*/
+
+#subscribe {
+    background-color: #1f2021;
+    color: #fff;
+    line-height: 24px;
+    max-height: 250px;
+}
+
+.subscribe-man{
+    position: relative;
+    height: 150px; 
+}
+
+.subscribe-man img{
+    position: absolute;
+    bottom: 0;
+}
+
+.subscription-form {
+  color: #fff;
+  position: relative;
+}
+
+.subscription-form i {
+  left: 21px;
+  position: absolute;
+  top: 22px;
+}
+
+.subscription-form .subscribe {
+  background-color: transparent;
+  border: 1px solid #E7EF4A;
+  color: #fff;
+  height: 58px;
+  text-indent: 60px;
+  width: 100%;
+}
+
+.subscription-form #mail-submit {
+    background-color: #e7ef4a;
+    border: 0 none;
+    color: #333;
+    font-weight: 600;
+    padding: 16px 35px;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+}
+
+/*============================================================
+    Contact Us
+============================================================*/
+
+.contact-form .input-field {
+  margin-bottom: 30px;
+}
+
+.contact-form .form-control {
+  border: 1px solid #E7EF4A;
+  padding: 20px;
+  border-radius: 0;
+  height: 55px;
+  box-shadow: none;
+}
+
+.contact-form .message .form-control {
+  height: 198px;
+}
+
+.contact-form .form-control::-moz-placeholder {
+  color: #999;
+}
+
+.contact-form #msg-submit {
+  font-size: 13px;
+  padding: 17px 50px;
+}
+
+.contact-details {
+  margin-bottom: 90px;
+}
+
+.contact-details > span {
+  color: #1f2021;
+  margin-bottom: 35px;
+}
+
+
+
+/*============================================================
+    Footer
+============================================================*/
+
+#footer {
+    background-color: #121116;
+    padding: 115px 0 35px;
+}
+
+.footer-logo {
+    margin-bottom: 45px;
+}
+
+.footer-social {
+    margin-bottom: 75px;
+}
+
+.footer-social h3 {
+    color: #fff;
+    font-size: 28px;
+    font-weight: 800;
+    margin-bottom: 45px;
+    padding-bottom: 18px;
+    position: relative;
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+.footer-social h3 span {
+    color: #e7ef4a;
+    display: inline-block;
+    float: left;
+    font-size: 55px;
+    font-weight: 900;
+    margin-top: -15px;
+}
+
+.footer-social h3::before,
+.footer-social h3::after {
+    border-bottom: 1px solid #fff;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 50%;
+    margin-left: -75px;
+    position: absolute;
+    width: 150px;
+}
+
+.footer-social h3::before {
+    bottom: -10px;
+    margin-left: -55px;
+    width: 110px;
+}
+
+.footer-social .fact-icon:before {
+    border-bottom: 14.43px solid #fff;
+}
+
+.footer-social .fact-icon{
+    cursor: pointer;
+}
+
+.footer-social .fact-icon:after {
+    border-top: 14.43px solid #fff;
+}
+
+.footer-social .fact-icon > i {
+    color: #fff;
+    cursor: pointer;
+}
+
+.footer-social .fact-icon{
+    background-color: #fff;
+}
+
+.footer-social .fact-icon i{
+    color: #333;
+}
+
+.copyright {
+    color: #ddd;
+    font-size: 13px;
+    text-transform: capitalize;
+}
+
+.copyright a {
+    color: #ddd;
+    text-decoration: underline;
+}
+
+.copyright a:hover {
+    color: #fff;
+}
+
+.copyright p {
+
+}
+
+.copyright p:first-child {
+    margin-bottom: 15px;
+}

+ 231 - 0
public/static/home/css/owl.carousel.css

@@ -0,0 +1,231 @@
+/* 
+ * 	Core Owl Carousel CSS File
+ *	v1.24
+ */
+
+/* clearfix */
+.owl-carousel .owl-wrapper:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
+}
+/* display none until init */
+.owl-carousel{
+	display: none;
+	position: relative;
+	width: 100%;
+	-ms-touch-action: pan-y;
+}
+.owl-carousel .owl-wrapper{
+	display: none;
+	position: relative;
+	-webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-wrapper-outer{
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+.owl-carousel .owl-wrapper-outer.autoHeight{
+	-webkit-transition: height 500ms ease-in-out;
+	-moz-transition: height 500ms ease-in-out;
+	-ms-transition: height 500ms ease-in-out;
+	-o-transition: height 500ms ease-in-out;
+	transition: height 500ms ease-in-out;
+}
+	
+.owl-carousel .owl-item{
+	float: left;
+}
+.owl-controls .owl-page,
+.owl-controls .owl-buttons div{
+	cursor: pointer;
+}
+.owl-controls {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* mouse grab icon */
+.grabbing { 
+    cursor:url(grabbing.png) 8 8, move;
+}
+
+/* fix */
+.owl-carousel  .owl-wrapper,
+.owl-carousel  .owl-item{
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility:    hidden;
+	-ms-backface-visibility:     hidden;
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+}
+
+/* CSS3 Transitions */
+
+.owl-origin {
+	-webkit-perspective: 1200px;
+	-webkit-perspective-origin-x : 50%;
+	-webkit-perspective-origin-y : 50%;
+	-moz-perspective : 1200px;
+	-moz-perspective-origin-x : 50%;
+	-moz-perspective-origin-y : 50%;
+	perspective : 1200px;
+}
+/* fade */
+.owl-fade-out {
+  z-index: 10;
+  -webkit-animation: fadeOut .7s both ease;
+  -moz-animation: fadeOut .7s both ease;
+  animation: fadeOut .7s both ease;
+}
+.owl-fade-in {
+  -webkit-animation: fadeIn .7s both ease;
+  -moz-animation: fadeIn .7s both ease;
+  animation: fadeIn .7s both ease;
+}
+/* backSlide */
+.owl-backSlide-out {
+  -webkit-animation: backSlideOut 1s both ease;
+  -moz-animation: backSlideOut 1s both ease;
+  animation: backSlideOut 1s both ease;
+}
+.owl-backSlide-in {
+  -webkit-animation: backSlideIn 1s both ease;
+  -moz-animation: backSlideIn 1s both ease;
+  animation: backSlideIn 1s both ease;
+}
+/* goDown */
+.owl-goDown-out {
+  -webkit-animation: scaleToFade .7s ease both;
+  -moz-animation: scaleToFade .7s ease both;
+  animation: scaleToFade .7s ease both;
+}
+.owl-goDown-in {
+  -webkit-animation: goDown .6s ease both;
+  -moz-animation: goDown .6s ease both;
+  animation: goDown .6s ease both;
+}
+/* scaleUp */
+.owl-fadeUp-in {
+  -webkit-animation: scaleUpFrom .5s ease both;
+  -moz-animation: scaleUpFrom .5s ease both;
+  animation: scaleUpFrom .5s ease both;
+}
+
+.owl-fadeUp-out {
+  -webkit-animation: scaleUpTo .5s ease both;
+  -moz-animation: scaleUpTo .5s ease both;
+  animation: scaleUpTo .5s ease both;
+}
+/* Keyframes */
+/*empty*/
+@-webkit-keyframes empty {
+  0% {opacity: 1}
+}
+@-moz-keyframes empty {
+  0% {opacity: 1}
+}
+@keyframes empty {
+  0% {opacity: 1}
+}
+@-webkit-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+@-moz-keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+@keyframes fadeIn {
+  0% { opacity:0; }
+  100% { opacity:1; }
+}
+@-webkit-keyframes fadeOut {
+  0% { opacity:1; }
+  100% { opacity:0; }
+}
+@-moz-keyframes fadeOut {
+  0% { opacity:1; }
+  100% { opacity:0; }
+}
+@keyframes fadeOut {
+  0% { opacity:1; }
+  100% { opacity:0; }
+}
+@-webkit-keyframes backSlideOut {
+  25% { opacity: .5; -webkit-transform: translateZ(-500px); }
+  75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
+  100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
+}
+@-moz-keyframes backSlideOut {
+  25% { opacity: .5; -moz-transform: translateZ(-500px); }
+  75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
+  100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
+}
+@keyframes backSlideOut {
+  25% { opacity: .5; transform: translateZ(-500px); }
+  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
+  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
+}
+@-webkit-keyframes backSlideIn {
+  0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
+  75% { opacity: .5; -webkit-transform: translateZ(-500px); }
+  100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
+}
+@-moz-keyframes backSlideIn {
+  0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
+  75% { opacity: .5; -moz-transform: translateZ(-500px); }
+  100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
+}
+@keyframes backSlideIn {
+  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
+  75% { opacity: .5; transform: translateZ(-500px); }
+  100% { opacity: 1; transform: translateZ(0) translateX(0); }
+}
+@-webkit-keyframes scaleToFade {
+  to { opacity: 0; -webkit-transform: scale(.8); }
+}
+@-moz-keyframes scaleToFade {
+  to { opacity: 0; -moz-transform: scale(.8); }
+}
+@keyframes scaleToFade {
+  to { opacity: 0; transform: scale(.8); }
+}
+@-webkit-keyframes goDown {
+  from { -webkit-transform: translateY(-100%); }
+}
+@-moz-keyframes goDown {
+  from { -moz-transform: translateY(-100%); }
+}
+@keyframes goDown {
+  from { transform: translateY(-100%); }
+}
+
+@-webkit-keyframes scaleUpFrom {
+  from { opacity: 0; -webkit-transform: scale(1.5); }
+}
+@-moz-keyframes scaleUpFrom {
+  from { opacity: 0; -moz-transform: scale(1.5); }
+}
+@keyframes scaleUpFrom {
+  from { opacity: 0; transform: scale(1.5); }
+}
+
+@-webkit-keyframes scaleUpTo {
+  to { opacity: 0; -webkit-transform: scale(1.5); }
+}
+@-moz-keyframes scaleUpTo {
+  to { opacity: 0; -moz-transform: scale(1.5); }
+}
+@keyframes scaleUpTo {
+  to { opacity: 0; transform: scale(1.5); }
+}

+ 261 - 0
public/static/home/css/responsive.css

@@ -0,0 +1,261 @@
+
+/*    Default Layout: 992px. 
+    Gutters: 24px.
+    Outer margins: 48px.
+    Leftover space for scrollbars @1024px: 32px.
+-------------------------------------------------------------------------------
+cols    1     2      3      4      5      6      7      8      9      10
+px      68    160    252    344    436    528    620    712    804    896    */
+
+@media (max-width: 767px) {
+
+
+
+}
+
+
+
+/*    Tablet Layout: 768px.
+    Gutters: 24px.
+    Outer margins: 28px.
+    Inherits styles from: Default Layout.
+-----------------------------------------------------------------
+cols    1     2      3      4      5      6      7      8
+px      68    160    252    344    436    528    620    712    */
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+
+
+.navigation .navbar-nav > li > a{
+  padding: 38px 20px;
+}
+
+.animated-nav .navigation .navbar-nav > li > a{
+  padding: 30px 20px;
+}
+
+#service .media{
+  padding-left: 0;
+}
+
+.mobile-device .black{
+  left: 0px;
+}
+
+.mobile-device .white{
+  left: -98px;
+}
+
+figcaption.mask{
+  padding: 10px;
+}
+
+figcaption.mask h3{
+  font-size: 15px;
+}
+
+figcaption.mask span{
+  font-size: 12px;
+}   
+
+.fact-item{
+  padding-bottom: 30px;
+}
+
+.subtitle{
+  padding-top: 50px;
+}
+
+.pricing-table{
+  padding-bottom: 50px;
+}
+
+.subscription-form #mail-submit {
+    padding: 16px 20px;
+}   
+
+
+  
+ 
+}
+
+
+
+/*    Mobile Layout: 320px.
+    Gutters: 24px.
+    Outer margins: 34px.
+    Inherits styles from: Default Layout.
+---------------------------------------------
+cols    1     2      3
+px      68    160    252    */
+
+@media only screen and (max-width: 767px) {
+
+
+
+.navbar-toggle {
+  border: 1px solid rgba(231, 239, 74, 0.8);
+  margin-top: 37px;
+}
+
+.navbar-toggle .icon-bar {
+  background-color: rgba(231, 239, 74, 0.8);
+}
+
+.animated-nav .navbar-toggle {
+  border: 1px solid #fff;
+  margin-top: 21px;
+}
+
+.animated-nav .navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+
+.animated-nav .navigation .navbar-nav > li > a,
+.navigation .navbar-nav > li > a {
+  padding: 15px 25px;
+}
+
+.navigation .navbar-nav > li > a {
+  background-color: #E7EF4A;
+}
+
+.navigation .navbar-nav > li > a:hover {
+  background-color: #E7EF4A;
+}
+
+.navigation .navbar-nav > li.current > a {
+  border-bottom: 1px solid #fff;
+  color: #fff;
+}
+
+.navbar-brand {
+  padding: 30px 0 30px 15px;
+}    
+    
+#home-carousel .carousel-inner h2{
+    font-size: 20px;
+    line-height: 31px;
+}
+
+.section-title{
+  width: 100%;
+}
+
+#service .media{
+  padding-left: 0px;
+}
+
+#service .media > .pull-left{
+  margin-right: 15px;
+}
+
+.mobile-device img{
+  float: none;
+}
+
+.mobile-device .black{
+  left: 0;
+}
+
+.mobile-device .white{
+  bottom: 336px;
+  left: 83px;
+}
+
+#service-bottom{
+  padding-bottom: 100%;
+}
+
+.service-features{
+  padding: 40px 0 0 20px;
+  width: 100%;
+  top: 60%;
+}
+
+.service-features h3{
+  margin-bottom: 10px;
+}
+
+.portfolio-item{
+    width: 50%;
+}
+
+.tst-content{
+  margin: 10px 0 0 125px;
+}
+
+.subtitle{
+  padding-top: 50px;
+}
+
+.subscription-form #mail-submit {
+    padding: 16px 20px;
+}    
+
+#subscribe {
+    max-height: none;
+    min-height: 250px;
+}
+    
+.subscribe-man img {
+  left: 50%;
+  margin-left: -150px;
+  max-width: 300px;
+}    
+    
+.call-to-action span{
+    font-size: 14px;
+    font-weight: 400;
+}
+    
+.call-to-action p{
+  font-size: 16px;
+}
+
+.contact-details{
+  margin-bottom: 0px;
+}
+
+.contact-details > span{
+  padding-top: 100px;
+}
+
+
+
+
+
+
+}
+
+
+
+/*    Wide Mobile Layout: 480px.
+    Gutters: 24px.
+    Outer margins: 22px.
+    Inherits styles from: Default Layout, Mobile Layout.
+------------------------------------------------------------
+cols    1     2      3      4      5
+px      68    160    252    344    436    */
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+
+.portfolio-item{
+    width: 50%;
+}
+
+}
+
+
+/*  Retina media query.
+  Overrides styles for devices with a 
+  device-pixel-ratio of 2+, such as iPhone 4.
+-----------------------------------------------    */
+
+@media 
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-device-pixel-ratio: 2) {
+  
+  
+  
+}

二进制
public/static/home/font/FontAwesome.otf


二进制
public/static/home/font/fontawesome-webfont.eot


文件差异内容过多而无法显示
+ 196 - 0
public/static/home/font/fontawesome-webfont.svg


二进制
public/static/home/font/fontawesome-webfont.ttf


二进制
public/static/home/font/fontawesome-webfont.woff


二进制
public/static/home/img/about.png


二进制
public/static/home/img/bg/bg1 - 副本.jpg


二进制
public/static/home/img/bg/bg1.jpg


二进制
public/static/home/img/bg/bg2.jpg


二进制
public/static/home/img/bg/bg3.jpg


二进制
public/static/home/img/client/1.jpg


二进制
public/static/home/img/client/2.jpg


二进制
public/static/home/img/client/3.jpg


二进制
public/static/home/img/iphone/iphone-black.png


二进制
public/static/home/img/iphone/iphone-white.png


二进制
public/static/home/img/logo - 副本.png


二进制
public/static/home/img/overlay/plus.png


二进制
public/static/home/img/portfolio/portfolio-1.jpg


二进制
public/static/home/img/portfolio/portfolio-2.jpg


二进制
public/static/home/img/portfolio/portfolio-3.jpg


二进制
public/static/home/img/portfolio/portfolio-4.jpg


二进制
public/static/home/img/young-men.png


文件差异内容过多而无法显示
+ 5 - 0
public/static/home/js/bootstrap.min.js


+ 85 - 0
public/static/home/js/jquery-countTo.js

@@ -0,0 +1,85 @@
+/*
+Plugin Name: 	Count To
+Written by: 	Matt Huggins - https://github.com/mhuggins/jquery-countTo
+*/
+
+(function ($) {
+	$.fn.countTo = function (options) {
+		options = options || {};
+
+		return $(this).each(function () {
+			// set options for current element
+			var settings = $.extend({}, $.fn.countTo.defaults, {
+				from:            $(this).data('from'),
+				to:              $(this).data('to'),
+				speed:           $(this).data('speed'),
+				refreshInterval: $(this).data('refresh-interval'),
+				decimals:        $(this).data('decimals')
+			}, options);
+
+			// how many times to update the value, and how much to increment the value on each update
+			var loops = Math.ceil(settings.speed / settings.refreshInterval),
+				increment = (settings.to - settings.from) / loops;
+
+			// references & variables that will change with each update
+			var self = this,
+				$self = $(this),
+				loopCount = 0,
+				value = settings.from,
+				data = $self.data('countTo') || {};
+
+			$self.data('countTo', data);
+
+			// if an existing interval can be found, clear it first
+			if (data.interval) {
+				clearInterval(data.interval);
+			}
+			data.interval = setInterval(updateTimer, settings.refreshInterval);
+
+			// initialize the element with the starting value
+			render(value);
+
+			function updateTimer() {
+				value += increment;
+				loopCount++;
+
+				render(value);
+
+				if (typeof(settings.onUpdate) == 'function') {
+					settings.onUpdate.call(self, value);
+				}
+
+				if (loopCount >= loops) {
+					// remove the interval
+					$self.removeData('countTo');
+					clearInterval(data.interval);
+					value = settings.to;
+
+					if (typeof(settings.onComplete) == 'function') {
+						settings.onComplete.call(self, value);
+					}
+				}
+			}
+
+			function render(value) {
+				var formattedValue = settings.formatter.call(self, value, settings);
+				$self.text(formattedValue);
+			}
+		});
+	};
+
+	$.fn.countTo.defaults = {
+		from: 0,               // the number the element should start at
+		to: 0,                 // 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
+		formatter: formatter,  // handler for formatting the value before rendering
+		onUpdate: null,        // callback method for every time the element is updated
+		onComplete: null       // callback method for when the element finishes updating
+	};
+
+	function formatter(value, settings) {
+		return value.toFixed(settings.decimals);
+	}
+}(jQuery));

+ 150 - 0
public/static/home/js/jquery.appear.js

@@ -0,0 +1,150 @@
+/*
+ * jQuery.appear
+ * https://github.com/bas2k/jquery.appear/
+ * http://code.google.com/p/jquery-appear/
+ *
+ * Copyright (c) 2009 Michael Hixson
+ * Copyright (c) 2012 Alexander Brovikov
+ * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
+ */
+(function($) {
+	$.fn.appear = function(fn, options) {
+
+		var settings = $.extend({
+
+			//arbitrary data to pass to fn
+			data: undefined,
+
+			//call fn only on the first appear?
+			one: true,
+
+			// X & Y accuracy
+			accX: 0,
+			accY: 0
+
+		}, options);
+
+		return this.each(function() {
+
+			var t = $(this);
+
+			//whether the element is currently visible
+			t.appeared = false;
+
+			if (!fn) {
+
+				//trigger the custom event
+				t.trigger('appear', settings.data);
+				return;
+			}
+
+			var w = $(window);
+
+			//fires the appear event when appropriate
+			var check = function() {
+
+				//is the element hidden?
+				if (!t.is(':visible')) {
+
+					//it became hidden
+					t.appeared = false;
+					return;
+				}
+
+				//is the element inside the visible window?
+				var a = w.scrollLeft();
+				var b = w.scrollTop();
+				var o = t.offset();
+				var x = o.left;
+				var y = o.top;
+
+				var ax = settings.accX;
+				var ay = settings.accY;
+				var th = t.height();
+				var wh = w.height();
+				var tw = t.width();
+				var ww = w.width();
+
+				if (y + th + ay >= b &&
+					y <= b + wh + ay &&
+					x + tw + ax >= a &&
+					x <= a + ww + ax) {
+
+					//trigger the custom event
+					if (!t.appeared) t.trigger('appear', settings.data);
+
+				} else {
+
+					//it scrolled out of view
+					t.appeared = false;
+				}
+			};
+
+			//create a modified fn with some additional logic
+			var modifiedFn = function() {
+
+				//mark the element as visible
+				t.appeared = true;
+
+				//is this supposed to happen only once?
+				if (settings.one) {
+
+					//remove the check
+					w.unbind('scroll', check);
+					var i = $.inArray(check, $.fn.appear.checks);
+					if (i >= 0) $.fn.appear.checks.splice(i, 1);
+				}
+
+				//trigger the original fn
+				fn.apply(this, arguments);
+			};
+
+			//bind the modified fn to the element
+			if (settings.one) t.one('appear', settings.data, modifiedFn);
+			else t.bind('appear', settings.data, modifiedFn);
+
+			//check whenever the window scrolls
+			w.scroll(check);
+
+			//check whenever the dom changes
+			$.fn.appear.checks.push(check);
+
+			//check now
+			(check)();
+		});
+	};
+
+	//keep a queue of appearance checks
+	$.extend($.fn.appear, {
+
+		checks: [],
+		timeout: null,
+
+		//process the queue
+		checkAll: function() {
+			var length = $.fn.appear.checks.length;
+			if (length > 0) while (length--) ($.fn.appear.checks[length])();
+		},
+
+		//check the queue asynchronously
+		run: function() {
+			if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
+			$.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
+		}
+	});
+
+	//run checks when these methods are called
+	$.each(['append', 'prepend', 'after', 'before', 'attr',
+		'removeAttr', 'addClass', 'removeClass', 'toggleClass',
+		'remove', 'css', 'show', 'hide'], function(i, n) {
+		var old = $.fn[n];
+		if (old) {
+			$.fn[n] = function() {
+				var r = old.apply(this, arguments);
+				$.fn.appear.run();
+				return r;
+			}
+		}
+	});
+
+})(jQuery);

+ 46 - 0
public/static/home/js/jquery.fancybox.pack.js

@@ -0,0 +1,46 @@
+/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
+(function(r,G,f,v){var J=f("html"),n=f(r),p=f(G),b=f.fancybox=function(){b.open.apply(this,arguments)},I=navigator.userAgent.match(/msie/i),B=null,s=G.createTouch!==v,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},q=function(a){return a&&"string"===f.type(a)},E=function(a){return q(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&E(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},w=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.5",defaults:{padding:15,margin:20,
+width:800,height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,pixelRatio:1,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},
+keys:{next:{13:"left",34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
+(I?' allowtransparency="true"':"")+"></iframe>",error:'<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',closeBtn:'<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',next:'<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',prev:'<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'},openEffect:"fade",openSpeed:250,openEasing:"swing",openOpacity:!0,
+openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",nextEffect:"elastic",nextSpeed:250,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:250,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:!0,title:!0},onCancel:f.noop,beforeLoad:f.noop,afterLoad:f.noop,beforeShow:f.noop,afterShow:f.noop,beforeChange:f.noop,beforeClose:f.noop,afterClose:f.noop},group:{},opts:{},previous:null,coming:null,current:null,isActive:!1,
+isOpen:!1,isOpened:!1,wrap:null,skin:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(a,d){if(a&&(f.isPlainObject(d)||(d={}),!1!==b.close(!0)))return f.isArray(a)||(a=t(a)?f(a).get():[a]),f.each(a,function(e,c){var k={},g,h,j,m,l;"object"===f.type(c)&&(c.nodeType&&(c=f(c)),t(c)?(k={href:c.data("fancybox-href")||c.attr("href"),title:c.data("fancybox-title")||c.attr("title"),isDom:!0,element:c},f.metadata&&f.extend(!0,k,
+c.metadata())):k=c);g=d.href||k.href||(q(c)?c:null);h=d.title!==v?d.title:k.title||"";m=(j=d.content||k.content)?"html":d.type||k.type;!m&&k.isDom&&(m=c.data("fancybox-type"),m||(m=(m=c.prop("class").match(/fancybox\.(\w+)/))?m[1]:null));q(g)&&(m||(b.isImage(g)?m="image":b.isSWF(g)?m="swf":"#"===g.charAt(0)?m="inline":q(c)&&(m="html",j=c)),"ajax"===m&&(l=g.split(/\s+/,2),g=l.shift(),l=l.shift()));j||("inline"===m?g?j=f(q(g)?g.replace(/.*(?=#[^\s]+$)/,""):g):k.isDom&&(j=c):"html"===m?j=g:!m&&(!g&&
+k.isDom)&&(m="inline",j=c));f.extend(k,{href:g,type:m,content:j,title:h,selector:l});a[e]=k}),b.opts=f.extend(!0,{},b.defaults,d),d.keys!==v&&(b.opts.keys=d.keys?f.extend({},b.defaults.keys,d.keys):!1),b.group=a,b._start(b.opts.index)},cancel:function(){var a=b.coming;a&&!1!==b.trigger("onCancel")&&(b.hideLoading(),b.ajaxLoad&&b.ajaxLoad.abort(),b.ajaxLoad=null,b.imgPreload&&(b.imgPreload.onload=b.imgPreload.onerror=null),a.wrap&&a.wrap.stop(!0,!0).trigger("onReset").remove(),b.coming=null,b.current||
+b._afterZoomOut(a))},close:function(a){b.cancel();!1!==b.trigger("beforeClose")&&(b.unbindEvents(),b.isActive&&(!b.isOpen||!0===a?(f(".fancybox-wrap").stop(!0).trigger("onReset").remove(),b._afterZoomOut()):(b.isOpen=b.isOpened=!1,b.isClosing=!0,f(".fancybox-item, .fancybox-nav").remove(),b.wrap.stop(!0,!0).removeClass("fancybox-opened"),b.transitions[b.current.closeMethod]())))},play:function(a){var d=function(){clearTimeout(b.player.timer)},e=function(){d();b.current&&b.player.isActive&&(b.player.timer=
+setTimeout(b.next,b.current.playSpeed))},c=function(){d();p.unbind(".player");b.player.isActive=!1;b.trigger("onPlayEnd")};if(!0===a||!b.player.isActive&&!1!==a){if(b.current&&(b.current.loop||b.current.index<b.group.length-1))b.player.isActive=!0,p.bind({"onCancel.player beforeClose.player":c,"onUpdate.player":e,"beforeLoad.player":d}),e(),b.trigger("onPlayStart")}else c()},next:function(a){var d=b.current;d&&(q(a)||(a=d.direction.next),b.jumpto(d.index+1,a,"next"))},prev:function(a){var d=b.current;
+d&&(q(a)||(a=d.direction.prev),b.jumpto(d.index-1,a,"prev"))},jumpto:function(a,d,e){var c=b.current;c&&(a=l(a),b.direction=d||c.direction[a>=c.index?"next":"prev"],b.router=e||"jumpto",c.loop&&(0>a&&(a=c.group.length+a%c.group.length),a%=c.group.length),c.group[a]!==v&&(b.cancel(),b._start(a)))},reposition:function(a,d){var e=b.current,c=e?e.wrap:null,k;c&&(k=b._getPosition(d),a&&"scroll"===a.type?(delete k.position,c.stop(!0,!0).animate(k,200)):(c.css(k),e.pos=f.extend({},e.dim,k)))},update:function(a){var d=
+a&&a.type,e=!d||"orientationchange"===d;e&&(clearTimeout(B),B=null);b.isOpen&&!B&&(B=setTimeout(function(){var c=b.current;c&&!b.isClosing&&(b.wrap.removeClass("fancybox-tmp"),(e||"load"===d||"resize"===d&&c.autoResize)&&b._setDimension(),"scroll"===d&&c.canShrink||b.reposition(a),b.trigger("onUpdate"),B=null)},e&&!s?0:300))},toggle:function(a){b.isOpen&&(b.current.fitToView="boolean"===f.type(a)?a:!b.current.fitToView,s&&(b.wrap.removeAttr("style").addClass("fancybox-tmp"),b.trigger("onUpdate")),
+b.update())},hideLoading:function(){p.unbind(".loading");f("#fancybox-loading").remove()},showLoading:function(){var a,d;b.hideLoading();a=f('<div id="fancybox-loading"><div></div></div>').click(b.cancel).appendTo("body");p.bind("keydown.loading",function(a){if(27===(a.which||a.keyCode))a.preventDefault(),b.cancel()});b.defaults.fixed||(d=b.getViewport(),a.css({position:"absolute",top:0.5*d.h+d.y,left:0.5*d.w+d.x}))},getViewport:function(){var a=b.current&&b.current.locked||!1,d={x:n.scrollLeft(),
+y:n.scrollTop()};a?(d.w=a[0].clientWidth,d.h=a[0].clientHeight):(d.w=s&&r.innerWidth?r.innerWidth:n.width(),d.h=s&&r.innerHeight?r.innerHeight:n.height());return d},unbindEvents:function(){b.wrap&&t(b.wrap)&&b.wrap.unbind(".fb");p.unbind(".fb");n.unbind(".fb")},bindEvents:function(){var a=b.current,d;a&&(n.bind("orientationchange.fb"+(s?"":" resize.fb")+(a.autoCenter&&!a.locked?" scroll.fb":""),b.update),(d=a.keys)&&p.bind("keydown.fb",function(e){var c=e.which||e.keyCode,k=e.target||e.srcElement;
+if(27===c&&b.coming)return!1;!e.ctrlKey&&(!e.altKey&&!e.shiftKey&&!e.metaKey&&(!k||!k.type&&!f(k).is("[contenteditable]")))&&f.each(d,function(d,k){if(1<a.group.length&&k[c]!==v)return b[d](k[c]),e.preventDefault(),!1;if(-1<f.inArray(c,k))return b[d](),e.preventDefault(),!1})}),f.fn.mousewheel&&a.mouseWheel&&b.wrap.bind("mousewheel.fb",function(d,c,k,g){for(var h=f(d.target||null),j=!1;h.length&&!j&&!h.is(".fancybox-skin")&&!h.is(".fancybox-wrap");)j=h[0]&&!(h[0].style.overflow&&"hidden"===h[0].style.overflow)&&
+(h[0].clientWidth&&h[0].scrollWidth>h[0].clientWidth||h[0].clientHeight&&h[0].scrollHeight>h[0].clientHeight),h=f(h).parent();if(0!==c&&!j&&1<b.group.length&&!a.canShrink){if(0<g||0<k)b.prev(0<g?"down":"left");else if(0>g||0>k)b.next(0>g?"up":"right");d.preventDefault()}}))},trigger:function(a,d){var e,c=d||b.coming||b.current;if(c){f.isFunction(c[a])&&(e=c[a].apply(c,Array.prototype.slice.call(arguments,1)));if(!1===e)return!1;c.helpers&&f.each(c.helpers,function(d,e){if(e&&b.helpers[d]&&f.isFunction(b.helpers[d][a]))b.helpers[d][a](f.extend(!0,
+{},b.helpers[d].defaults,e),c)});p.trigger(a)}},isImage:function(a){return q(a)&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSWF:function(a){return q(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(a){var d={},e,c;a=l(a);e=b.group[a]||null;if(!e)return!1;d=f.extend(!0,{},b.opts,e);e=d.margin;c=d.padding;"number"===f.type(e)&&(d.margin=[e,e,e,e]);"number"===f.type(c)&&(d.padding=[c,c,c,c]);d.modal&&f.extend(!0,d,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,
+mouseWheel:!1,keys:null,helpers:{overlay:{closeClick:!1}}});d.autoSize&&(d.autoWidth=d.autoHeight=!0);"auto"===d.width&&(d.autoWidth=!0);"auto"===d.height&&(d.autoHeight=!0);d.group=b.group;d.index=a;b.coming=d;if(!1===b.trigger("beforeLoad"))b.coming=null;else{c=d.type;e=d.href;if(!c)return b.coming=null,b.current&&b.router&&"jumpto"!==b.router?(b.current.index=a,b[b.router](b.direction)):!1;b.isActive=!0;if("image"===c||"swf"===c)d.autoHeight=d.autoWidth=!1,d.scrolling="visible";"image"===c&&(d.aspectRatio=
+!0);"iframe"===c&&s&&(d.scrolling="scroll");d.wrap=f(d.tpl.wrap).addClass("fancybox-"+(s?"mobile":"desktop")+" fancybox-type-"+c+" fancybox-tmp "+d.wrapCSS).appendTo(d.parent||"body");f.extend(d,{skin:f(".fancybox-skin",d.wrap),outer:f(".fancybox-outer",d.wrap),inner:f(".fancybox-inner",d.wrap)});f.each(["Top","Right","Bottom","Left"],function(a,b){d.skin.css("padding"+b,w(d.padding[a]))});b.trigger("onReady");if("inline"===c||"html"===c){if(!d.content||!d.content.length)return b._error("content")}else if(!e)return b._error("href");
+"image"===c?b._loadImage():"ajax"===c?b._loadAjax():"iframe"===c?b._loadIframe():b._afterLoad()}},_error:function(a){f.extend(b.coming,{type:"html",autoWidth:!0,autoHeight:!0,minWidth:0,minHeight:0,scrolling:"no",hasError:a,content:b.coming.tpl.error});b._afterLoad()},_loadImage:function(){var a=b.imgPreload=new Image;a.onload=function(){this.onload=this.onerror=null;b.coming.width=this.width/b.opts.pixelRatio;b.coming.height=this.height/b.opts.pixelRatio;b._afterLoad()};a.onerror=function(){this.onload=
+this.onerror=null;b._error("image")};a.src=b.coming.href;!0!==a.complete&&b.showLoading()},_loadAjax:function(){var a=b.coming;b.showLoading();b.ajaxLoad=f.ajax(f.extend({},a.ajax,{url:a.href,error:function(a,e){b.coming&&"abort"!==e?b._error("ajax",a):b.hideLoading()},success:function(d,e){"success"===e&&(a.content=d,b._afterLoad())}}))},_loadIframe:function(){var a=b.coming,d=f(a.tpl.iframe.replace(/\{rnd\}/g,(new Date).getTime())).attr("scrolling",s?"auto":a.iframe.scrolling).attr("src",a.href);
+f(a.wrap).bind("onReset",function(){try{f(this).find("iframe").hide().attr("src","//about:blank").end().empty()}catch(a){}});a.iframe.preload&&(b.showLoading(),d.one("load",function(){f(this).data("ready",1);s||f(this).bind("load.fb",b.update);f(this).parents(".fancybox-wrap").width("100%").removeClass("fancybox-tmp").show();b._afterLoad()}));a.content=d.appendTo(a.inner);a.iframe.preload||b._afterLoad()},_preloadImages:function(){var a=b.group,d=b.current,e=a.length,c=d.preload?Math.min(d.preload,
+e-1):0,f,g;for(g=1;g<=c;g+=1)f=a[(d.index+g)%e],"image"===f.type&&f.href&&((new Image).src=f.href)},_afterLoad:function(){var a=b.coming,d=b.current,e,c,k,g,h;b.hideLoading();if(a&&!1!==b.isActive)if(!1===b.trigger("afterLoad",a,d))a.wrap.stop(!0).trigger("onReset").remove(),b.coming=null;else{d&&(b.trigger("beforeChange",d),d.wrap.stop(!0).removeClass("fancybox-opened").find(".fancybox-item, .fancybox-nav").remove());b.unbindEvents();e=a.content;c=a.type;k=a.scrolling;f.extend(b,{wrap:a.wrap,skin:a.skin,
+outer:a.outer,inner:a.inner,current:a,previous:d});g=a.href;switch(c){case "inline":case "ajax":case "html":a.selector?e=f("<div>").html(e).find(a.selector):t(e)&&(e.data("fancybox-placeholder")||e.data("fancybox-placeholder",f('<div class="fancybox-placeholder"></div>').insertAfter(e).hide()),e=e.show().detach(),a.wrap.bind("onReset",function(){f(this).find(e).length&&e.hide().replaceAll(e.data("fancybox-placeholder")).data("fancybox-placeholder",!1)}));break;case "image":e=a.tpl.image.replace("{href}",
+g);break;case "swf":e='<object id="fancybox-swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="movie" value="'+g+'"></param>',h="",f.each(a.swf,function(a,b){e+='<param name="'+a+'" value="'+b+'"></param>';h+=" "+a+'="'+b+'"'}),e+='<embed src="'+g+'" type="application/x-shockwave-flash" width="100%" height="100%"'+h+"></embed></object>"}(!t(e)||!e.parent().is(a.inner))&&a.inner.append(e);b.trigger("beforeShow");a.inner.css("overflow","yes"===k?"scroll":
+"no"===k?"hidden":k);b._setDimension();b.reposition();b.isOpen=!1;b.coming=null;b.bindEvents();if(b.isOpened){if(d.prevMethod)b.transitions[d.prevMethod]()}else f(".fancybox-wrap").not(a.wrap).stop(!0).trigger("onReset").remove();b.transitions[b.isOpened?a.nextMethod:a.openMethod]();b._preloadImages()}},_setDimension:function(){var a=b.getViewport(),d=0,e=!1,c=!1,e=b.wrap,k=b.skin,g=b.inner,h=b.current,c=h.width,j=h.height,m=h.minWidth,u=h.minHeight,n=h.maxWidth,p=h.maxHeight,s=h.scrolling,q=h.scrollOutside?
+h.scrollbarWidth:0,x=h.margin,y=l(x[1]+x[3]),r=l(x[0]+x[2]),v,z,t,C,A,F,B,D,H;e.add(k).add(g).width("auto").height("auto").removeClass("fancybox-tmp");x=l(k.outerWidth(!0)-k.width());v=l(k.outerHeight(!0)-k.height());z=y+x;t=r+v;C=E(c)?(a.w-z)*l(c)/100:c;A=E(j)?(a.h-t)*l(j)/100:j;if("iframe"===h.type){if(H=h.content,h.autoHeight&&1===H.data("ready"))try{H[0].contentWindow.document.location&&(g.width(C).height(9999),F=H.contents().find("body"),q&&F.css("overflow-x","hidden"),A=F.outerHeight(!0))}catch(G){}}else if(h.autoWidth||
+h.autoHeight)g.addClass("fancybox-tmp"),h.autoWidth||g.width(C),h.autoHeight||g.height(A),h.autoWidth&&(C=g.width()),h.autoHeight&&(A=g.height()),g.removeClass("fancybox-tmp");c=l(C);j=l(A);D=C/A;m=l(E(m)?l(m,"w")-z:m);n=l(E(n)?l(n,"w")-z:n);u=l(E(u)?l(u,"h")-t:u);p=l(E(p)?l(p,"h")-t:p);F=n;B=p;h.fitToView&&(n=Math.min(a.w-z,n),p=Math.min(a.h-t,p));z=a.w-y;r=a.h-r;h.aspectRatio?(c>n&&(c=n,j=l(c/D)),j>p&&(j=p,c=l(j*D)),c<m&&(c=m,j=l(c/D)),j<u&&(j=u,c=l(j*D))):(c=Math.max(m,Math.min(c,n)),h.autoHeight&&
+"iframe"!==h.type&&(g.width(c),j=g.height()),j=Math.max(u,Math.min(j,p)));if(h.fitToView)if(g.width(c).height(j),e.width(c+x),a=e.width(),y=e.height(),h.aspectRatio)for(;(a>z||y>r)&&(c>m&&j>u)&&!(19<d++);)j=Math.max(u,Math.min(p,j-10)),c=l(j*D),c<m&&(c=m,j=l(c/D)),c>n&&(c=n,j=l(c/D)),g.width(c).height(j),e.width(c+x),a=e.width(),y=e.height();else c=Math.max(m,Math.min(c,c-(a-z))),j=Math.max(u,Math.min(j,j-(y-r)));q&&("auto"===s&&j<A&&c+x+q<z)&&(c+=q);g.width(c).height(j);e.width(c+x);a=e.width();
+y=e.height();e=(a>z||y>r)&&c>m&&j>u;c=h.aspectRatio?c<F&&j<B&&c<C&&j<A:(c<F||j<B)&&(c<C||j<A);f.extend(h,{dim:{width:w(a),height:w(y)},origWidth:C,origHeight:A,canShrink:e,canExpand:c,wPadding:x,hPadding:v,wrapSpace:y-k.outerHeight(!0),skinSpace:k.height()-j});!H&&(h.autoHeight&&j>u&&j<p&&!c)&&g.height("auto")},_getPosition:function(a){var d=b.current,e=b.getViewport(),c=d.margin,f=b.wrap.width()+c[1]+c[3],g=b.wrap.height()+c[0]+c[2],c={position:"absolute",top:c[0],left:c[3]};d.autoCenter&&d.fixed&&
+!a&&g<=e.h&&f<=e.w?c.position="fixed":d.locked||(c.top+=e.y,c.left+=e.x);c.top=w(Math.max(c.top,c.top+(e.h-g)*d.topRatio));c.left=w(Math.max(c.left,c.left+(e.w-f)*d.leftRatio));return c},_afterZoomIn:function(){var a=b.current;a&&(b.isOpen=b.isOpened=!0,b.wrap.css("overflow","visible").addClass("fancybox-opened"),b.update(),(a.closeClick||a.nextClick&&1<b.group.length)&&b.inner.css("cursor","pointer").bind("click.fb",function(d){!f(d.target).is("a")&&!f(d.target).parent().is("a")&&(d.preventDefault(),
+b[a.closeClick?"close":"next"]())}),a.closeBtn&&f(a.tpl.closeBtn).appendTo(b.skin).bind("click.fb",function(a){a.preventDefault();b.close()}),a.arrows&&1<b.group.length&&((a.loop||0<a.index)&&f(a.tpl.prev).appendTo(b.outer).bind("click.fb",b.prev),(a.loop||a.index<b.group.length-1)&&f(a.tpl.next).appendTo(b.outer).bind("click.fb",b.next)),b.trigger("afterShow"),!a.loop&&a.index===a.group.length-1?b.play(!1):b.opts.autoPlay&&!b.player.isActive&&(b.opts.autoPlay=!1,b.play()))},_afterZoomOut:function(a){a=
+a||b.current;f(".fancybox-wrap").trigger("onReset").remove();f.extend(b,{group:{},opts:{},router:!1,current:null,isActive:!1,isOpened:!1,isOpen:!1,isClosing:!1,wrap:null,skin:null,outer:null,inner:null});b.trigger("afterClose",a)}});b.transitions={getOrigPosition:function(){var a=b.current,d=a.element,e=a.orig,c={},f=50,g=50,h=a.hPadding,j=a.wPadding,m=b.getViewport();!e&&(a.isDom&&d.is(":visible"))&&(e=d.find("img:first"),e.length||(e=d));t(e)?(c=e.offset(),e.is("img")&&(f=e.outerWidth(),g=e.outerHeight())):
+(c.top=m.y+(m.h-g)*a.topRatio,c.left=m.x+(m.w-f)*a.leftRatio);if("fixed"===b.wrap.css("position")||a.locked)c.top-=m.y,c.left-=m.x;return c={top:w(c.top-h*a.topRatio),left:w(c.left-j*a.leftRatio),width:w(f+j),height:w(g+h)}},step:function(a,d){var e,c,f=d.prop;c=b.current;var g=c.wrapSpace,h=c.skinSpace;if("width"===f||"height"===f)e=d.end===d.start?1:(a-d.start)/(d.end-d.start),b.isClosing&&(e=1-e),c="width"===f?c.wPadding:c.hPadding,c=a-c,b.skin[f](l("width"===f?c:c-g*e)),b.inner[f](l("width"===
+f?c:c-g*e-h*e))},zoomIn:function(){var a=b.current,d=a.pos,e=a.openEffect,c="elastic"===e,k=f.extend({opacity:1},d);delete k.position;c?(d=this.getOrigPosition(),a.openOpacity&&(d.opacity=0.1)):"fade"===e&&(d.opacity=0.1);b.wrap.css(d).animate(k,{duration:"none"===e?0:a.openSpeed,easing:a.openEasing,step:c?this.step:null,complete:b._afterZoomIn})},zoomOut:function(){var a=b.current,d=a.closeEffect,e="elastic"===d,c={opacity:0.1};e&&(c=this.getOrigPosition(),a.closeOpacity&&(c.opacity=0.1));b.wrap.animate(c,
+{duration:"none"===d?0:a.closeSpeed,easing:a.closeEasing,step:e?this.step:null,complete:b._afterZoomOut})},changeIn:function(){var a=b.current,d=a.nextEffect,e=a.pos,c={opacity:1},f=b.direction,g;e.opacity=0.1;"elastic"===d&&(g="down"===f||"up"===f?"top":"left","down"===f||"right"===f?(e[g]=w(l(e[g])-200),c[g]="+=200px"):(e[g]=w(l(e[g])+200),c[g]="-=200px"));"none"===d?b._afterZoomIn():b.wrap.css(e).animate(c,{duration:a.nextSpeed,easing:a.nextEasing,complete:b._afterZoomIn})},changeOut:function(){var a=
+b.previous,d=a.prevEffect,e={opacity:0.1},c=b.direction;"elastic"===d&&(e["down"===c||"up"===c?"top":"left"]=("up"===c||"left"===c?"-":"+")+"=200px");a.wrap.animate(e,{duration:"none"===d?0:a.prevSpeed,easing:a.prevEasing,complete:function(){f(this).trigger("onReset").remove()}})}};b.helpers.overlay={defaults:{closeClick:!0,speedOut:200,showEarly:!0,css:{},locked:!s,fixed:!0},overlay:null,fixed:!1,el:f("html"),create:function(a){a=f.extend({},this.defaults,a);this.overlay&&this.close();this.overlay=
+f('<div class="fancybox-overlay"></div>').appendTo(b.coming?b.coming.parent:a.parent);this.fixed=!1;a.fixed&&b.defaults.fixed&&(this.overlay.addClass("fancybox-overlay-fixed"),this.fixed=!0)},open:function(a){var d=this;a=f.extend({},this.defaults,a);this.overlay?this.overlay.unbind(".overlay").width("auto").height("auto"):this.create(a);this.fixed||(n.bind("resize.overlay",f.proxy(this.update,this)),this.update());a.closeClick&&this.overlay.bind("click.overlay",function(a){if(f(a.target).hasClass("fancybox-overlay"))return b.isActive?
+b.close():d.close(),!1});this.overlay.css(a.css).show()},close:function(){var a,b;n.unbind("resize.overlay");this.el.hasClass("fancybox-lock")&&(f(".fancybox-margin").removeClass("fancybox-margin"),a=n.scrollTop(),b=n.scrollLeft(),this.el.removeClass("fancybox-lock"),n.scrollTop(a).scrollLeft(b));f(".fancybox-overlay").remove().hide();f.extend(this,{overlay:null,fixed:!1})},update:function(){var a="100%",b;this.overlay.width(a).height("100%");I?(b=Math.max(G.documentElement.offsetWidth,G.body.offsetWidth),
+p.width()>b&&(a=p.width())):p.width()>n.width()&&(a=p.width());this.overlay.width(a).height(p.height())},onReady:function(a,b){var e=this.overlay;f(".fancybox-overlay").stop(!0,!0);e||this.create(a);a.locked&&(this.fixed&&b.fixed)&&(e||(this.margin=p.height()>n.height()?f("html").css("margin-right").replace("px",""):!1),b.locked=this.overlay.append(b.wrap),b.fixed=!1);!0===a.showEarly&&this.beforeShow.apply(this,arguments)},beforeShow:function(a,b){var e,c;b.locked&&(!1!==this.margin&&(f("*").filter(function(){return"fixed"===
+f(this).css("position")&&!f(this).hasClass("fancybox-overlay")&&!f(this).hasClass("fancybox-wrap")}).addClass("fancybox-margin"),this.el.addClass("fancybox-margin")),e=n.scrollTop(),c=n.scrollLeft(),this.el.addClass("fancybox-lock"),n.scrollTop(e).scrollLeft(c));this.open(a)},onUpdate:function(){this.fixed||this.update()},afterClose:function(a){this.overlay&&!b.coming&&this.overlay.fadeOut(a.speedOut,f.proxy(this.close,this))}};b.helpers.title={defaults:{type:"float",position:"bottom"},beforeShow:function(a){var d=
+b.current,e=d.title,c=a.type;f.isFunction(e)&&(e=e.call(d.element,d));if(q(e)&&""!==f.trim(e)){d=f('<div class="fancybox-title fancybox-title-'+c+'-wrap">'+e+"</div>");switch(c){case "inside":c=b.skin;break;case "outside":c=b.wrap;break;case "over":c=b.inner;break;default:c=b.skin,d.appendTo("body"),I&&d.width(d.width()),d.wrapInner('<span class="child"></span>'),b.current.margin[2]+=Math.abs(l(d.css("margin-bottom")))}d["top"===a.position?"prependTo":"appendTo"](c)}}};f.fn.fancybox=function(a){var d,
+e=f(this),c=this.selector||"",k=function(g){var h=f(this).blur(),j=d,k,l;!g.ctrlKey&&(!g.altKey&&!g.shiftKey&&!g.metaKey)&&!h.is(".fancybox-wrap")&&(k=a.groupAttr||"data-fancybox-group",l=h.attr(k),l||(k="rel",l=h.get(0)[k]),l&&(""!==l&&"nofollow"!==l)&&(h=c.length?f(c):e,h=h.filter("["+k+'="'+l+'"]'),j=h.index(this)),a.index=j,!1!==b.open(h,a)&&g.preventDefault())};a=a||{};d=a.index||0;!c||!1===a.live?e.unbind("click.fb-start").bind("click.fb-start",k):p.undelegate(c,"click.fb-start").delegate(c+
+":not('.fancybox-item, .fancybox-nav')","click.fb-start",k);this.filter("[data-fancybox-start=1]").trigger("click");return this};p.ready(function(){var a,d;f.scrollbarWidth===v&&(f.scrollbarWidth=function(){var a=f('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo("body"),b=a.children(),b=b.innerWidth()-b.height(99).innerWidth();a.remove();return b});if(f.support.fixedPosition===v){a=f.support;d=f('<div style="position:fixed;top:20px;"></div>').appendTo("body");var e=20===
+d[0].offsetTop||15===d[0].offsetTop;d.remove();a.fixedPosition=e}f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(r).width();J.addClass("fancybox-lock-test");d=f(r).width();J.removeClass("fancybox-lock-test");f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery);

文件差异内容过多而无法显示
+ 13 - 0
public/static/home/js/jquery.mixitup.min.js


+ 223 - 0
public/static/home/js/jquery.nav.js

@@ -0,0 +1,223 @@
+/*
+ * jQuery One Page Nav Plugin
+ * http://github.com/davist11/jQuery-One-Page-Nav
+ *
+ * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://jquery.org/license
+ *
+ * @version 3.0.0
+ *
+ * Example usage:
+ * $('#nav').onePageNav({
+ *   currentClass: 'current',
+ *   changeHash: false,
+ *   scrollSpeed: 750
+ * });
+ */
+
+;(function($, window, document, undefined){
+
+	// our plugin constructor
+	var OnePageNav = function(elem, options){
+		this.elem = elem;
+		this.$elem = $(elem);
+		this.options = options;
+		this.metadata = this.$elem.data('plugin-options');
+		this.$win = $(window);
+		this.sections = {};
+		this.didScroll = false;
+		this.$doc = $(document);
+		this.docHeight = this.$doc.height();
+	};
+
+	// the plugin prototype
+	OnePageNav.prototype = {
+		defaults: {
+			navItems: 'a',
+			currentClass: 'current',
+			changeHash: false,
+			easing: 'swing',
+			filter: '',
+			scrollSpeed: 750,
+			scrollThreshold: 0.5,
+			begin: false,
+			end: false,
+			scrollChange: false
+		},
+
+		init: function() {
+			// Introduce defaults that can be extended either
+			// globally or using an object literal.
+			this.config = $.extend({}, this.defaults, this.options, this.metadata);
+
+			this.$nav = this.$elem.find(this.config.navItems);
+
+			//Filter any links out of the nav
+			if(this.config.filter !== '') {
+				this.$nav = this.$nav.filter(this.config.filter);
+			}
+
+			//Handle clicks on the nav
+			this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
+
+			//Get the section positions
+			this.getPositions();
+
+			//Handle scroll changes
+			this.bindInterval();
+
+			//Update the positions on resize too
+			this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
+
+			return this;
+		},
+
+		adjustNav: function(self, $parent) {
+			self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
+			$parent.addClass(self.config.currentClass);
+		},
+
+		bindInterval: function() {
+			var self = this;
+			var docHeight;
+
+			self.$win.on('scroll.onePageNav', function() {
+				self.didScroll = true;
+			});
+
+			self.t = setInterval(function() {
+				docHeight = self.$doc.height();
+
+				//If it was scrolled
+				if(self.didScroll) {
+					self.didScroll = false;
+					self.scrollChange();
+				}
+
+				//If the document height changes
+				if(docHeight !== self.docHeight) {
+					self.docHeight = docHeight;
+					self.getPositions();
+				}
+			}, 250);
+		},
+
+		getHash: function($link) {
+			return $link.attr('href').split('#')[1];
+		},
+
+		getPositions: function() {
+			var self = this;
+			var linkHref;
+			var topPos;
+			var $target;
+
+			self.$nav.each(function() {
+				linkHref = self.getHash($(this));
+				$target = $('#' + linkHref);
+
+				if($target.length) {
+					topPos = $target.offset().top;
+					self.sections[linkHref] = Math.round(topPos);
+				}
+			});
+		},
+
+		getSection: function(windowPos) {
+			var returnValue = null;
+			var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
+
+			for(var section in this.sections) {
+				if((this.sections[section] - windowHeight) < windowPos) {
+					returnValue = section;
+				}
+			}
+
+			return returnValue;
+		},
+
+		handleClick: function(e) {
+			var self = this;
+			var $link = $(e.currentTarget);
+			var $parent = $link.parent();
+			var newLoc = '#' + self.getHash($link);
+
+			if(!$parent.hasClass(self.config.currentClass)) {
+				//Start callback
+				if(self.config.begin) {
+					self.config.begin();
+				}
+
+				//Change the highlighted nav item
+				self.adjustNav(self, $parent);
+
+				//Removing the auto-adjust on scroll
+				self.unbindInterval();
+
+				//Scroll to the correct position
+				self.scrollTo(newLoc, function() {
+					//Do we need to change the hash?
+					if(self.config.changeHash) {
+						window.location.hash = newLoc;
+					}
+
+					//Add the auto-adjust on scroll back in
+					self.bindInterval();
+
+					//End callback
+					if(self.config.end) {
+						self.config.end();
+					}
+				});
+			}
+
+			e.preventDefault();
+		},
+
+		scrollChange: function() {
+			var windowTop = this.$win.scrollTop();
+			var position = this.getSection(windowTop);
+			var $parent;
+
+			//If the position is set
+			if(position !== null) {
+				$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
+
+				//If it's not already the current section
+				if(!$parent.hasClass(this.config.currentClass)) {
+					//Change the highlighted nav item
+					this.adjustNav(this, $parent);
+
+					//If there is a scrollChange callback
+					if(this.config.scrollChange) {
+						this.config.scrollChange($parent);
+					}
+				}
+			}
+		},
+
+		scrollTo: function(target, callback) {
+			var offset = $(target).offset().top;
+
+			$('html, body').animate({
+				scrollTop: offset
+			}, this.config.scrollSpeed, this.config.easing, callback);
+		},
+
+		unbindInterval: function() {
+			clearInterval(this.t);
+			this.$win.unbind('scroll.onePageNav');
+		}
+	};
+
+	OnePageNav.defaults = OnePageNav.prototype.defaults;
+
+	$.fn.onePageNav = function(options) {
+		return this.each(function() {
+			new OnePageNav(this, options).init();
+		});
+	};
+
+})( jQuery, window , document );

+ 69 - 0
public/static/home/js/jquery.parallax-1.1.3.js

@@ -0,0 +1,69 @@
+/*
+Plugin: jQuery Parallax
+Version 1.1.3
+Author: Ian Lunn
+Twitter: @IanLunn
+Author URL: http://www.ianlunn.co.uk/
+Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
+
+Dual licensed under the MIT and GPL licenses:
+http://www.opensource.org/licenses/mit-license.php
+http://www.gnu.org/licenses/gpl.html
+*/
+
+(function( $ ){
+	var $window = $(window);
+	var windowHeight = $window.height();
+
+	$window.resize(function () {
+		windowHeight = $window.height();
+	});
+
+	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
+		var $this = $(this);
+		var getHeight;
+		var firstTop;
+		var paddingTop = 0;
+		
+		//get the starting position of each element to have parallax applied to it		
+		$this.each(function(){
+		    firstTop = $this.offset().top;
+		});
+
+		if (outerHeight) {
+			getHeight = function(jqo) {
+				return jqo.outerHeight(true);
+			};
+		} else {
+			getHeight = function(jqo) {
+				return jqo.height();
+			};
+		}
+			
+		// setup defaults if arguments aren't specified
+		if (arguments.length < 1 || xpos === null) xpos = "50%";
+		if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
+		if (arguments.length < 3 || outerHeight === null) outerHeight = true;
+		
+		// function to be called whenever the window is scrolled or resized
+		function update(){
+			var pos = $window.scrollTop();				
+
+			$this.each(function(){
+				var $element = $(this);
+				var top = $element.offset().top;
+				var height = getHeight($element);
+
+				// Check if totally above or totally below viewport
+				if (top + height < pos || top > pos + windowHeight) {
+					return;
+				}
+
+				$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
+			});
+		}		
+
+		$window.bind('scroll', update).resize(update);
+		update();
+	};
+})(jQuery);

+ 121 - 0
public/static/home/js/main.js

@@ -0,0 +1,121 @@
+
+/* ========================================================================= */
+/*  
+/*  
+/******************************* Main Javascript *****************************/
+/*  
+/*  
+/* ========================================================================= */
+
+
+
+
+
+
+$(function(){
+    
+    /* ============================= Menu item highlighting  ============================================ */
+    
+    jQuery(window).scroll(function () {
+        if (jQuery(window).scrollTop() > 400) {
+            jQuery("#navigation").css("background-color","#E7EF4A");
+            jQuery("#navigation").addClass("animated-nav");
+        } else {
+            jQuery("#navigation").css("background-color","transparent");
+            jQuery("#navigation").removeClass("animated-nav");
+        }
+    });
+
+    $('#nav').onePageNav({
+        filter: ':not(.external)',
+        scrollSpeed: 950,
+        scrollThreshold: 1
+    });
+
+    /* Slider Height
+    var slideHeight = $(window).height();
+    $('#home-carousel .carousel-inner .item, #home-carousel .video-container').css('height',slideHeight);
+
+    $(window).resize(function(){'use strict',
+        $('#home-carousel .carousel-inner .item, #home-carousel .video-container').css('height',slideHeight);
+    }); 
+    
+    */
+
+    
+    /* ============================= portfolio filtering  ============================================ */
+
+    $("#projects").mixItUp();
+
+    /* ============================= fancybox  ============================================ */
+
+    $(".fancybox").fancybox({
+        padding: 0,
+
+        openEffect : 'elastic',
+        openSpeed  : 650,
+
+        closeEffect : 'elastic',
+        closeSpeed  : 550,
+    });
+
+
+    
+    /* ============================= count  ============================================ */
+
+    "use strict";
+    $(".fact-item").appear(function () {
+        $(".fact-item [data-to]").each(function () {
+            var e = $(this).attr("data-to");
+            $(this).delay(6e3).countTo({
+                from: 50,
+                to: e,
+                speed: 3e3,
+                refreshInterval: 50
+            })
+        })
+    });
+
+    /* ============================= Testimonial  ============================================ */
+    
+    $("#testimonial").owlCarousel({
+        pagination : true, // Show bullet pagination
+        slideSpeed : 300,
+        paginationSpeed : 400,
+        singleItem:true
+    });
+
+});
+
+    /* ============================= On scroll fade/bounce fffect  ============================================ */
+
+    wow = new WOW({
+        animateClass: 'animated',
+        offset: 100,
+        mobile: false
+    });
+    wow.init();
+   
+/* ============================= Progress Bars  ============================================ */
+
+initProgress('.progress');
+
+function initProgress(el){
+    jQuery(el).each(function(){
+        var pData = jQuery(this).data('progress');
+        progress(pData,jQuery(this));
+    });
+}
+            
+function progress(percent, $element) {
+    var progressBarWidth = 0;
+    
+    (function myLoop (i,max) {
+        progressBarWidth = i * $element.width() / 100;
+        setTimeout(function () {   
+        $element.find('div').find('small').html(i+'%');
+        $element.find('div').width(progressBarWidth);
+        if (++i<=max) myLoop(i,max);     
+        }, 10)
+    })(0,percent);  
+}   

文件差异内容过多而无法显示
+ 9 - 0
public/static/home/js/owl.carousel.min.js


文件差异内容过多而无法显示
+ 1 - 0
public/static/home/js/vendor/jquery-1.11.1.min.js


文件差异内容过多而无法显示
+ 3 - 0
public/static/home/js/vendor/modernizr-2.6.2.min.js


文件差异内容过多而无法显示
+ 1 - 0
public/static/home/js/wow.min.js


二进制
public/uploads/home/bg1.jpg


二进制
public/uploads/home/logo.png


+ 196 - 0
runtime/temp/10bad90ba7af352e9fe4e52b115adce2.php

@@ -0,0 +1,196 @@
+<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:72:"D:\wamp64\www\Home-WEB\public/../application/admin\view\index\index.html";i:1557391016;}*/ ?>
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>麦帮官网</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <!-- Bootstrap 3.3.7 -->
+    <link rel="stylesheet" href="<?php echo PLUGINS_SITE_ROOT; ?>/layui/css/layui.css">
+    <link rel="stylesheet" href="<?php echo ADMIN_SITE_ROOT; ?>/css/admin.css">
+    <link rel="stylesheet" href="<?php echo ADMIN_SITE_ROOT; ?>/iconfont/iconfont.css">
+    <script src="<?php echo PLUGINS_SITE_ROOT; ?>/jquery-2.1.4.min.js"></script>
+    <script src="<?php echo ADMIN_SITE_ROOT; ?>/js/admin.js"></script>
+    <script type="text/javascript" src="<?php echo PLUGINS_SITE_ROOT; ?>/layui/layui.js"></script>
+    <script type="text/javascript">
+        var BASESITEROOT = "<?php echo BASE_SITE_ROOT; ?>";
+        var ADMINSITEROOT = "<?php echo ADMIN_SITE_ROOT; ?>";
+        var BASESITEURL = "<?php echo BASE_SITE_URL; ?>";
+        var HOMESITEURL = "<?php echo HOME_SITE_URL; ?>";
+        var ADMINSITEURL = "<?php echo ADMIN_SITE_URL; ?>";
+    </script>
+</head>
+<body>
+<style type="text/css">
+    .layui-tab {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        z-index: 10;
+        margin: 0;
+        border: none;
+        overflow: hidden;
+    }
+
+    .layui-tab-content {
+        padding: 0;
+        height: 100%;
+    }
+
+    .layui-tab-item {
+        height: 100%;
+    }
+    .treeview .admin-nav-item{
+            color: #a7b1c2 !important;
+            padding-left: 5px;
+    }
+    .treeview .admin-nav-item:hover{
+            color: #fff !important;
+    }
+</style>
+<div class="admincp-header">
+    <div class="logo">
+        <img width="200" src="<?php echo ADMIN_SITE_ROOT; ?>/images/backlogo.png"/>
+    </div>
+    <div class="navbar">
+        <ul class="fr" style="float:right" id="nav">
+            <li>
+                <span><?php echo \think\Lang::get('ds_shalom'); ?>,<?php echo \think\Session::get('admin_name'); ?></span>
+                <dl class="layui-nav-child"> <!-- 二级菜单 -->
+                    <dd><a href="javascript:dsLayerOpen('<?php echo url('Index/modifypw'); ?>','<?php echo \think\Lang::get('ds_change_password'); ?>')"><?php echo \think\Lang::get('ds_change_password'); ?></a></dd>
+                    <dd><a href="<?php echo url('Login/logout'); ?>"><?php echo \think\Lang::get('ds_safe_withdrawing'); ?></a></dd>
+                </dl>
+            </li>
+            <li><a href="javascript:dsLayerConfirm('<?php echo url('Index/clear'); ?>','<?php echo \think\Lang::get('ds_clear_cache_confirm'); ?>')"><?php echo \think\Lang::get('ds_clear_cache'); ?></a></li>
+        </ul>
+    </div>
+</div>
+<div class="admincp-container">
+    <div class="admincp-container-left">
+        <ul class="sidebar-menu" id="gloMenu">
+            <?php if(is_array($menu_list) || $menu_list instanceof \think\Collection || $menu_list instanceof \think\Paginator): if( count($menu_list)==0 ) : echo "" ;else: foreach($menu_list as $fe_menu=>$menu): if(!empty($menu['children'])): ?>
+            <li class="treeview">
+                <div class="title" id="navT"><i class="iconfont icon-<?php echo $fe_menu; ?>"></i><span class="title-txt"> <?php echo $menu['text']; ?></span><span class="layui-nav-more"></span></div>
+                <ul class="treeview-menu" id="navC" style="display:none;">
+                    <?php if(is_array($menu['children']) || $menu['children'] instanceof \think\Collection || $menu['children'] instanceof \think\Paginator): if( count($menu['children'])==0 ) : echo "" ;else: foreach($menu['children'] as $fe_submenu=>$submenu): if(array_intersect(explode("/",substr($submenu['url'],7,-5)),$gupinfo)): ?>
+                        <li><a data-id="<?php echo $fe_menu; ?>-<?php echo $fe_submenu; ?>" href="<?php echo $submenu['url']; ?>" class="admin-nav-item"><?php echo $submenu['text']; ?></a></li>
+                    <?php endif; endforeach; endif; else: echo "" ;endif; ?>
+                </ul>
+            </li>
+            <?php else: ?>
+                <li class="treeview">
+                    <div class="title" id="navT"><i class="iconfont icon-<?php echo $fe_menu; ?>"></i><a data-id="<?php echo $fe_menu; ?>" href="<?php echo $menu['url']; ?>" class="admin-nav-item"><?php echo $menu['text']; ?></a></div>
+                </li>
+            <?php endif; endforeach; endif; else: echo "" ;endif; ?>
+        </ul>
+    </div>
+
+    <div class="admincp-container-right">
+        <div class="layui-tab layui-tab-card" lay-filter="dsTab" lay-allowclose="true">
+            <ul class="layui-tab-title">
+                <li class="layui-this" lay-id="0">
+                    <cite><?php echo \think\Lang::get('ds_welcome'); ?></cite>
+                </li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                    <iframe lay-id="0" src="<?php echo url('Wlcome/index'); ?>" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+</div>
+<script type="text/javascript">
+    var width =document.body.clientWidth;
+    var changesmall =function(){
+        if($(".admincp-container-left").css("width")=="200px"){
+            $(".admincp-container-left").css("width","55px");
+            $("#layout-center").css({"position":"absolute","left":"55px","width":(width-55)+"px"});
+            $(".title").attr('title',$(".title .title-txt").html())
+            $(".title .title-txt").css("display","none");
+            $('.admincp-container-right').css("left","55px");
+        }else{
+            $(".admincp-container-left").css("width","200px");
+            $("#layout-center").css({"position":"absolute","left":"130px","width":(width-130)+"px"});
+            $(".title").attr('title',"")
+            $(".title span").css("display","inline-block");
+            $('.admincp-container-right').css("left","200px");
+        }
+    }
+
+</script>
+<script type="text/javascript">
+    layui.use(['jquery', 'element', 'layer'], function () {
+        var $ = layui.jquery, element = layui.element, layer = layui.layer;
+        $('.layui-tab-content').height($(window).height() - 145);
+        var tab = {
+            add: function (title, url, id) {
+                element.tabAdd('dsTab', {
+                    title: title,
+                    content: '<iframe width="100%" height="100%" lay-id="' + id + '" frameborder="0" src="' + url + '" scrolling="yes" class="x-iframe"></iframe>',
+                    id: id
+                });
+            }, change: function (id) {
+                element.tabChange('dsTab', id);
+            }
+        };
+        $('.admin-nav-item').click(function (event) {
+            var that = $(this);
+            if ($('iframe[src="' + that.attr('href') + '"]')[0]) {
+                tab.change(that.attr('data-id'));
+                event.stopPropagation();
+                return false;
+            }
+            if ($('iframe').length == 20) {
+                layer.msg('最多可打开20个标签页');
+                return false;
+            }
+            that.css({color: '#fff'});
+            tab.add(that.text(), that.attr('href'), that.attr('data-id'));
+            tab.change(that.attr('data-id'));
+            event.stopPropagation();
+            return false;
+        });
+        $(document).on('click', '.layui-tab-close', function () {
+            $('.layui-nav-child a[data-id="' + $(this).parent('li').attr('lay-id') + '"]').css({color: 'rgba(255,255,255,.7)'});
+        });
+    });
+    $('#gloMenu').on('click', '#navT', function () {
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#navC').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#navC').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#navC').stop(true).slideUp(300);
+                parent.addClass('open').find('#navC').stop(true).slideDown(300);
+            }
+        }
+    })
+    $('#nav').on('click', '#nav1', function () {
+        var parent = $(this).closest('li');
+        var index = parent.index();
+        if (parent.find('#nav2').find('li').length) {
+            if (parent.hasClass('open')) {
+                parent.find('#nav2').stop(true).slideUp(300, function () {
+                    parent.removeClass('open')
+                });
+            } else {
+                var openLi = $('.sidebar-menu').find('li.open');
+                openLi.removeClass('open').find('#nav2').stop(true).slideUp(300);
+                parent.addClass('open').find('#nav2').stop(true).slideDown(300);
+            }
+        }
+    })
+</script>
+</body>
+
+
+</html>

+ 783 - 0
runtime/temp/212e2acb8d1ff94e46cf7e755bcd4848.php

@@ -0,0 +1,783 @@
+<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:71:"D:\wamp64\www\Home-WEB\public/../application/home\view\index\index.html";i:1557457117;}*/ ?>
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html lang="en" class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+    <!-- Mobile Specific Meta -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Always force latest IE rendering engine -->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- Meta Keyword -->
+    <meta name="keywords" content="one page, business template, single page, onepage, responsive, parallax, creative, business, html5, css3, css3 animation">
+    <!-- meta character set -->
+    <meta charset="utf-8">
+
+    <!-- Site Title -->
+    <title>AQM官网</title>
+
+    <!--
+    Google Fonts
+    ============================================= -->
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Baloo+Thambi|Slabo+27px" rel="stylesheet">
+
+    <!--
+    CSS
+    ============================================= -->
+    <!-- Fontawesome -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/font-awesome.min.css">
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/bootstrap.min.css">
+    <!-- Fancybox -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/jquery.fancybox.css">
+    <!-- owl carousel -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/owl.carousel.css">
+    <!-- Animate -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/animate.css">
+    <!-- Main Stylesheet -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/main.css">
+    <!-- Main Responsive -->
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/responsive.css">
+
+    <!-- Modernizer Script for old Browsers -->
+    <script src="<?php echo HOME_SITE_ROOT; ?>/js/vendor/modernizr-2.6.2.min.js"></script>
+
+</head>
+
+<body>
+
+<!--
+Fixed Navigation
+==================================== -->
+<header id="navigation" class="navbar-fixed-top">
+    <div class="container">
+
+        <div class="navbar-header">
+            <!-- responsive nav button -->
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <!-- /responsive nav button -->
+
+            <!-- logo -->
+            <!--<h1 class="navbar-brand">-->
+            <h1 class="">
+                <a href="#body">
+                    <img src="uploads/home/logo.png" width="40%">
+                    <!--<div class="site-logo"><span>K</span>eeper</div>-->
+                </a>
+            </h1>
+            <!-- /logo -->
+
+        </div>
+
+        <!-- main nav -->
+        <nav class="collapse navigation navbar-collapse navbar-right" role="navigation">
+            <ul id="nav" class="nav navbar-nav">
+                <?php if(is_array($navigation) || $navigation instanceof \think\Collection || $navigation instanceof \think\Paginator): if( count($navigation)==0 ) : echo "" ;else: foreach($navigation as $key=>$value): ?>
+                    <li><a href="#<?php echo $navigationId[$key]; ?>"><?php echo $value['navigation_zhName']; ?></a></li>
+                <?php endforeach; endif; else: echo "" ;endif; ?>
+                <!--<li><a href="#service">Service</a></li>
+                <li><a href="#portfolio">portfolio</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#pricing">Pricing</a></li>
+                <li><a href="#contact">Contact</a></li>-->
+            </ul>
+        </nav>
+        <!-- /main nav -->
+    </div>
+
+    </div>
+</header>
+<!--
+End Fixed Navigation
+==================================== -->
+
+
+<!--
+Home Slider
+==================================== -->
+<section id="home">
+    <div class="container">
+        <div class="home-intro">
+            <div class="animated bounceInRight">
+                <h2>HELLO Keeper <br>WE ARE KASPER,WE MAKE ART.</h2>
+                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam. Accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt accumsan id imperdiet.</p>
+                <ul class="list-inline available">
+                    <li><span>Available On :</span></li>
+                    <li><i class="fa fa-android"></i></li>
+                    <li><i class="fa fa-apple"></i></li>
+                    <li><i class="fa fa-windows"></i></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<!--
+End #home Slider
+========================== -->
+
+
+<!--
+#service
+========================== -->
+<section id="<?php echo $navigationId[1]; ?>">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="section-title text-center wow fadeInDown">
+                    <h2>Services</h2>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-4 col-sm-6 wow fadeInLeft">
+                <div class="media service-item">
+                    <a href="#" class="pull-left text-center">
+                        <div class="fact-icon">
+                            <i class="fa fa-cog fa-lg"></i>
+                        </div>
+                    </a>
+                    <div class="media-body">
+                        <h3>Google web fonts</h3>
+                        <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div> <!-- end .row -->
+    </div> <!-- end .container -->
+</section><div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >自助建站</a></div>
+<!--
+End #service
+========================== -->
+
+<!--
+#service-bottom
+========================== -->
+
+<section id="service-bottom">
+    <div class="container">
+        <div class="mobile-device">
+            <img data-wow-delay="0.2s" class="img-responsive black  wow fadeInLeftBig" src="img/iphone/iphone-black.png" alt="iPhone Black">
+            <img data-wow-delay="0.5s" class="img-responsive white  wow fadeInLeftBig" src="img/iphone/iphone-white.png" alt="iPhone White">
+        </div>
+        <div class="service-features wow fadeInRight">
+            <h3>Our Latest Services</h3>
+            <p>Curabitur arcu erat, accumsan iditea imperdiet et, porttitor at sem. Mauris blandit aliquet elit ciduntue.</p>
+            <ul>
+                <li><i class="fa fa-android"></i>Responsive Design</li>
+                <li><i class="fa fa-apple"></i>Modern And Clean Design</li>
+                <li><i class="fa fa-globe"></i>Browser Friendly</li>
+                <li><i class="fa fa-code"></i>Clean Code</li>
+            </ul>
+        </div>
+    </div>
+</section>
+<!--
+End #service-bottom
+========================== -->
+
+
+<!--
+#Portfolio
+========================== -->
+
+<section id="portfolio">
+
+    <div class="section-title text-center wow fadeInDown">
+        <h2>Portfolio</h2>
+        <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+    </div>
+
+    <nav class="project-filter clearfix text-center wow fadeInLeft"  data-wow-delay="0.5s">
+        <ul class="list-inline">
+            <li><a href="javascript:;" class="filter" data-filter="all">All</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".app">App</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".photography">Photography</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".web">Web</a></li>
+            <li><a href="javascript:;" class="filter" data-filter=".print">Print</a></li>
+        </ul>
+    </nav>
+
+    <div id="projects" class="clearfix">
+
+        <figure class="mix portfolio-item app">
+            <img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-1.jpg" title="Title One" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item photography">
+            <img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-2.jpg" title="Title Two" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item web">
+            <img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-3.jpg" title="Title Three" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item print">
+            <img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-4.jpg" title="Title Four" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item app">
+            <img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-4.jpg" title="Title Five" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item photography">
+            <img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-1.jpg" title="Title Six" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item web app">
+            <img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-2.jpg" title="Title Seven" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+        <figure class="mix portfolio-item print web">
+            <img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="Portfolio Item">
+            <a href="img/portfolio/portfolio-3.jpg" title="Title Eight" rel="portfolio" class="fancybox"><span class="plus"></span></a>
+        </figure>
+
+    </div> <!-- end #projects -->
+
+</section>
+<!--
+End #Portfolio
+========================== -->
+
+<!--
+#about
+========================== -->
+<section id="about">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-12">
+                <div class="section-title text-center wow fadeInUp">
+                    <h2>About Us</h2>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+                    <a class="btn btn-blue" role="button">Read More</a>
+                </div>
+            </div>
+            <div class="col-md-12 text-center">
+
+                <div class="about-us text-center wow fadeInDown">
+                    <img src="img/about.png" alt="About Us" class="img-responsive">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+<!--
+End #about
+========================== -->
+
+
+<!--
+#count
+========================== -->
+
+<section id="count">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="0.5s">
+                <div class="fact-item text-center">
+                    <div class="count-icon">
+                        <i class="fa fa-android"></i>
+                    </div>
+                    <span data-to="120">0</span>
+                    <p>Completed Projects</p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="0.8s">
+                <div class="fact-item text-center">
+                    <div class="count-icon">
+                        <i class="fa fa-users"></i>
+                    </div>
+                    <span data-to="152">0</span>
+                    <p>Satisfied Clients</p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="1.1s">
+                <div class="fact-item text-center last">
+                    <div class="count-icon">
+                        <i class="fa fa-clock-o"></i>
+                    </div>
+                    <span data-to="2500">0</span>
+                    <p>Working Hours</p>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInLeft" data-wow-delay="1.3s">
+                <div class="fact-item text-center last">
+                    <div class="count-icon">
+                        <i class="fa fa-trophy"></i>
+                    </div>
+                    <span data-to="150">0</span>
+                    <p>Award Won</p>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+<!--
+End #count
+========================== -->
+
+<!--
+#about-us
+========================== -->
+<section id="about-us">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-5 col-md-offset-1 wow fadeInLeft">
+
+                <div class="subtitle">
+                    <h3>Testimonials</h3>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc eifend eget turp.</p>
+                </div>
+
+                <div id="testimonial">
+
+                    <div class="tst-item clearfix">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/1.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>Albart Windy, CEO</span>
+                            </div>
+                        </div>
+
+                        <div class="tst-single clearfix">
+                            <img src="img/client/2.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tst-item">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/3.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                        <div class="tst-single clearfix">
+                            <img src="img/client/1.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tst-item">
+                        <div class="tst-single clearfix">
+                            <img src="img/client/2.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                        <div class="tst-single clearfix">
+                            <img src="img/client/3.jpg" alt="Client" class="img-responsive">
+                            <div class="tst-content">
+                                <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet.</p>
+                                <span>John Doe, CEO</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div> <!-- end #testimonial -->
+            </div> <!-- end .col-md-5 -->
+
+            <div class="col-md-5 col-md-offset-1 wow fadeInRight">
+
+                <div class="subtitle">
+                    <h3>OUR SKILLS</h3>
+                    <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc eifend eget turp.</p>
+                </div>
+
+                <div class="progress-bars">
+
+                    <span>HTML 5</span>
+                    <div class="progress"  data-progress="85">
+                        <div class="bar"><small>85%</small></div>
+                    </div>
+                    <span>CSS 3</span>
+                    <div class="progress"  data-progress="90">
+                        <div class="bar"><small>90%</small></div>
+                    </div>
+                    <span>PHP</span>
+                    <div class="progress" data-progress="65">
+                        <div class="bar"><small>65%</small></div>
+                    </div>
+                    <span>mySQL</span>
+                    <div class="progress kill-margin"  data-progress="50">
+                        <div class="bar"><small>50%</small></div>
+                    </div>
+
+                </div>  <!-- progress-bars -->
+
+            </div>  <!-- end .col-md-5 -->
+
+        </div>
+    </div>
+</section>
+<!--
+End #about-us
+========================== -->
+
+<!--
+#quotes
+========================== -->
+<section id="quotes">
+    <div class="container">
+        <div class="row wow zoomIn">
+            <div class="col-lg-12">
+                <div class="call-to-action text-center">
+                    <div class="twitter"><i class="fa fa-twitter"></i></div>
+                    <p>“ACCUMSAN ID CURABITUR ET PORTITOR MAURIS BLANDIT DOLOR LOREM SOME EST OUR DONEC STIN LORTIOS”</p>
+                    <span>Albart Windy, ThemeForest</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!--
+End #quotes
+========================== -->
+
+<!--
+#pricing
+========================== -->
+<section id="pricing">
+    <div class="container">
+        <div class="row">
+
+            <div class="section-title text-center wow fadeInUp">
+                <h2>Pricing</h2>
+                <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-taxi"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Basic</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.3s">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-ambulance"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Premium</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.6s">
+                <div class="pricing-table highlight text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-rocket"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Pro</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+
+            <div class="col-md-3 col-sm-6 col-xs-12 wow fadeInUp" data-wow-delay="0.9s">
+                <div class="pricing-table text-center">
+                    <div class="plan-icon">
+                        <i class="fa fa-plane"></i>
+                    </div>
+                    <div class="plan-title">
+                        <span class="plan">Platinum</span>
+                    </div>
+                    <div class="price">
+                        <span class="value"><small>$</small><strong>19</strong>/MO</span>
+                    </div>
+                    <ul class="text-center">
+                        <li>condimen tum velit</li>
+                        <li>Aliquam condimen</li>
+                        <li>sapien dignissim</li>
+                        <li>Psapien dignis</li>
+                    </ul>
+                    <a href="#" class="btn btn-price">Buy Now</a>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 wow fadeInUp">
+                <div class="special-plan text-center">
+                    <p>Contact us if you have special request</p>
+                    <a href="#" class="btn btn-blue">Contact Us</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!--
+End #pricing
+========================== -->
+
+
+<!--
+#subscribe
+========================== -->
+<section id="subscribe">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-md-4 col-sm-5 col-xs-12 text-left wow fadeInRight">
+                <div class="subscribe-man"><img class="img-responsive" src="img/young-men.png" /></div>
+            </div>
+            <div class="col-md-7 col-sm-7 col-xs-12 wow fadeInLeft">
+                <form action="#" method="post" class="subscription-form">
+                    <i class="fa fa-envelope-o fa-lg"></i>
+                    <input type="email" name="subscribe" class="subscribe" placeholder="YOUR MAIL">
+                    <input type="submit" value="SUBSCRIBE" id="mail-submit">
+                </form>
+            </div>
+
+        </div>
+    </div>
+</section>
+<!--
+End #subscribe
+========================== -->
+
+<!--
+#contact
+========================== -->
+<section id="contact">
+    <div class="container">
+        <div class="row">
+
+            <div class="section-title text-center wow fadeInDown">
+                <h2>Contact Us</h2>
+                <p>Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis.</p>
+            </div>
+
+            <div class="col-md-8 col-md-offset-2 wow fadeInLeft">
+                <div class="contact-form clearfix">
+                    <form class="text-center" action="index.html" method="post">
+                        <div class="input-field">
+                            <input type="text" class="form-control" name="name" placeholder="Your Name" required="">
+                        </div>
+                        <div class="input-field">
+                            <input type="email" class="form-control" name="email" placeholder="Your Email" required="">
+                        </div>
+                        <div class="input-field message">
+                            <textarea name="message" class="form-control" placeholder="Your Message" required></textarea>
+                        </div>
+                        <input type="submit" class="btn btn-blue" value="SEND MESSAGE" id="msg-submit">
+                    </form>
+                </div> <!-- end .contact-form -->
+            </div> <!-- .col-md-8 -->
+
+        </div>
+    </div>
+</section>
+<!--
+End #contact
+========================== -->
+
+<!--
+#footer
+========================== -->
+<footer id="footer" class="text-center">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12">
+
+                <div class="footer-social wow fadeInUp">
+                    <h3><span>K</span>eeper</h3>
+                    <ul class="text-center list-inline">
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-facebook fa-lg"></i>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-twitter fa-lg"></i>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="fact-icon">
+                                <i class="fa fa-google-plus fa-lg"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+
+                <div class="copyright">
+
+                    <p>Theme by Scripteden. Developed by Shaifuddin / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</footer>
+<!--
+End #footer
+========================== -->
+
+
+<!--
+JavaScripts
+========================== -->
+
+<!-- main jQuery -->
+<script src="js/vendor/jquery-1.11.1.min.js"></script>
+<!-- Bootstrap -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/bootstrap.min.js"></script>
+<!-- jquery.nav -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery.nav.js"></script>
+<!-- Portfolio Filtering -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery.mixitup.min.js"></script>
+<!-- Fancybox -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery.fancybox.pack.js"></script>
+<!-- Parallax sections -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery.parallax-1.1.3.js"></script>
+<!-- jQuery Appear -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery.appear.js"></script>
+<!-- countTo -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/jquery-countTo.js"></script>
+<!-- owl carousel -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/owl.carousel.min.js"></script>
+<!-- WOW script -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/wow.min.js"></script>
+<!-- theme custom scripts -->
+<script src="<?php echo HOME_SITE_ROOT; ?>/js/main.js"></script>
+</body>
+</html>

+ 116 - 0
runtime/temp/28b1060d85358e609cc4f8d9925b9c74.php

@@ -0,0 +1,116 @@
+<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:73:"D:\wamp64\www\Home-WEB\public/../application/admin\view\wlcome\index.html";i:1557391016;s:62:"D:\wamp64\www\Home-WEB\application\admin\view\layout\home.html";i:1557391016;}*/ ?>
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>麦帮官网</title>
+        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+        <!-- Bootstrap 3.3.7 -->
+        <link rel="stylesheet" href="<?php echo PLUGINS_SITE_ROOT; ?>/layui/css/layui.css">
+        <link rel="stylesheet" href="<?php echo ADMIN_SITE_ROOT; ?>/css/admin.css">
+        <link rel="stylesheet" href="<?php echo ADMIN_SITE_ROOT; ?>/iconfont/iconfont.css">
+        <script src="<?php echo PLUGINS_SITE_ROOT; ?>/jquery-2.1.4.min.js"></script>
+        <script src="<?php echo ADMIN_SITE_ROOT; ?>/js/admin.js"></script>
+        <script type="text/javascript" src="<?php echo PLUGINS_SITE_ROOT; ?>/layui/layui.js"></script>
+        <script type="text/javascript">
+            var BASESITEROOT = "<?php echo BASE_SITE_ROOT; ?>";
+            var ADMINSITEROOT = "<?php echo ADMIN_SITE_ROOT; ?>";
+            var BASESITEURL = "<?php echo BASE_SITE_URL; ?>";
+            var HOMESITEURL = "<?php echo HOME_SITE_URL; ?>";
+            var ADMINSITEURL = "<?php echo ADMIN_SITE_URL; ?>";
+            layui.use('layer', function () {
+                var layer = layui.layer;
+            });
+        </script>
+    </head>
+    <body>
+        
+<div class="layui-tab-content page-tab-content">
+    <h1><?php echo \think\Lang::get('wel_version_info'); ?></h1>
+    <table class="layui-table lay-even">
+        <colgroup>
+            <col width="300">
+            <col width="530">
+        </colgroup>
+        <tbody>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_version'); ?></td>
+            <td><?php echo $statistics['version']; ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_install_date'); ?></td>
+            <td><?php if(!(empty($statistics['setup_date']) || (($statistics['setup_date'] instanceof \think\Collection || $statistics['setup_date'] instanceof \think\Paginator ) && $statistics['setup_date']->isEmpty()))): ?>$statistics['setup_date']<?php else: ?><?php echo \think\Lang::get('temporary_installation'); endif; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_program_development'); ?></td>
+            <td><?php echo \think\Lang::get('wel_deshangwangluo'); ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_all_right_reserved'); ?></td>
+            <td><?php echo \think\Lang::get('wel_piracy_must_be_studied'); ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_aboutus_website'); ?></td>
+            <td><a href="http://www.csdeshang.com" target="_blank"><?php echo \think\Lang::get('aboutus_website'); ?></a></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_aboutus_bbs'); ?></td>
+            <td><a href="http://bbs.csdeshang.com" target="_blank"><?php echo \think\Lang::get('wel_communication_bbs'); ?></a></td>
+        </tr>
+        </tbody>
+    </table>
+
+    <h1><?php echo \think\Lang::get('wel_sys_info'); ?></h1>
+    <table class="layui-table lay-even">
+        <colgroup>
+            <col width="300">
+            <col width="530">
+        </colgroup>
+        <tbody>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_thinkphp_version'); ?></td>
+            <td><?php echo THINK_VERSION; ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_class_library_file_suffix'); ?></td>
+            <td><?php echo EXT; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_server_os'); ?></td>
+            <td><?php echo $statistics['os']; ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_server_domain_ip'); ?></td>
+            <td><?php echo $statistics['domain']; ?> [ <?php echo $statistics['ip']; ?> ]</td>
+        </tr>
+        <tr>
+            <td class="gray_bg">WEB <?php echo \think\Lang::get('wel_server'); ?></td>
+            <td><?php echo $statistics['web_server']; ?></td>
+            <td class="gray_bg">PHP <?php echo \think\Lang::get('wel_version'); ?></td>
+            <td><?php echo $statistics['php_version']; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg">MYSQL <?php echo \think\Lang::get('wel_version'); ?></td>
+            <td><?php echo $statistics['sql_version']; ?></td>
+            <td class="gray_bg">GD <?php echo \think\Lang::get('wel_version'); ?></td>
+            <td><?php echo $statistics['gdinfo']; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_file_uplode_limit'); ?></td>
+            <td><?php echo $statistics['fileupload']; ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_max_occupied_memory'); ?></td>
+            <td><?php echo $statistics['memory_limit']; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_max_ex_time'); ?></td>
+            <td><?php echo $statistics['max_ex_time']; ?></td>
+            <td class="gray_bg"><?php echo \think\Lang::get('wel_safe_mode'); ?></td>
+            <td><?php echo $statistics['safe_mode']; ?></td>
+        </tr>
+        <tr>
+            <td class="gray_bg">Zlib <?php echo \think\Lang::get('wel_support'); ?></td>
+            <td><?php echo $statistics['zlib']; ?></td>
+            <td class="gray_bg">Curl <?php echo \think\Lang::get('wel_support'); ?></td>
+            <td><?php echo $statistics['curl']; ?></td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+
+    </body>
+</html>
+
+
+

+ 54 - 0
runtime/temp/9472d155ad46f0eb15c712768d66cbf5.php

@@ -0,0 +1,54 @@
+<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:71:"D:\wamp64\www\Home-WEB\public/../application/home\view\login\index.html";i:1557391016;}*/ ?>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>麦帮官网</title>
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <!-- Bootstrap 3.3.7 -->
+    <link rel="stylesheet" href="<?php echo PLUGINS_SITE_ROOT; ?>/layui/css/layui.css">
+    <link rel="stylesheet" href="<?php echo HOME_SITE_ROOT; ?>/css/admin.css">
+    <script src="<?php echo PLUGINS_SITE_ROOT; ?>/jquery-2.1.4.min.js"></script>
+    <script src="<?php echo HOME_SITE_ROOT; ?>/js/admin.js"></script>
+    <link rel="stylesheet" href="<?php echo PLUGINS_SITE_ROOT; ?>/font-awesome/css/font-awesome.min.css">
+    <script type="text/javascript">
+        var BASESITEROOT = "<?php echo BASE_SITE_ROOT; ?>";
+        var ADMINSITEROOT = "<?php echo HOME_SITE_ROOT; ?>";
+        var BASESITEURL = "<?php echo BASE_SITE_URL; ?>";
+        var HOMESITEURL = "<?php echo HOME_SITE_URL; ?>";
+        var ADMINSITEURL = "<?php echo ADMIN_SITE_URL; ?>";
+    </script>
+</head>
+<body style="background-image:url(<?php echo HOME_SITE_ROOT; ?>/wallpage/bg_<?php echo rand(0,8)?>.jpg);background-size: cover;">
+<div class="login">
+    <div class="login_body">
+        <div class="login_header">
+            <img style="margin: 0px auto; display: block; margin-bottom: 10px;" src="<?php echo HOME_SITE_ROOT; ?>/images/logo.png"/>
+        </div>
+        <div class="login_content">
+            <form method="post">
+                <div class="form-group">
+                    <input type="text" name="service_name" placeholder="<?php echo lang('login_admin_name'); ?>" required class="text">
+                </div>
+                <div class="form-group">
+                    <input type="password" name="service_password" placeholder="<?php echo lang('login_admin_password'); ?>" required class="text">
+                </div>
+                <div class="form-group">
+                    <input type="text" name="captcha" placeholder="<?php echo lang('login_captcha'); ?>" required class="text" style="width:60%;float:left;">
+                    <img src="<?php echo captcha_src(); ?>" style="width:30%;height:38px;" id="change_captcha"/>
+                </div>
+                <div class="form-group">
+                    <input type="submit" class="layui-btn" value="<?php echo lang('login_sumbit'); ?>" lay-submit lay-filter="login"/>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script>
+    $('#change_captcha').click(function () {
+        $(this).attr('src', '<?php echo captcha_src(); ?>?'+(new Date().getTime()));
+    });
+</script>
+</body>
+</html>

部分文件因为文件数量过多而无法显示