il y a 3 ans · eca77faf75
--- a/case.html
+++ b/case.html
@@ -0,0 +1,180 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup">
			
 
				+				<div class="templateHead haveBg">
			
 
				+					<h3 class="template_title">经典案例</h3>
			
 
				+					<!-- <h3 class="subheading">副标题副标题副标题</h3> -->
			
 
				+					<p class="template_dis">我们严格按照用户的需求 协调沟通好每一个项目方案，针对各行业务特性，<br>为您打造“专属定制”式的软件服务生态。 </p>
			
 
				+				</div>
			
 
				+				<div class="templateCard">
			
 
				+
			
 
				+					<div class="swiper-container">
			
 
				+						<div class="swiper-wrapper">
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="project-HRJP.html" class="content_itemA">
			
 
				+										<div class="item-container">
			
 
				+											<img class="item_img2" src="./img/case1.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>华人家谱</h3>
			
 
				+											<p>华人家谱集修谱，家庭档案记录，亲情社交，传统国学教育于一体的综合性服务APP。</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="project-JZ.html" class="content_itemA">
			
 
				+										<div class="item-container">
			
 
				+											<img class="item_img2" src="./img/case2.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>金砖</h3>
			
 
				+											<p>以红包形式代替传统广告,利用数据分析以及地理定位,获得更好的产品宣传效果。</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+									
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="project-ZNMS.html" class="content_itemA">
			
 
				+										<div class="item-container">
			
 
				+											<img class="item_img2" src="./img/case3.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>酒店智能门锁</h3>
			
 
				+											<p>基于“平台+终端+应用”全方位打造升级,让酒店进入智能时代！</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+									
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="project-YS.html" class="content_itemA">
			
 
				+										<div class="item-container">
			
 
				+											<img class="item_img2" src="./img/case4.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>驿送</h3>
			
 
				+											<p>本地即时配送平台,同城快送,一对一专人急送,1小时送达,同城快递文件、合同、发票...</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+									
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="project-MHLY.html" class="content_itemA">
			
 
				+										<div class="item-container">
			
 
				+											<img class="item_img2" src="./img/case5.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>旅游盲盒</h3>
			
 
				+											<p>优质景区免费门票的盲盒“彩蛋”等待开启，神秘、随机、刺激的体验，让消费者欲罢不能.</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+									
			
 
				+								</div>
			
 
				+							</div>
			
 
				+						</div>
			
 
				+					</div>
			
 
				+
			
 
				+
			
 
				+				</div>
			
 
				+
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot fiexdFoot"><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+		</div>
			
 
				+		
			
 
				+		<script>
			
 
				+		
			
 
				+		    var swiper = new Swiper('.swiper-container', {
			
 
				+		      slidesPerView: 4,
			
 
				+		      spaceBetween: 50,
			
 
				+			  centeredSlides: true,
			
 
				+			  loop: true,
			
 
				+		      pagination: {
			
 
				+		        el: '.swiper-pagination',
			
 
				+		        clickable: true,
			
 
				+		      },
			
 
				+		    });
			
 
				+		  
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/css/component.css
+++ b/css/component.css
@@ -0,0 +1,821 @@
 
				+/* General styles for the modal */
			
 
				+
			
 
				+/* 
			
 
				+Styles for the html/body for special modal where we want 3d effects
			
 
				+Note that we need a container wrapping all content on the page for the 
			
 
				+perspective effects (not including the modals and the overlay).
			
 
				+*/
			
 
				+.mode-head{
			
 
				+	padding:  30px 40px !important;
			
 
				+	font-weight: normal;
			
 
				+	color: #FFF;
			
 
				+	background-color: #1170ff;
			
 
				+	font-size: 15px;
			
 
				+	text-align: center;
			
 
				+	position: relative;
			
 
				+}
			
 
				+.mode-head img{
			
 
				+	position: absolute;
			
 
				+	right: 20px;
			
 
				+	top: 28px;
			
 
				+	width: 24px;
			
 
				+	height: 24px;
			
 
				+	cursor: pointer;
			
 
				+}
			
 
				+.mode-foot{
			
 
				+	padding:  0 0 30px !important;
			
 
				+}
			
 
				+
			
 
				+.content-img{
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	align-items: center;
			
 
				+	justify-content: center;
			
 
				+	/* background-color: rgba(0,0,0,.1); */
			
 
				+}
			
 
				+.mode-content{
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	align-items: center;
			
 
				+	justify-content: center;
			
 
				+	padding: 40px 20px;
			
 
				+}
			
 
				+.mode-content img{
			
 
				+	width: 224px;
			
 
				+	height: 224px;
			
 
				+	border-radius: 3px;
			
 
				+	box-shadow: 0 10px 20px rgba(0,0,0,.05);
			
 
				+}
			
 
				+
			
 
				+.md-content {
			
 
				+	background: #FFF;
			
 
				+	position: relative;
			
 
				+	border-radius: 6px;
			
 
				+	margin: 0 auto;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+/* .md-close {
			
 
				+	border: none;
			
 
				+	padding: 10px 20px;
			
 
				+	background-color:#1170ff;
			
 
				+	color: #fff;
			
 
				+	font-family: 'Lato', Calibri, Arial, sans-serif;
			
 
				+	font-size: 14px;
			
 
				+	letter-spacing: 1px;
			
 
				+	text-transform: uppercase;
			
 
				+	cursor: pointer;
			
 
				+	display: inline-block;
			
 
				+	border-radius: 6px;
			
 
				+} */
			
 
				+
			
 
				+.md-perspective,
			
 
				+.md-perspective body {
			
 
				+	height: 100%;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.md-perspective body {
			
 
				+	background: #222;
			
 
				+	-webkit-perspective: 600px;
			
 
				+	-moz-perspective: 600px;
			
 
				+	perspective: 600px;
			
 
				+}
			
 
				+
			
 
				+.container {
			
 
				+	background: #e74c3c;
			
 
				+	min-height: 100%;
			
 
				+}
			
 
				+
			
 
				+.md-modal {
			
 
				+	position: fixed;
			
 
				+	top: 50%;
			
 
				+	left: 50%;
			
 
				+	/* width: 50%; */
			
 
				+	max-width: 630px;
			
 
				+	min-width: 320px;
			
 
				+	height: auto;
			
 
				+	z-index: 2000;
			
 
				+	visibility: hidden;
			
 
				+	-webkit-backface-visibility: hidden;
			
 
				+	-moz-backface-visibility: hidden;
			
 
				+	backface-visibility: hidden;
			
 
				+	-webkit-transform: translateX(-50%) translateY(-50%);
			
 
				+	-moz-transform: translateX(-50%) translateY(-50%);
			
 
				+	-ms-transform: translateX(-50%) translateY(-50%);
			
 
				+	transform: translateX(-50%) translateY(-50%);
			
 
				+}
			
 
				+
			
 
				+.md-show {
			
 
				+	visibility: visible;
			
 
				+}
			
 
				+
			
 
				+.md-overlay {
			
 
				+	position: fixed;
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+	visibility: hidden;
			
 
				+	top: 0;
			
 
				+	left: 0;
			
 
				+	z-index: 1000;
			
 
				+	opacity: 0;
			
 
				+	background: rgba(0, 0, 0, 0.5);
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show~.md-overlay {
			
 
				+	opacity: 1;
			
 
				+	visibility: visible;
			
 
				+}
			
 
				+
			
 
				+/* Content styles */
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+.md-content>div p {
			
 
				+	margin: 0;
			
 
				+	padding: 10px 0;
			
 
				+}
			
 
				+
			
 
				+.md-content>div ul {
			
 
				+	margin: 0;
			
 
				+	padding: 0 0 30px 20px;
			
 
				+}
			
 
				+
			
 
				+.md-content>div ul li {
			
 
				+	padding: 5px 0;
			
 
				+}
			
 
				+
			
 
				+.md-content button {
			
 
				+	display: block;
			
 
				+	margin: 0 auto;
			
 
				+	font-size: 0.8em;
			
 
				+}
			
 
				+
			
 
				+/* Individual modal styles with animations/transitions */
			
 
				+
			
 
				+/* Effect 1: Fade in and scale up */
			
 
				+.md-effect-1 .md-content {
			
 
				+	-webkit-transform: scale(0.7);
			
 
				+	-moz-transform: scale(0.7);
			
 
				+	-ms-transform: scale(0.7);
			
 
				+	transform: scale(0.7);
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-1 .md-content {
			
 
				+	-webkit-transform: scale(1);
			
 
				+	-moz-transform: scale(1);
			
 
				+	-ms-transform: scale(1);
			
 
				+	transform: scale(1);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 2: Slide from the right */
			
 
				+.md-effect-2 .md-content {
			
 
				+	-webkit-transform: translateX(20%);
			
 
				+	-moz-transform: translateX(20%);
			
 
				+	-ms-transform: translateX(20%);
			
 
				+	transform: translateX(20%);
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
			
 
				+	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
			
 
				+	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-2 .md-content {
			
 
				+	-webkit-transform: translateX(0);
			
 
				+	-moz-transform: translateX(0);
			
 
				+	-ms-transform: translateX(0);
			
 
				+	transform: translateX(0);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 3: Slide from the bottom */
			
 
				+.md-effect-3 .md-content {
			
 
				+	-webkit-transform: translateY(20%);
			
 
				+	-moz-transform: translateY(20%);
			
 
				+	-ms-transform: translateY(20%);
			
 
				+	transform: translateY(20%);
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-3 .md-content {
			
 
				+	-webkit-transform: translateY(0);
			
 
				+	-moz-transform: translateY(0);
			
 
				+	-ms-transform: translateY(0);
			
 
				+	transform: translateY(0);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 4: Newspaper */
			
 
				+.md-effect-4 .md-content {
			
 
				+	-webkit-transform: scale(0) rotate(720deg);
			
 
				+	-moz-transform: scale(0) rotate(720deg);
			
 
				+	-ms-transform: scale(0) rotate(720deg);
			
 
				+	transform: scale(0) rotate(720deg);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-4~.md-overlay,
			
 
				+.md-effect-4 .md-content {
			
 
				+	-webkit-transition: all 0.5s;
			
 
				+	-moz-transition: all 0.5s;
			
 
				+	transition: all 0.5s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-4 .md-content {
			
 
				+	-webkit-transform: scale(1) rotate(0deg);
			
 
				+	-moz-transform: scale(1) rotate(0deg);
			
 
				+	-ms-transform: scale(1) rotate(0deg);
			
 
				+	transform: scale(1) rotate(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 5: fall */
			
 
				+.md-effect-5.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-5 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: translateZ(600px) rotateX(20deg);
			
 
				+	-moz-transform: translateZ(600px) rotateX(20deg);
			
 
				+	-ms-transform: translateZ(600px) rotateX(20deg);
			
 
				+	transform: translateZ(600px) rotateX(20deg);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-5 .md-content {
			
 
				+	-webkit-transition: all 0.3s ease-in;
			
 
				+	-moz-transition: all 0.3s ease-in;
			
 
				+	transition: all 0.3s ease-in;
			
 
				+	-webkit-transform: translateZ(0px) rotateX(0deg);
			
 
				+	-moz-transform: translateZ(0px) rotateX(0deg);
			
 
				+	-ms-transform: translateZ(0px) rotateX(0deg);
			
 
				+	transform: translateZ(0px) rotateX(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 6: side fall */
			
 
				+.md-effect-6.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-6 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
			
 
				+	-moz-transform: translate(30%) translateZ(600px) rotate(10deg);
			
 
				+	-ms-transform: translate(30%) translateZ(600px) rotate(10deg);
			
 
				+	transform: translate(30%) translateZ(600px) rotate(10deg);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-6 .md-content {
			
 
				+	-webkit-transition: all 0.3s ease-in;
			
 
				+	-moz-transition: all 0.3s ease-in;
			
 
				+	transition: all 0.3s ease-in;
			
 
				+	-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
			
 
				+	-moz-transform: translate(0%) translateZ(0) rotate(0deg);
			
 
				+	-ms-transform: translate(0%) translateZ(0) rotate(0deg);
			
 
				+	transform: translate(0%) translateZ(0) rotate(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 7:  slide and stick to top */
			
 
				+.md-effect-7 {
			
 
				+	top: 0;
			
 
				+	-webkit-transform: translateX(-50%);
			
 
				+	-moz-transform: translateX(-50%);
			
 
				+	-ms-transform: translateX(-50%);
			
 
				+	transform: translateX(-50%);
			
 
				+}
			
 
				+
			
 
				+.md-effect-7 .md-content {
			
 
				+	-webkit-transform: translateY(-200%);
			
 
				+	-moz-transform: translateY(-200%);
			
 
				+	-ms-transform: translateY(-200%);
			
 
				+	transform: translateY(-200%);
			
 
				+	-webkit-transition: all .3s;
			
 
				+	-moz-transition: all .3s;
			
 
				+	transition: all .3s;
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-7 .md-content {
			
 
				+	-webkit-transform: translateY(0%);
			
 
				+	-moz-transform: translateY(0%);
			
 
				+	-ms-transform: translateY(0%);
			
 
				+	transform: translateY(0%);
			
 
				+	border-radius: 0 0 3px 3px;
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 8: 3D flip horizontal */
			
 
				+.md-effect-8.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-8 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: rotateY(-70deg);
			
 
				+	-moz-transform: rotateY(-70deg);
			
 
				+	-ms-transform: rotateY(-70deg);
			
 
				+	transform: rotateY(-70deg);
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-8 .md-content {
			
 
				+	-webkit-transform: rotateY(0deg);
			
 
				+	-moz-transform: rotateY(0deg);
			
 
				+	-ms-transform: rotateY(0deg);
			
 
				+	transform: rotateY(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 9: 3D flip vertical */
			
 
				+.md-effect-9.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-9 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: rotateX(-70deg);
			
 
				+	-moz-transform: rotateX(-70deg);
			
 
				+	-ms-transform: rotateX(-70deg);
			
 
				+	transform: rotateX(-70deg);
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-9 .md-content {
			
 
				+	-webkit-transform: rotateX(0deg);
			
 
				+	-moz-transform: rotateX(0deg);
			
 
				+	-ms-transform: rotateX(0deg);
			
 
				+	transform: rotateX(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 10: 3D sign */
			
 
				+.md-effect-10.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-10 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: rotateX(-60deg);
			
 
				+	-moz-transform: rotateX(-60deg);
			
 
				+	-ms-transform: rotateX(-60deg);
			
 
				+	transform: rotateX(-60deg);
			
 
				+	-webkit-transform-origin: 50% 0;
			
 
				+	-moz-transform-origin: 50% 0;
			
 
				+	transform-origin: 50% 0;
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-10 .md-content {
			
 
				+	-webkit-transform: rotateX(0deg);
			
 
				+	-moz-transform: rotateX(0deg);
			
 
				+	-ms-transform: rotateX(0deg);
			
 
				+	transform: rotateX(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 11: Super scaled */
			
 
				+.md-effect-11 .md-content {
			
 
				+	-webkit-transform: scale(2);
			
 
				+	-moz-transform: scale(2);
			
 
				+	-ms-transform: scale(2);
			
 
				+	transform: scale(2);
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-11 .md-content {
			
 
				+	-webkit-transform: scale(1);
			
 
				+	-moz-transform: scale(1);
			
 
				+	-ms-transform: scale(1);
			
 
				+	transform: scale(1);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 12:  Just me */
			
 
				+.md-effect-12 .md-content {
			
 
				+	-webkit-transform: scale(0.8);
			
 
				+	-moz-transform: scale(0.8);
			
 
				+	-ms-transform: scale(0.8);
			
 
				+	transform: scale(0.8);
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-12~.md-overlay {
			
 
				+	background: #e74c3c;
			
 
				+}
			
 
				+
			
 
				+.md-effect-12 .md-content h3,
			
 
				+.md-effect-12 .md-content {
			
 
				+	background: transparent;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-12 .md-content {
			
 
				+	-webkit-transform: scale(1);
			
 
				+	-moz-transform: scale(1);
			
 
				+	-ms-transform: scale(1);
			
 
				+	transform: scale(1);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 13: 3D slit */
			
 
				+.md-effect-13.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-13 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: translateZ(-3000px) rotateY(90deg);
			
 
				+	-moz-transform: translateZ(-3000px) rotateY(90deg);
			
 
				+	-ms-transform: translateZ(-3000px) rotateY(90deg);
			
 
				+	transform: translateZ(-3000px) rotateY(90deg);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-13 .md-content {
			
 
				+	-webkit-animation: slit .7s forwards ease-out;
			
 
				+	-moz-animation: slit .7s forwards ease-out;
			
 
				+	animation: slit .7s forwards ease-out;
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes slit {
			
 
				+	50% {
			
 
				+		-webkit-transform: translateZ(-250px) rotateY(89deg);
			
 
				+		opacity: .5;
			
 
				+		-webkit-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		-webkit-transform: translateZ(0) rotateY(0deg);
			
 
				+		opacity: 1;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@-moz-keyframes slit {
			
 
				+	50% {
			
 
				+		-moz-transform: translateZ(-250px) rotateY(89deg);
			
 
				+		opacity: .5;
			
 
				+		-moz-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		-moz-transform: translateZ(0) rotateY(0deg);
			
 
				+		opacity: 1;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@keyframes slit {
			
 
				+	50% {
			
 
				+		transform: translateZ(-250px) rotateY(89deg);
			
 
				+		opacity: 1;
			
 
				+		animation-timing-function: ease-in;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		transform: translateZ(0) rotateY(0deg);
			
 
				+		opacity: 1;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+/* Effect 14:  3D Rotate from bottom */
			
 
				+.md-effect-14.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-14 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: translateY(100%) rotateX(90deg);
			
 
				+	-moz-transform: translateY(100%) rotateX(90deg);
			
 
				+	-ms-transform: translateY(100%) rotateX(90deg);
			
 
				+	transform: translateY(100%) rotateX(90deg);
			
 
				+	-webkit-transform-origin: 0 100%;
			
 
				+	-moz-transform-origin: 0 100%;
			
 
				+	transform-origin: 0 100%;
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s ease-out;
			
 
				+	-moz-transition: all 0.3s ease-out;
			
 
				+	transition: all 0.3s ease-out;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-14 .md-content {
			
 
				+	-webkit-transform: translateY(0%) rotateX(0deg);
			
 
				+	-moz-transform: translateY(0%) rotateX(0deg);
			
 
				+	-ms-transform: translateY(0%) rotateX(0deg);
			
 
				+	transform: translateY(0%) rotateX(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 15:  3D Rotate in from left */
			
 
				+.md-effect-15.md-modal {
			
 
				+	-webkit-perspective: 1300px;
			
 
				+	-moz-perspective: 1300px;
			
 
				+	perspective: 1300px;
			
 
				+}
			
 
				+
			
 
				+.md-effect-15 .md-content {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+	-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
			
 
				+	-moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
			
 
				+	-ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
			
 
				+	transform: translateZ(100px) translateX(-30%) rotateY(90deg);
			
 
				+	-webkit-transform-origin: 0 100%;
			
 
				+	-moz-transform-origin: 0 100%;
			
 
				+	transform-origin: 0 100%;
			
 
				+	opacity: 0;
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-15 .md-content {
			
 
				+	-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
			
 
				+	-moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
			
 
				+	-ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
			
 
				+	transform: translateZ(0px) translateX(0%) rotateY(0deg);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 16:  Blur */
			
 
				+.md-show.md-effect-16~.md-overlay {
			
 
				+	background: rgba(180, 46, 32, 0.5);
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-16~.container {
			
 
				+	-webkit-filter: blur(3px);
			
 
				+	-moz-filter: blur(3px);
			
 
				+	filter: blur(3px);
			
 
				+}
			
 
				+
			
 
				+.md-effect-16 .md-content {
			
 
				+	-webkit-transform: translateY(-5%);
			
 
				+	-moz-transform: translateY(-5%);
			
 
				+	-ms-transform: translateY(-5%);
			
 
				+	transform: translateY(-5%);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-16~.container,
			
 
				+.md-effect-16 .md-content {
			
 
				+	-webkit-transition: all 0.3s;
			
 
				+	-moz-transition: all 0.3s;
			
 
				+	transition: all 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-16 .md-content {
			
 
				+	-webkit-transform: translateY(0);
			
 
				+	-moz-transform: translateY(0);
			
 
				+	-ms-transform: translateY(0);
			
 
				+	transform: translateY(0);
			
 
				+	opacity: 1;
			
 
				+}
			
 
				+
			
 
				+/* Effect 17:  Slide in from bottom with perspective on container */
			
 
				+.md-show.md-effect-17~.container {
			
 
				+	height: 100%;
			
 
				+	overflow: hidden;
			
 
				+	-webkit-transition: -webkit-transform 0.3s;
			
 
				+	-moz-transition: -moz-transform 0.3s;
			
 
				+	transition: transform 0.3s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-17~.container,
			
 
				+.md-show.md-effect-17~.md-overlay {
			
 
				+	-webkit-transform: rotateX(-2deg);
			
 
				+	-moz-transform: rotateX(-2deg);
			
 
				+	-ms-transform: rotateX(-2deg);
			
 
				+	transform: rotateX(-2deg);
			
 
				+	-webkit-transform-origin: 50% 0%;
			
 
				+	-moz-transform-origin: 50% 0%;
			
 
				+	transform-origin: 50% 0%;
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	transform-style: preserve-3d;
			
 
				+}
			
 
				+
			
 
				+.md-effect-17 .md-content {
			
 
				+	opacity: 0;
			
 
				+	-webkit-transform: translateY(200%);
			
 
				+	-moz-transform: translateY(200%);
			
 
				+	-ms-transform: translateY(200%);
			
 
				+	transform: translateY(200%);
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-17 .md-content {
			
 
				+	-webkit-transform: translateY(0);
			
 
				+	-moz-transform: translateY(0);
			
 
				+	-ms-transform: translateY(0);
			
 
				+	transform: translateY(0);
			
 
				+	opacity: 1;
			
 
				+	-webkit-transition: all 0.3s 0.2s;
			
 
				+	-moz-transition: all 0.3s 0.2s;
			
 
				+	transition: all 0.3s 0.2s;
			
 
				+}
			
 
				+
			
 
				+/* Effect 18:  Slide from right with perspective on container */
			
 
				+.md-show.md-effect-18~.container {
			
 
				+	height: 100%;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-18~.md-overlay {
			
 
				+	background: rgba(143, 27, 15, 0.8);
			
 
				+	-webkit-transition: all 0.5s;
			
 
				+	-moz-transition: all 0.5s;
			
 
				+	transition: all 0.5s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-18~.container,
			
 
				+.md-show.md-effect-18~.md-overlay {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-webkit-transform-origin: 0% 50%;
			
 
				+	-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	-moz-transform-origin: 0% 50%;
			
 
				+	-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
			
 
				+	transform-style: preserve-3d;
			
 
				+	transform-origin: 0% 50%;
			
 
				+	animation: rotateRightSideFirst 0.5s forwards ease-in;
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes rotateRightSideFirst {
			
 
				+	50% {
			
 
				+		-webkit-transform: translateZ(-50px) rotateY(5deg);
			
 
				+		-webkit-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		-webkit-transform: translateZ(-200px);
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@-moz-keyframes rotateRightSideFirst {
			
 
				+	50% {
			
 
				+		-moz-transform: translateZ(-50px) rotateY(5deg);
			
 
				+		-moz-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		-moz-transform: translateZ(-200px);
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@keyframes rotateRightSideFirst {
			
 
				+	50% {
			
 
				+		transform: translateZ(-50px) rotateY(5deg);
			
 
				+		animation-timing-function: ease-out;
			
 
				+	}
			
 
				+
			
 
				+	100% {
			
 
				+		transform: translateZ(-200px);
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+.md-effect-18 .md-content {
			
 
				+	-webkit-transform: translateX(200%);
			
 
				+	-moz-transform: translateX(200%);
			
 
				+	-ms-transform: translateX(200%);
			
 
				+	transform: translateX(200%);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-18 .md-content {
			
 
				+	-webkit-transform: translateX(0);
			
 
				+	-moz-transform: translateX(0);
			
 
				+	-ms-transform: translateX(0);
			
 
				+	transform: translateX(0);
			
 
				+	opacity: 1;
			
 
				+	-webkit-transition: all 0.5s 0.1s;
			
 
				+	-moz-transition: all 0.5s 0.1s;
			
 
				+	transition: all 0.5s 0.1s;
			
 
				+}
			
 
				+
			
 
				+/* Effect 19:  Slip in from the top with perspective on container */
			
 
				+.md-show.md-effect-19~.container {
			
 
				+	height: 100%;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-19~.md-overlay {
			
 
				+	-webkit-transition: all 0.5s;
			
 
				+	-moz-transition: all 0.5s;
			
 
				+	transition: all 0.5s;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-19~.container,
			
 
				+.md-show.md-effect-19~.md-overlay {
			
 
				+	-webkit-transform-style: preserve-3d;
			
 
				+	-webkit-transform-origin: 50% 100%;
			
 
				+	-webkit-animation: OpenTop 0.5s forwards ease-in;
			
 
				+	-moz-transform-style: preserve-3d;
			
 
				+	-moz-transform-origin: 50% 100%;
			
 
				+	-moz-animation: OpenTop 0.5s forwards ease-in;
			
 
				+	transform-style: preserve-3d;
			
 
				+	transform-origin: 50% 100%;
			
 
				+	animation: OpenTop 0.5s forwards ease-in;
			
 
				+}
			
 
				+
			
 
				+@-webkit-keyframes OpenTop {
			
 
				+	50% {
			
 
				+		-webkit-transform: rotateX(10deg);
			
 
				+		-webkit-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@-moz-keyframes OpenTop {
			
 
				+	50% {
			
 
				+		-moz-transform: rotateX(10deg);
			
 
				+		-moz-animation-timing-function: ease-out;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+@keyframes OpenTop {
			
 
				+	50% {
			
 
				+		transform: rotateX(10deg);
			
 
				+		animation-timing-function: ease-out;
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+.md-effect-19 .md-content {
			
 
				+	-webkit-transform: translateY(-200%);
			
 
				+	-moz-transform: translateY(-200%);
			
 
				+	-ms-transform: translateY(-200%);
			
 
				+	transform: translateY(-200%);
			
 
				+	opacity: 0;
			
 
				+}
			
 
				+
			
 
				+.md-show.md-effect-19 .md-content {
			
 
				+	-webkit-transform: translateY(0);
			
 
				+	-moz-transform: translateY(0);
			
 
				+	-ms-transform: translateY(0);
			
 
				+	transform: translateY(0);
			
 
				+	opacity: 1;
			
 
				+	-webkit-transition: all 0.5s 0.1s;
			
 
				+	-moz-transition: all 0.5s 0.1s;
			
 
				+	transition: all 0.5s 0.1s;
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 32em) {
			
 
				+	body {
			
 
				+		font-size: 75%;
			
 
				+	}
			
 
				+}
			
--- a/css/main.css
+++ b/css/main.css
@@ -0,0 +1,537 @@
 
				+@charset "utf-8";
			
 
				+
			
 
				+.fiexdFoot {
			
 
				+	position: fixed;
			
 
				+	bottom: 30px;
			
 
				+	z-index: 9999;
			
 
				+	color: #FFF;
			
 
				+	font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+.fiexdFoot a {
			
 
				+	color: #999;
			
 
				+}
			
 
				+
			
 
				+.blackfont a {
			
 
				+	color: #666;
			
 
				+}
			
 
				+
			
 
				+.pdb50px {
			
 
				+	padding-bottom: 50px;
			
 
				+}
			
 
				+
			
 
				+.margt50 {
			
 
				+	margin-top: 50px;
			
 
				+}
			
 
				+
			
 
				+.pageFoot {
			
 
				+	text-align: center;
			
 
				+	width: 100%;
			
 
				+	font-size: 14px;
			
 
				+	padding-bottom: 20px;
			
 
				+}
			
 
				+.pageFoot a{
			
 
				+	color: #999;
			
 
				+}
			
 
				+
			
 
				+* {
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+}
			
 
				+
			
 
				+li {
			
 
				+	list-style: none;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+	text-decoration: none !important;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+	position: fixed;
			
 
				+	left: 0;
			
 
				+	top: 0;
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+}
			
 
				+
			
 
				+.page {
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+	line-height: 0;
			
 
				+}
			
 
				+
			
 
				+.logo a {
			
 
				+	display: inline-block;
			
 
				+	width: 160px;
			
 
				+	height: 32px;
			
 
				+}
			
 
				+
			
 
				+.logo img {
			
 
				+	width: 160px;
			
 
				+	height: 32px;
			
 
				+}
			
 
				+
			
 
				+.swiper-slide {
			
 
				+	/* position: absolute;
			
 
				+	left: 0;
			
 
				+	top: 0;
			
 
				+	width: 100%;
			
 
				+	height: 100%; */
			
 
				+	/* padding-top: 70px; */
			
 
				+	/* padding-bottom: 70px; */
			
 
				+	box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.slide1 {
			
 
				+	background-image: url(../img/indexbg3.png);
			
 
				+	background-position: center;
			
 
				+	background-repeat: no-repeat;
			
 
				+	background-size: contain;
			
 
				+	background-color: #1170ff;
			
 
				+}
			
 
				+
			
 
				+.slide2 {
			
 
				+	background-image: url(../img/indexbg2.png);
			
 
				+	background-position: center;
			
 
				+	background-repeat: no-repeat;
			
 
				+	background-size: contain;
			
 
				+	background-color: #7611ff;
			
 
				+}
			
 
				+
			
 
				+.slide3 {
			
 
				+	background-image: url(../img/indexbg.png);
			
 
				+	background-position: center;
			
 
				+	background-repeat: no-repeat;
			
 
				+	background-size: contain;
			
 
				+	background-color: #9211ff;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+.navBar {
			
 
				+	position: fixed;
			
 
				+	left: 0;
			
 
				+	top: 0;
			
 
				+	width: 100%;
			
 
				+	height: 70px;
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+	justify-content: space-between;
			
 
				+	padding: 0 50px;
			
 
				+	box-sizing: border-box;
			
 
				+	z-index: 9999;
			
 
				+	background-color: rgba(255, 255, 255, .01);
			
 
				+}
			
 
				+
			
 
				+.nav-group ul {
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+}
			
 
				+
			
 
				+.nav-group ul li a {
			
 
				+	font-size: 15px;
			
 
				+	display: block;
			
 
				+	color: #FFF;
			
 
				+	margin: 0 30px;
			
 
				+	height: 70px;
			
 
				+	line-height: 70px;
			
 
				+	box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+.nav-group ul li a:hover,
			
 
				+.nav-group ul li .isActive {
			
 
				+	border-bottom: 3px solid #4eaaff;
			
 
				+}
			
 
				+
			
 
				+.nav-group ul li a span {
			
 
				+	font-size: 10px;
			
 
				+	padding-left: 4px;
			
 
				+	color: rgba(255, 255, 255, .5);
			
 
				+}
			
 
				+
			
 
				+.caseNav .nav-group ul li a {
			
 
				+	font-size: 15px;
			
 
				+	color: #333;
			
 
				+	margin: 0 30px;
			
 
				+	/* display: flex;
			
 
				+	flex-direction: column; */
			
 
				+}
			
 
				+
			
 
				+.caseNav .nav-group ul li a span {
			
 
				+	font-size: 10px;
			
 
				+	padding-left: 4px;
			
 
				+	color: #999;
			
 
				+}
			
 
				+
			
 
				+.slide-nr {
			
 
				+	max-width: 1200px;
			
 
				+	margin: 0 auto;
			
 
				+	height: 100%;
			
 
				+	padding-bottom: 70px;
			
 
				+	box-sizing: border-box;
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+	justify-content: space-between;
			
 
				+}
			
 
				+
			
 
				+.nr-text h1 {
			
 
				+	color: #FFF;
			
 
				+	margin-bottom: 50px;
			
 
				+	font-size: 36px;
			
 
				+	line-height: 1.6;
			
 
				+	font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+.nr-text .mainp {
			
 
				+	color: #FFFFFF;
			
 
				+	margin-bottom: 10px;
			
 
				+	font-size: 16px;
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+}
			
 
				+
			
 
				+.mainp img {
			
 
				+	margin: 0 20px;
			
 
				+}
			
 
				+
			
 
				+.tag {
			
 
				+	font-size: 0;
			
 
				+	margin-left: -12px;
			
 
				+	margin-top: 50px;
			
 
				+}
			
 
				+
			
 
				+.tag span {
			
 
				+	display: inline-block;
			
 
				+	padding: 10px 20px;
			
 
				+	font-size: 16px;
			
 
				+	color: #FFF;
			
 
				+	border: 1px solid rgba(255, 255, 255, .5);
			
 
				+	border-radius: 100px;
			
 
				+	margin: 12px;
			
 
				+	background-color: rgba(255, 255, 255, .1);
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.special {
			
 
				+	border: 2px dashed rgba(255, 255, 255, .5);
			
 
				+	padding: 20px 40px;
			
 
				+	border-radius: 4px;
			
 
				+	background-color: rgba(255, 255, 255, .05);
			
 
				+}
			
 
				+
			
 
				+/* 联系客服按钮 */
			
 
				+.flotDiv {
			
 
				+	position: fixed;
			
 
				+	right: 20px;
			
 
				+	bottom: 50px;
			
 
				+	background-color: transparent;
			
 
				+	border-radius: 3px;
			
 
				+	z-index: 999;
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li {
			
 
				+	position: relative;
			
 
				+}
			
 
				+
			
 
				+.blackfont {
			
 
				+	color: #666 !important;
			
 
				+}
			
 
				+
			
 
				+.popBox {
			
 
				+	position: absolute;
			
 
				+	width: 100px;
			
 
				+	height: 100px;
			
 
				+	right: 90px;
			
 
				+	top: 0;
			
 
				+	background-color: #FFF;
			
 
				+	display: none;
			
 
				+}
			
 
				+
			
 
				+.popBox img {
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul {
			
 
				+	padding: 0;
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a {
			
 
				+	display: block;
			
 
				+	width: 80px;
			
 
				+	padding: 10px 0;
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	align-items: center;
			
 
				+	background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a img {
			
 
				+	width: 50px;
			
 
				+	height: 50px;
			
 
				+	border-radius: 100px;
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a .kefuIcon {
			
 
				+	box-shadow: 0 3px 10px rgba(252, 86, 86, .4);
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a .kaidianIcon {
			
 
				+	box-shadow: 0 3px 10px rgba(159, 197, 42, .4);
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a .guanzhuIcon {
			
 
				+	box-shadow: 0 3px 10px rgba(21, 155, 255, .4);
			
 
				+}
			
 
				+
			
 
				+.flotDiv ul li a span {
			
 
				+	font-size: 14px;
			
 
				+	color: #fff;
			
 
				+	padding-top: 8px;
			
 
				+}
			
 
				+
			
 
				+/* case */
			
 
				+.caseNav {
			
 
				+	background-color: #FFF !important;
			
 
				+	box-shadow: 0 0 10px rgb(0, 0, 0, .05) !important;
			
 
				+}
			
 
				+
			
 
				+.caseGroup {
			
 
				+	padding-top: 70px;
			
 
				+	margin: 50px auto 0;
			
 
				+	width: 1600px;
			
 
				+}
			
 
				+
			
 
				+.caseGroup2 {
			
 
				+	width: 100%;
			
 
				+	padding-top: 70px;
			
 
				+	margin-top: 40px;
			
 
				+}
			
 
				+
			
 
				+.template_title {
			
 
				+	text-align: center;
			
 
				+	font-size: 32px;
			
 
				+	color: #3b3232;
			
 
				+	font-weight: normal;
			
 
				+}
			
 
				+
			
 
				+.template_dis {
			
 
				+	margin-top: 20px;
			
 
				+	text-align: center;
			
 
				+	line-height: 24px;
			
 
				+	font-size: 15px;
			
 
				+	color: #888;
			
 
				+}
			
 
				+
			
 
				+.templateHead {
			
 
				+	width: 1000px;
			
 
				+	margin: 0 auto 50px;
			
 
				+}
			
 
				+
			
 
				+.haveBg {
			
 
				+	background-image: url(../img/case.png);
			
 
				+	background-repeat: no-repeat;
			
 
				+	background-position: left top;
			
 
				+}
			
 
				+
			
 
				+.UsBg {
			
 
				+	background-image: url(../img/Us.png);
			
 
				+	background-repeat: no-repeat;
			
 
				+	background-position: left top;
			
 
				+}
			
 
				+
			
 
				+.staff {
			
 
				+	width: 340px !important;
			
 
				+	height: 480px;
			
 
				+	padding: 30px !important;
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	justify-content: space-between;
			
 
				+	box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
			
 
				+}
			
 
				+
			
 
				+.templateCard {
			
 
				+	display: flex;
			
 
				+	flex-wrap: wrap;
			
 
				+	align-items: center;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.content_itemA {
			
 
				+	line-height: 0;
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	align-items: center;
			
 
				+	padding: 20px;
			
 
				+	box-sizing: border-box;
			
 
				+	width: 380px;
			
 
				+}
			
 
				+
			
 
				+.subheading {
			
 
				+	margin-top: 30px;
			
 
				+	text-align: center;
			
 
				+	line-height: 30px;
			
 
				+	font-size: 18px;
			
 
				+	color: #584f4f;
			
 
				+	font-weight: normal;
			
 
				+}
			
 
				+
			
 
				+.item_text {
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	align-items: center;
			
 
				+	padding-top: 20px;
			
 
				+}
			
 
				+
			
 
				+.text-l {
			
 
				+	font-size: 14px !important;
			
 
				+	height: 110px;
			
 
				+	margin-top: 20px !important;
			
 
				+	text-overflow: -o-ellipsis-lastline;
			
 
				+	overflow: hidden;
			
 
				+	text-overflow: ellipsis;
			
 
				+	display: -webkit-box;
			
 
				+	-webkit-line-clamp: 5;
			
 
				+	line-clamp: 5;
			
 
				+	-webkit-box-orient: vertical;
			
 
				+	text-align: left !important;
			
 
				+}
			
 
				+
			
 
				+.seniority {
			
 
				+	color: #666 !important;
			
 
				+	font-size: 14px !important;
			
 
				+}
			
 
				+
			
 
				+.item_img2 {
			
 
				+	width: 100%;
			
 
				+	max-width: 260px;
			
 
				+	max-height: 476px;
			
 
				+}
			
 
				+
			
 
				+.item_img3 {
			
 
				+	width: 200px;
			
 
				+	height: 200px;
			
 
				+}
			
 
				+
			
 
				+.item_img {
			
 
				+	width: 100%;
			
 
				+	max-width: 120px;
			
 
				+	max-height: 120px;
			
 
				+}
			
 
				+
			
 
				+.item_text h3 {
			
 
				+	font-weight: normal;
			
 
				+	font-size: 18px;
			
 
				+	color: #333;
			
 
				+	line-height: 1;
			
 
				+}
			
 
				+
			
 
				+.item_text p {
			
 
				+	font-size: 15px;
			
 
				+	line-height: 1.5;
			
 
				+	text-align: center;
			
 
				+	color: #999;
			
 
				+	margin-bottom: 0;
			
 
				+	margin-top: 10px;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+/*鼠标移入显示二维码*/
			
 
				+
			
 
				+.item-container {
			
 
				+	position: relative;
			
 
				+	border-radius: 6px;
			
 
				+	overflow: hidden;
			
 
				+	box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
			
 
				+}
			
 
				+
			
 
				+.item-container2 {
			
 
				+	position: relative;
			
 
				+	border-radius: 4px;
			
 
				+	overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.erweicode {
			
 
				+	position: absolute;
			
 
				+	left: 0;
			
 
				+	top: 0;
			
 
				+	opacity: 0;
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	justify-content: center;
			
 
				+	align-items: center;
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+	background-color: #FFF;
			
 
				+	z-index: 999;
			
 
				+	box-sizing: border-box;
			
 
				+	border: 1px dashed #ddd;
			
 
				+	padding: 0 30px;
			
 
				+}
			
 
				+
			
 
				+.erweicode img {
			
 
				+	width: 100%;
			
 
				+}
			
 
				+
			
 
				+.scan {
			
 
				+	color: #9c9191;
			
 
				+	padding-top: 20px;
			
 
				+}
			
 
				+
			
 
				+/*翻页*/
			
 
				+
			
 
				+.paging {
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+	justify-content: space-between;
			
 
				+	margin-top: 30px;
			
 
				+}
			
 
				+
			
 
				+.paging a {
			
 
				+	display: inline-block;
			
 
				+	padding: 10px 15px;
			
 
				+	font-size: 14px;
			
 
				+	border: 1px solid #ddd;
			
 
				+	border-radius: 3px;
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+	flex-wrap: nowrap;
			
 
				+}
			
 
				+
			
 
				+.disabled a {
			
 
				+	color: #666 !important;
			
 
				+	background-color: #eee !important;
			
 
				+	border: 1px solid #eee !important;
			
 
				+}
			
 
				+
			
 
				+.disabled a:hover {
			
 
				+	color: #666 !important;
			
 
				+}
			
 
				+
			
 
				+.project-img {
			
 
				+	width: 100%;
			
 
				+	display: flex;
			
 
				+	align-items: center;
			
 
				+	justify-content: center;
			
 
				+	margin-top: 40px;
			
 
				+}
			
 
				+
			
 
				+.popBox {
			
 
				+	position: absolute;
			
 
				+	width: 100px;
			
 
				+	height: 100px;
			
 
				+	right: 90px;
			
 
				+	top: 0;
			
 
				+	background-color: #FFF;
			
 
				+	display: none;
			
 
				+}
			
 
				+
			
 
				+.popBox img {
			
 
				+	width: 100%;
			
 
				+	height: 100%;
			
 
				+}
			
--- a/css/swiper.min.css
+++ b/css/swiper.min.css
--- a/favicon.ico
+++ b/favicon.ico
--- a/img/Us.png
+++ b/img/Us.png
--- a/img/arrow.png
+++ b/img/arrow.png
--- a/img/avatar-cyq.png
+++ b/img/avatar-cyq.png
--- a/img/avatar-jdx.png
+++ b/img/avatar-jdx.png
--- a/img/avatar-ldl.png
+++ b/img/avatar-ldl.png
--- a/img/avatar-pqj.png
+++ b/img/avatar-pqj.png
--- a/img/avatar-shx.png
+++ b/img/avatar-shx.png
--- a/img/avatar-tyl.png
+++ b/img/avatar-tyl.png
--- a/img/banner1.png
+++ b/img/banner1.png
--- a/img/banner2.png
+++ b/img/banner2.png
--- a/img/banner3.png
+++ b/img/banner3.png
--- a/img/case.png
+++ b/img/case.png
--- a/img/case1.png
+++ b/img/case1.png
--- a/img/case2.png
+++ b/img/case2.png
--- a/img/case3.png
+++ b/img/case3.png
--- a/img/case4.png
+++ b/img/case4.png
--- a/img/case5.png
+++ b/img/case5.png
--- a/img/closeicon
+++ b/img/closeicon
--- a/img/erweiCode1.png
+++ b/img/erweiCode1.png
--- a/img/guanzhuIcon.png
+++ b/img/guanzhuIcon.png
--- a/img/gzh.png
+++ b/img/gzh.png
--- a/img/indexbg.png
+++ b/img/indexbg.png
--- a/img/indexbg2.png
+++ b/img/indexbg2.png
--- a/img/indexbg3.png
+++ b/img/indexbg3.png
--- a/img/kaidianIcon.png
+++ b/img/kaidianIcon.png
--- a/img/kefuIcon.png
+++ b/img/kefuIcon.png
--- a/img/logo-w.png
+++ b/img/logo-w.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/logo_04.png
+++ b/img/logo_04.png
--- a/img/lxwm.png
+++ b/img/lxwm.png
--- a/img/project-hrjp.png
+++ b/img/project-hrjp.png
--- a/img/project-jz.png
+++ b/img/project-jz.png
--- a/img/project-mhly.png
+++ b/img/project-mhly.png
--- a/img/project-ys.png
+++ b/img/project-ys.png
--- a/img/project-znms.png
+++ b/img/project-znms.png
--- a/img/tx1.png
+++ b/img/tx1.png
--- a/img/yht.png
+++ b/img/yht.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,163 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-首页</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="content">
			
 
				+			<div class="swiper-container page">
			
 
				+				<div class="navBar">
			
 
				+					<div class="logo"><a href="index.html"><img src="./img/logo-w.png" ></a></div>
			
 
				+					<div class="nav-group">
			
 
				+						<ul>
			
 
				+							<li><a href="index.html" class="isActive">首页<span>Home</span></a></li>
			
 
				+							<li><a href="case.html">案列<span>Case</span></a></li>
			
 
				+							<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+						</ul>
			
 
				+
			
 
				+					</div>
			
 
				+				</div>
			
 
				+				<div class="swiper-wrapper">
			
 
				+					<div class="swiper-slide slide1">
			
 
				+						<div class="slide-nr">
			
 
				+							<div class="nr-text">
			
 
				+								<img src="./img/yht.png">
			
 
				+								<h1>软件开发，我们是认真的。</h1>
			
 
				+								<p class="mainp">众志逸动</p>
			
 
				+								<p class="mainp">拥有一支热情专业的软件开发团队</p>
			
 
				+								<p class="mainp">专注于各类软件定制与研发</p>
			
 
				+								<p class="mainp">无论项目大小</p>
			
 
				+								<p class="mainp">我们都会不遗余力的为您提供最优质的产品和高质量的服务。</p>
			
 
				+								<div class="tag">
			
 
				+									<span>ERP系统</span>
			
 
				+									<span>OA系统</span>
			
 
				+									<span>CRM系统</span>
			
 
				+									<span>APP开发</span>
			
 
				+									<span>小程序开发</span>
			
 
				+									<span>微信开发</span>
			
 
				+									<span>H5开发</span>
			
 
				+									<span>网站开发</span>
			
 
				+									<span>UI设计</span>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div>
			
 
				+								<img src="./img/banner1.png" style="width: 458px;">
			
 
				+							</div>
			
 
				+						</div>
			
 
				+					</div>
			
 
				+					<div class="swiper-slide slide2">
			
 
				+						<div class="slide-nr">
			
 
				+							<div class="nr-text">
			
 
				+								<img src="./img/yht.png">
			
 
				+								<h1>业务多样化，深度覆盖。</h1>
			
 
				+								<p class="mainp">我们合作的产品覆盖了多个行业</p>
			
 
				+								<p class="mainp">从PC端到移动端，应有尽有</p>
			
 
				+								<p class="mainp">如果你正好需要，而我正好专业</p>
			
 
				+								<p class="mainp">请联系我们吧！</p>
			
 
				+								<div class="tag">
			
 
				+									<span>电商平台</span>
			
 
				+									<span>社区团购</span>
			
 
				+									<span>金融服务</span>
			
 
				+									<span>仓储物流</span>
			
 
				+									<span>直播、短视频</span>
			
 
				+									<span>外卖点餐</span>
			
 
				+									<span>数据可视化</span>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div>
			
 
				+								<img src="./img/banner2.png" style="width: 458px;">
			
 
				+							</div>
			
 
				+						</div>
			
 
				+					</div>
			
 
				+					<div class="swiper-slide slide3">
			
 
				+						<div class="slide-nr">
			
 
				+							<div class="nr-text">
			
 
				+								<img src="./img/yht.png">
			
 
				+								<h1>标准化开发流程，贴心的售后服务。</h1>
			
 
				+								
			
 
				+								<p class="mainp">售后24小时电话、微信深度沟通</p>
			
 
				+								<p class="mainp">每一个环节</p>
			
 
				+								<p class="mainp">我们都全力以赴!</p>
			
 
				+								<p class="mainp special" style="margin-top: 50px;">产品设计<img src="./img/arrow.png">UI设计<img src="./img/arrow.png">开发<img
			
 
				+										src="./img/arrow.png">测试<img src="./img/arrow.png">发布<img
			
 
				+										src="./img/arrow.png">售后</p>
			
 
				+							</div>
			
 
				+							<div>
			
 
				+								<img src="./img/banner3.png" style="width: 458px;">
			
 
				+							</div>
			
 
				+						</div>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+				<div class="swiper-scrollbar"></div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot fiexdFoot"><a href="https://beian.miit.gov.cn/" style="color: rgba(255,255,255,.7);">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span>联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span>关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+			
			
 
				+			<script>
			
 
				+				var swiper = new Swiper('.swiper-container');
			
 
				+				var mySwiper = new Swiper('.swiper-container', {
			
 
				+					scrollbar: {
			
 
				+						el: '.swiper-scrollbar',
			
 
				+					},
			
 
				+				});
			
 
				+			</script>
			
 
				+			
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/js/classie.js
+++ b/js/classie.js
@@ -0,0 +1,80 @@
 
				+/*!
			
 
				+ * classie - class helper functions
			
 
				+ * from bonzo https://github.com/ded/bonzo
			
 
				+ * 
			
 
				+ * classie.has( elem, 'my-class' ) -> true/false
			
 
				+ * classie.add( elem, 'my-new-class' )
			
 
				+ * classie.remove( elem, 'my-unwanted-class' )
			
 
				+ * classie.toggle( elem, 'my-class' )
			
 
				+ */
			
 
				+
			
 
				+/*jshint browser: true, strict: true, undef: true */
			
 
				+/*global define: false */
			
 
				+
			
 
				+( function( window ) {
			
 
				+
			
 
				+'use strict';
			
 
				+
			
 
				+// class helper functions from bonzo https://github.com/ded/bonzo
			
 
				+
			
 
				+function classReg( className ) {
			
 
				+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
			
 
				+}
			
 
				+
			
 
				+// classList support for class management
			
 
				+// altho to be fair, the api sucks because it won't accept multiple classes at once
			
 
				+var hasClass, addClass, removeClass;
			
 
				+
			
 
				+if ( 'classList' in document.documentElement ) {
			
 
				+  hasClass = function( elem, c ) {
			
 
				+    return elem.classList.contains( c );
			
 
				+  };
			
 
				+  addClass = function( elem, c ) {
			
 
				+    elem.classList.add( c );
			
 
				+  };
			
 
				+  removeClass = function( elem, c ) {
			
 
				+    elem.classList.remove( c );
			
 
				+  };
			
 
				+}
			
 
				+else {
			
 
				+  hasClass = function( elem, c ) {
			
 
				+    return classReg( c ).test( elem.className );
			
 
				+  };
			
 
				+  addClass = function( elem, c ) {
			
 
				+    if ( !hasClass( elem, c ) ) {
			
 
				+      elem.className = elem.className + ' ' + c;
			
 
				+    }
			
 
				+  };
			
 
				+  removeClass = function( elem, c ) {
			
 
				+    elem.className = elem.className.replace( classReg( c ), ' ' );
			
 
				+  };
			
 
				+}
			
 
				+
			
 
				+function toggleClass( elem, c ) {
			
 
				+  var fn = hasClass( elem, c ) ? removeClass : addClass;
			
 
				+  fn( elem, c );
			
 
				+}
			
 
				+
			
 
				+var classie = {
			
 
				+  // full names
			
 
				+  hasClass: hasClass,
			
 
				+  addClass: addClass,
			
 
				+  removeClass: removeClass,
			
 
				+  toggleClass: toggleClass,
			
 
				+  // short names
			
 
				+  has: hasClass,
			
 
				+  add: addClass,
			
 
				+  remove: removeClass,
			
 
				+  toggle: toggleClass
			
 
				+};
			
 
				+
			
 
				+// transport
			
 
				+if ( typeof define === 'function' && define.amd ) {
			
 
				+  // AMD
			
 
				+  define( classie );
			
 
				+} else {
			
 
				+  // browser global
			
 
				+  window.classie = classie;
			
 
				+}
			
 
				+
			
 
				+})( window );
			
--- a/js/jquery.js
+++ b/js/jquery.js
--- a/js/modalEffects.js
+++ b/js/modalEffects.js
@@ -0,0 +1,57 @@
 
				+/**
			
 
				+ * modalEffects.js v1.0.0
			
 
				+ * http://www.codrops.com
			
 
				+ *
			
 
				+ * Licensed under the MIT license.
			
 
				+ * http://www.opensource.org/licenses/mit-license.php
			
 
				+ * 
			
 
				+ * Copyright 2013, Codrops
			
 
				+ * http://www.codrops.com
			
 
				+ */
			
 
				+var ModalEffects = (function() {
			
 
				+
			
 
				+	function init() {
			
 
				+
			
 
				+		var overlay = document.querySelector( '.md-overlay' );
			
 
				+
			
 
				+		[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
			
 
				+
			
 
				+			var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
			
 
				+				close = modal.querySelector( '.md-close' );
			
 
				+
			
 
				+			function removeModal( hasPerspective ) {
			
 
				+				classie.remove( modal, 'md-show' );
			
 
				+
			
 
				+				if( hasPerspective ) {
			
 
				+					classie.remove( document.documentElement, 'md-perspective' );
			
 
				+				}
			
 
				+			}
			
 
				+
			
 
				+			function removeModalHandler() {
			
 
				+				removeModal( classie.has( el, 'md-setperspective' ) ); 
			
 
				+			}
			
 
				+
			
 
				+			el.addEventListener( 'click', function( ev ) {
			
 
				+				classie.add( modal, 'md-show' );
			
 
				+				overlay.removeEventListener( 'click', removeModalHandler );
			
 
				+				overlay.addEventListener( 'click', removeModalHandler );
			
 
				+
			
 
				+				if( classie.has( el, 'md-setperspective' ) ) {
			
 
				+					setTimeout( function() {
			
 
				+						classie.add( document.documentElement, 'md-perspective' );
			
 
				+					}, 25 );
			
 
				+				}
			
 
				+			});
			
 
				+
			
 
				+			close.addEventListener( 'click', function( ev ) {
			
 
				+				ev.stopPropagation();
			
 
				+				removeModalHandler();
			
 
				+			});
			
 
				+
			
 
				+		} );
			
 
				+
			
 
				+	}
			
 
				+
			
 
				+	init();
			
 
				+
			
 
				+})();
			
--- a/js/swiper.min.js
+++ b/js/swiper.min.js
--- a/project-HRJP.html
+++ b/project-HRJP.html
@@ -0,0 +1,91 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup2">
			
 
				+				<div class="templateHead ">
			
 
				+					<h3 class="template_title">华人家谱</h3>
			
 
				+					<!-- <h3 class="subheading">副标题副标题副标题</h3> -->
			
 
				+					<p class="template_dis">华人家谱集修谱，家庭档案记录，亲情社交，传统国学教育于一体的综合性服务APP。</p>
			
 
				+				</div>
			
 
				+				<div class="project-img">
			
 
				+					<img src="./img/project-hrjp.png" >
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot"><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+
			
 
				+		</div>
			
 
				+		
			
 
				+	</body>
			
 
				+</html>
			
--- a/project-JZ.html
+++ b/project-JZ.html
@@ -0,0 +1,90 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup2">
			
 
				+				<div class="templateHead ">
			
 
				+					<h3 class="template_title">金砖</h3>
			
 
				+					<!-- <h3 class="subheading">副标题副标题副标题</h3> -->
			
 
				+					<p class="template_dis">以红包形式代替传统广告,利用数据分析以及地理定位,获得更好的产品宣传效果。</p>
			
 
				+				</div>
			
 
				+				<div class="project-img">
			
 
				+					<img src="./img/project-jz.png" >
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot "><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+		</div>
			
 
				+		
			
 
				+	</body>
			
 
				+</html>
			
--- a/project-MHLY.html
+++ b/project-MHLY.html
@@ -0,0 +1,90 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup2">
			
 
				+				<div class="templateHead ">
			
 
				+					<h3 class="template_title">旅游盲盒</h3>
			
 
				+					<!-- <h3 class="subheading">副标题副标题副标题</h3> -->
			
 
				+					<p class="template_dis">优质景区免费门票的盲盒“彩蛋”等待开启，神秘、随机、刺激的体验，让消费者欲罢不能。</p>
			
 
				+				</div>
			
 
				+				<div class="project-img">
			
 
				+					<img src="./img/project-mhly.png" >
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot "><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+		</div>
			
 
				+		
			
 
				+	</body>
			
 
				+</html>
			
--- a/project-YS.html
+++ b/project-YS.html
@@ -0,0 +1,90 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup2">
			
 
				+				<div class="templateHead ">
			
 
				+					<h3 class="template_title">驿送</h3>
			
 
				+					<p class="template_dis">本地即时配送平台,同城快送,一对一专人急送,1小时送达,同城快递文件、合同、发票...</p>
			
 
				+				</div>
			
 
				+				<div class="project-img">
			
 
				+					<img src="./img/project-ys.png" >
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot "><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+
			
 
				+		</div>
			
 
				+		
			
 
				+	</body>
			
 
				+</html>
			
--- a/project-ZNMS.html
+++ b/project-ZNMS.html
@@ -0,0 +1,90 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-案列</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html" class="isActive">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup2">
			
 
				+				<div class="templateHead ">
			
 
				+					<h3 class="template_title">酒店智能门锁</h3>
			
 
				+					<p class="template_dis">基于“平台+终端+应用”全方位打造升级,让酒店进入智能时代！</p>
			
 
				+				</div>
			
 
				+				<div class="project-img">
			
 
				+					<img src="./img/project-znms.png" >
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot "><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+
			
 
				+		</div>
			
 
				+		
			
 
				+	</body>
			
 
				+</html>
			
--- a/us.html
+++ b/us.html
@@ -0,0 +1,199 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="zh">
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8">
			
 
				+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css" />
			
 
				+		<link rel="stylesheet" type="text/css" href="./css/component.css"/>
			
 
				+		<link rel="icon" href="favicon.ico" type="image/x-icon">
			
 
				+		<script src="./js/jquery.js"></script>
			
 
				+		<script src="./js/swiper.min.js"></script>
			
 
				+		<title>众志逸动-我们</title>
			
 
				+	</head>
			
 
				+	<body>
			
 
				+		<div class="caseContent">
			
 
				+			<div class="navBar caseNav" style="background-color: #2596ff;">
			
 
				+				<div class="logo"><a href="index.html"><img src="img/logo.png" ></a></div>
			
 
				+				<div class="nav-group">
			
 
				+					<ul>
			
 
				+						<li><a href="index.html">首页<span>Home</span></a></li>
			
 
				+						<li><a href="case.html">案列<span>Case</span></a></li>
			
 
				+						<li><a href="us.html" class="isActive">我们<span>About</span></a></li>
			
 
				+					</ul>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="caseGroup">
			
 
				+				<div class="templateHead UsBg">
			
 
				+					<h3 class="template_title">众志逸动</h3>
			
 
				+					<!-- <h3 class="subheading">副标题副标题副标题</h3> -->
			
 
				+					<p class="template_dis">主营业务为系统定制、数据处理及存储服务，软件开发，软件销售，软件外包服务<br>我们身经百战，团队协作能力成熟，<br>致力于为客户提供最优质的产品和高质量的服务</p>
			
 
				+				</div>
			
 
				+				<div class="templateCard">
			
 
				+
			
 
				+					<div class="swiper-container" style="height: 500px;">
			
 
				+						<div class="swiper-wrapper">
			
 
				+							
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-jdx.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>Java工程师</h3>
			
 
				+											<p class="seniority">8年工作经验</p>
			
 
				+											<p class="text-l">精通web mvc框架，熟悉JSP/Servlet、javaScript、Ajax、Jquery等WEB技术，熟悉spring，Struts，Struts2,Hibernate,Ibatis等主流的开源框架；</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-shx.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>前端工程师</h3>
			
 
				+											<p class="seniority">6年工作经验</p>
			
 
				+											<p class="text-l">负责网页界面前端构建工作，利用各种web技术将设计稿转换成最终web页面，并且完成兼容性测试;掌握HTML5、JS、jQeury、CSS2/3、XML、Ajax等技术并有良好的代码风格;</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-cyq.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>UI设计师</h3>
			
 
				+											<p class="seniority">6年工作经验</p>
			
 
				+											<p class="text-l">负责移动端及PC端界面的视觉设计，制定产品界面的风格及标准，包括界面设计、信息设计、交互设计、界面图标、界面皮肤、产品logo设计等。</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-ldl.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>PHP工程师</h3>
			
 
				+											<p class="seniority">8年工作经验</p>
			
 
				+											<p class="text-l">拥有快速开发项目、快速解决BUG的能力。代码遵循psr规范、稳定性很高。对于nginx非常熟悉，熟练配置https、负载均衡、反向代理等技术；能够支持对于千万级流量网站的正常开发维护工作。</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-tyl.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>测试工程师</h3>
			
 
				+											<p class="seniority">5年工作经验</p>
			
 
				+											<p class="text-l">掌握整个测试流程,熟练使用bug管理工具或项目管理工具,数据库基本操作,接口测试工具,linux操作系统,性能测试方法.,及时发现缺陷,并使用工具进行管理缺陷;</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							
			
 
				+							<div class="swiper-slide">
			
 
				+								<div class="content_item">
			
 
				+									<a href="#" class="content_itemA staff">
			
 
				+										<div class="item-container2">
			
 
				+											<img class="item_img3" src="./img/avatar-pqj.png" />
			
 
				+										</div>
			
 
				+										<div class="item_text">
			
 
				+											<h3>产品经理</h3>
			
 
				+											<p class="seniority">6年工作经验</p>
			
 
				+											<p class="text-l">熟练运用制作产品原型及产品流程图的工具(Axure，Viso等)，参与制定产品目标、运营流程、系统需求等，及产品需求文档的编写，产品原型制作；进行产品验证及产品发布后的用户反馈信息收集，并对产品培训及实施相关同事的工作给予支持；</p>
			
 
				+										</div>
			
 
				+									</a>
			
 
				+								</div>
			
 
				+							</div>
			
 
				+							
			
 
				+							
			
 
				+							
			
 
				+						</div>
			
 
				+					</div>
			
 
				+
			
 
				+
			
 
				+				</div>
			
 
				+
			
 
				+			</div>
			
 
				+			<!-- 备案号 -->
			
 
				+			<div class="pageFoot fiexdFoot"><a href="https://beian.miit.gov.cn/">黔ICP备2021004684号-1</a></span></div>
			
 
				+			<!--flotDiv-->
			
 
				+			<div class="flotDiv ">
			
 
				+				<ul>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="联系客服" class="md-trigger" data-modal="modal-2">
			
 
				+							<img class="kefuIcon" src="./img/kefuIcon.png" />
			
 
				+							<span class="blackfont">联系客服</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						<a href="javascript:;" title="关注我们" class="md-trigger" data-modal="modal-1">
			
 
				+							<img class="guanzhuIcon" src="./img/guanzhuIcon.png" />
			
 
				+							<span class="blackfont">关注我们</span>
			
 
				+						</a>
			
 
				+					</li>
			
 
				+				</ul>
			
 
				+			
			
 
				+			</div>
			
 
				+			<!-- 关注我们-弹出框 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-1">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">扫一扫，关注我们</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/gzh.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<!-- 关注我们-联系我们 -->
			
 
				+			<div class="md-modal md-effect-1" id="modal-2">
			
 
				+				<div class="md-content">
			
 
				+					<h3 class="mode-head">
			
 
				+						<div class="head-text">资深产品经理，<br>微信一对一为您服务</div>
			
 
				+						<img src="./img/closeicon%20.png" class="md-close">
			
 
				+					</h3>
			
 
				+					<div class="mode-content">
			
 
				+						<div class="content-img"><img src="./img/lxwm.png" ></div>
			
 
				+					</div>
			
 
				+					
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="md-overlay"></div>
			
 
				+			<!-- 弹出框js -->
			
 
				+			<script src="./js/classie.js"></script>
			
 
				+			<script src="./js/modalEffects.js"></script>
			
 
				+		</div>
			
 
				+		<script>
			
 
				+		
			
 
				+		    var swiper = new Swiper('.swiper-container', {
			
 
				+		      slidesPerView: 4,
			
 
				+		      spaceBetween: 50,
			
 
				+			  centeredSlides: true,
			
 
				+			  loop: true,
			
 
				+		      pagination: {
			
 
				+		        el: '.swiper-pagination',
			
 
				+		        clickable: true,
			
 
				+		      },
			
 
				+		    });
			
 
				+		  
			
 
				+		</script>
			
 
				+	</body>
			
 
				+</html>