diff --git a/404.html b/404.html
index 9e08269..51539ea 100644
--- a/404.html
+++ b/404.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB - 404</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
diff --git a/CodeNotes.html b/CodeNotes.html
index cea7b49..8414913 100644
--- a/CodeNotes.html
+++ b/CodeNotes.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB - CodeNotes</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
@@ -190,7 +190,9 @@ <h3>Dedicated support</h3>
 	<!-- basic-service-area end -->
 
 
+	
 	<!-- basic-testimonial-area start -->
+	<!-- 轮播图 -->
 	<div class="basic-testimonial-area bg-black-alfa-40 bg-5 ptb-110">
 		<div class="container">
 			<div class="row">
@@ -230,73 +232,70 @@ <h6 class="testimonial-name">Martin Friman</h6>
 	<!-- basic-testimonial-area end -->
 
 
-	<!-- basic-process-area start -->
-	<div class="basic-process-area pt-90 pb-60">
+	<br><br><br><br><br>
+	<!-- 技能块 -->
+	<div class="basic-skill-area pb-70">
 		<div class="container">
 			<div class="area-title text-center">
-				<h2>Our Work Process</h2>
+				<h2>Our Skill</h2>
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
 					eos est expedita, quas ab adipisci.</p>
 			</div>
 			<div class="row">
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center">
-						<div class="process-item-icon">
-							<span class="icon-linegraph "></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">1</span>
-							<h3 class="process-item-title">Interview</h3>
-							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of
-								spring which I enjoy.</p>
-						</div>
+				<div class="col-sm-6">
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">HTML <span class="pull-right"><span>80</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="80" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 80%;"></div>
 					</div>
-				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center highlight">
-						<div class="process-item-icon">
-							<span class="icon-lightbulb"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">2</span>
-							<h3 class="process-item-title">Plan</h3>
-							<p>Balancing a composition involves arranging both positive elements and negative space in
-								such a way.</p>
-						</div>
+					<!-- END PROGRESS BAR -->
+
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">CSS <span class="pull-right"><span>60</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="60" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 60%;"></div>
 					</div>
-				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center">
-						<div class="process-item-icon">
-							<span class="icon-pencil"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">3</span>
-							<h3 class="process-item-title">Design</h3>
-							<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
-								there live.</p>
-						</div>
+					<!-- END PROGRESS BAR -->
+
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">Jquery <span class="pull-right"><span>75</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="75" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 75%;"></div>
 					</div>
+					<!-- END PROGRESS BAR -->
 				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center highlight">
-						<div class="process-item-icon">
-							<span class="icon-laptop"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">4</span>
-							<h3 class="process-item-title">Development</h3>
-							<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in
-								his bed.</p>
-						</div>
+				<div class="col-sm-6">
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">WordPress <span class="pull-right"><span>80</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="80" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 80%;"></div>
+					</div>
+					<!-- END PROGRESS BAR -->
+
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">PHP <span class="pull-right"><span>60</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="60" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 60%;"></div>
+					</div>
+					<!-- END PROGRESS BAR -->
+
+					<!-- PROGRESS BAR -->
+					<h6 class="progress-title">Design <span class="pull-right"><span>75</span>%</span></h6>
+					<div class="progress">
+						<div class="progress-bar" aria-valuenow="75" role="progressbar" aria-valuemin="0"
+							aria-valuemax="100" style="width: 75%;"></div>
 					</div>
+					<!-- END PROGRESS BAR -->
 				</div>
 			</div>
 		</div>
 	</div>
-	<!-- basic-process-area end -->
-
-
+	<!-- 技能块 -->
 	<!-- call-to-action-area start -->
 	<div class="call-to-action-area gray-bg ptb-60">
 		<div class="container">
diff --git a/EssayAll/Essay-1.html b/EssayAll/Essay-1.html
index 65ab581..37b2ff2 100644
--- a/EssayAll/Essay-1.html
+++ b/EssayAll/Essay-1.html
@@ -8,15 +8,15 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
        
 		<!-- All CSS Files Here -->
-        <link rel="stylesheet" href="static/css/bootstrap.min.css">
-        <link rel="stylesheet" href="static/css/et-line-fonts.css">
-        <link rel="stylesheet" href="static/css/ionicons.min.css">
-        <link rel="stylesheet" href="static/css/magnific-popup.css">
-        <link rel="stylesheet" href="static/css/meanmenu.css">
-        <link rel="stylesheet" href="static/css/global.css">
-        <link rel="stylesheet" href="static/css/style.css">
-        <link rel="stylesheet" href="static/css/responsive.css">
-        <script src="static/js/modernizr-2.8.3.min.js"></script>
+        <link rel="stylesheet" href="../static/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../static/css/et-line-fonts.css">
+        <link rel="stylesheet" href="../static/css/ionicons.min.css">
+        <link rel="stylesheet" href="../static/css/magnific-popup.css">
+        <link rel="stylesheet" href="../static/css/meanmenu.css">
+        <link rel="stylesheet" href="../static/css/global.css">
+        <link rel="stylesheet" href="../static/css/style.css">
+        <link rel="stylesheet" href="../static/css/responsive.css">
+        <script src="../static/js/modernizr-2.8.3.min.js"></script>
     </head>
     <body>
         <!--[if lt IE 8]>
@@ -253,13 +253,13 @@ <h3><a href="index.html">White</a></h3>
 
 		
 		<!-- All js plugins here -->
-        <script src="static/js/jquery-1.12.0.min.js"></script>
-        <script src="static/js/bootstrap.min.js"></script>
-        <script src="static/js/isotope.pkgd.min.js"></script>
-        <script src="static/js/imagesloaded.pkgd.min.js"></script>
-        <script src="static/js/jquery.magnific-popup.min.js"></script>
-        <script src="static/js/jquery.meanmenu.js"></script>
-        <script src="static/js/plugins.js"></script>
-        <script src="static/js/main.js"></script>
+        <script src="../static/js/jquery-1.12.0.min.js"></script>
+        <script src="../static/js/bootstrap.min.js"></script>
+        <script src="../static/js/isotope.pkgd.min.js"></script>
+        <script src="../static/js/imagesloaded.pkgd.min.js"></script>
+        <script src="../static/js/jquery.magnific-popup.min.js"></script>
+        <script src="../static/js/jquery.meanmenu.js"></script>
+        <script src="../static/js/plugins.js"></script>
+        <script src="../static/js/main.js"></script>
     </body>
 </html>
diff --git a/README.md b/README.md
index 05be764..399a576 100644
--- a/README.md
+++ b/README.md
@@ -6,14 +6,17 @@ more
 
 404
 
+ESSAY 文章 
+短文，论说文； （用来刊登的）散文，随笔
+
+contact 联系
 ======没有完成
 ABOUT ###难
 
-ESSAY 文章
 
 code notes
 
-contact
+
 
 ===================
 GitHub
diff --git a/about.html b/about.html
index ca724c8..e955f01 100644
--- a/about.html
+++ b/about.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB - about</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
@@ -88,14 +88,15 @@ <h4><a href="index.html">James-jb</a></h4>
 
 	<!-- 大图片 -->
 	<!-- basic-breadcrumb start -->
-	<div class="breadcrumb-2-area pos-relative bg-2 bg-black-alfa-40">
+	<div class="breadcrumb-2-area pos-relative bg-1 bg-black-alfa-40">
 		<div class="hero-caption">
 			<div class="hero-text">
 				<div class="container">
 					<div class="row">
 						<div class="col-sm-12 text-center">
-							<h1 class="text-uppercase color-white breadcrumb-2">About Us</h1>
-							<p class="lead color-white ">We are branding &amp; digital studio from London.</p>
+							<h1 class="text-uppercase color-white breadcrumb-2">About me</h1>
+							<p class="lead color-white ">Leisurely as a sloth &amp; My philosophy of slow living</p>
+							<!-- 悠闲如树懒：我的慢生活哲学 -->
 						</div>
 					</div>
 				</div>
@@ -187,73 +188,6 @@ <h4>happy clients</h4>
 	</div>
 
 
-	<!-- basic-process-area start -->
-	<div class="basic-process-area pt-90 pb-60">
-		<div class="container">
-			<div class="area-title text-center">
-				<h2>Our Work Process</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
-			</div>
-			<div class="row">
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center">
-						<div class="process-item-icon">
-							<span class="icon-linegraph "></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">1</span>
-							<h3 class="process-item-title">Interview</h3>
-							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of
-								spring which I enjoy.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center highlight">
-						<div class="process-item-icon">
-							<span class="icon-lightbulb"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">2</span>
-							<h3 class="process-item-title">Plan</h3>
-							<p>Balancing a composition involves arranging both positive elements and negative space in
-								such a way.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center">
-						<div class="process-item-icon">
-							<span class="icon-pencil"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">3</span>
-							<h3 class="process-item-title">Design</h3>
-							<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
-								there live.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-3 col-sm-6 mb-30">
-					<div class="process-item text-center highlight">
-						<div class="process-item-icon">
-							<span class="icon-laptop"></span>
-						</div>
-						<div class="process-item-content">
-							<span class="process-item-number">4</span>
-							<h3 class="process-item-title">Development</h3>
-							<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in
-								his bed.</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- basic-process-area end -->
-
-
 
 	<div class="video-area ptb-150 bg-1">
 		<div class="video-icon-view text-center">
@@ -262,131 +196,6 @@ <h3 class="process-item-title">Development</h3>
 	</div>
 
 
-	<!-- basic-service-area start -->
-	<div class="basic-service-area gray-bg pt-90 pb-50">
-		<div class="container">
-			<div class="area-title text-center">
-				<h2>Our Services</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
-			</div>
-			<div class="row">
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-pencil"></span>
-						</div>
-						<div class="service-content">
-							<h3>Designs & interfaces</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-gears"></span>
-						</div>
-						<div class="service-content">
-							<h3>Highly customizable</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-mobile"></span>
-						</div>
-						<div class="service-content">
-							<h3>Responsive design</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-basket"></span>
-						</div>
-						<div class="service-content">
-							<h3>Features & plugins</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-speedometer"></span>
-						</div>
-						<div class="service-content">
-							<h3>Optimised for speed</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-4 col-sm-6 mb-40">
-					<div class="service-box white-bg">
-						<div class="service-icon">
-							<span class="icon-chat "></span>
-						</div>
-						<div class="service-content">
-							<h3>Dedicated support</h3>
-							<p>Lorem ipsum dolor sit amet, consectetur adipi sunt nisi id magni dignissimos rem semsila
-								eaque, rem!.</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- basic-service-area end -->
-
-
-	<!-- basic-testimonial-area start -->
-	<div class="basic-testimonial-area bg-black-alfa-40 bg-5 ptb-110">
-		<div class="container">
-			<div class="row">
-				<div class="testimonial-active owl-carousel">
-					<div class="col-md-12">
-						<div class="testimonial-box">
-							<blockquote>
-								Even the all-powerful Pointing has no control about the blind texts it is an almost
-								unorthographic life One day however a small line of blind text by the name of Lorem
-								Ipsum decided to leave.
-								<span class="fa fa-quote-right"></span>
-							</blockquote>
-							<div class="testimonial-content">
-								<h6 class="testimonial-name">Martin Friman</h6>
-								<span class="testimonial-pos">Programmer, <a href="#">somesite.com</a></span>
-							</div>
-						</div>
-					</div>
-					<div class="col-md-12">
-						<div class="testimonial-box">
-							<blockquote>
-								Even the all-powerful Pointing has no control about the blind texts it is an almost
-								unorthographic life One day however a small line of blind text by the name of Lorem
-								Ipsum decided to leave.
-								<span class="fa fa-quote-right"></span>
-							</blockquote>
-							<div class="testimonial-content">
-								<h6 class="testimonial-name">Martin Friman</h6>
-								<span class="testimonial-pos">Programmer, <a href="#">somesite.com</a></span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<!-- basic-testimonial-area end -->
 
 
 	<!-- basic-team-area start -->
@@ -484,191 +293,8 @@ <h4 class="team-item-name">Jon Harris</h4>
 	<!-- basic-team-area end -->
 
 
-	<!-- basic-pricing-area start -->
-	<div class="basic-pricing-area pt-90 pb-60">
-		<div class="container">
-			<div class="area-title text-center">
-				<h2>Our Pricing</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
-			</div>
-			<div class="row">
-				<div class="col-sm-3 mb-30">
-					<!-- PRICING TABLE -->
-					<div class="pricing-table">
-						<div class="pricing-title">
-							<h6>Light</h6>
-							<em class="text-small">for new users</em>
-						</div>
-						<div class="pricing-price">
-							<span class="price-unit montserrat"><span>$</span>25</span>
-							<span class="price-tenure">/mo</span>
-						</div>
-						<div class="pricing-features">
-							<ul>
-								<li>5GB Disk Space</li>
-								<li>15 Email Addresses</li>
-								<li>5 Domains</li>
-								<li>50 Subdomains</li>
-								<li>Email Support</li>
-							</ul>
-						</div>
-						<div class="pricing-action">
-							<a href="#" class="btn btn-circle btn-dark">Purchase</a>
-						</div>
-					</div>
-					<!-- END PRICING TABLE -->
-				</div>
-
-				<div class="col-sm-3 mb-30">
-					<!-- PRICING TABLE -->
-					<div class="pricing-table">
-						<div class="pricing-title">
-							<h6>Professional</h6>
-							<em class="text-small">most popular plan</em>
-						</div>
-						<div class="pricing-price">
-							<span class="price-unit montserrat"><span>$</span>35</span>
-							<span class="price-tenure">/mo</span>
-						</div>
-						<div class="pricing-features">
-							<ul>
-								<li>5GB Disk Space</li>
-								<li>15 Email Addresses</li>
-								<li>5 Domains</li>
-								<li>50 Subdomains</li>
-								<li>Email Support</li>
-							</ul>
-						</div>
-						<div class="pricing-action">
-							<a href="#" class="btn btn-circle btn-dark">Purchase</a>
-						</div>
-					</div>
-					<!-- END PRICING TABLE -->
-				</div>
-
-				<div class="col-sm-3 mb-30">
-					<!-- PRICING TABLE -->
-					<div class="pricing-table">
-						<div class="pricing-title">
-							<h6>Business</h6>
-							<em class="text-small">plan for bussines</em>
-						</div>
-						<div class="pricing-price">
-							<span class="price-unit montserrat"><span>$</span>99</span>
-							<span class="price-tenure">/mo</span>
-						</div>
-						<div class="pricing-features">
-							<ul>
-								<li>5GB Disk Space</li>
-								<li>15 Email Addresses</li>
-								<li>5 Domains</li>
-								<li>50 Subdomains</li>
-								<li>Email Support</li>
-							</ul>
-						</div>
-						<div class="pricing-action">
-							<a href="#" class="btn btn-circle btn-dark">Purchase</a>
-						</div>
-					</div>
-					<!-- END PRICING TABLE -->
-				</div>
-
-				<div class="col-sm-3 mb-30">
-					<!-- PRICING TABLE -->
-					<div class="pricing-table">
-						<div class="pricing-title">
-							<h6>Light</h6>
-							<em class="text-small">for new users</em>
-						</div>
-						<div class="pricing-price">
-							<span class="price-unit montserrat"><span>$</span>25</span>
-							<span class="price-tenure">/mo</span>
-						</div>
-						<div class="pricing-features">
-							<ul>
-								<li>5GB Disk Space</li>
-								<li>15 Email Addresses</li>
-								<li>5 Domains</li>
-								<li>50 Subdomains</li>
-								<li>Email Support</li>
-							</ul>
-						</div>
-						<div class="pricing-action">
-							<a href="#" class="btn btn-circle btn-dark">Purchase</a>
-						</div>
-					</div>
-					<!-- END PRICING TABLE -->
-				</div>
-			</div><!-- .row -->
-		</div>
-	</div>
-	<!-- basic-pricing-area end -->
-
 
 
-	<div class="basic-skill-area pb-70">
-		<div class="container">
-			<div class="area-title text-center">
-				<h2>Our Skill</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
-			</div>
-			<div class="row">
-				<div class="col-sm-6">
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">HTML <span class="pull-right"><span>80</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="80" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 80%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">CSS <span class="pull-right"><span>60</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="60" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 60%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">Jquery <span class="pull-right"><span>75</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="75" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 75%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-				</div>
-				<div class="col-sm-6">
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">WordPress <span class="pull-right"><span>80</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="80" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 80%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">PHP <span class="pull-right"><span>60</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="60" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 60%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-
-					<!-- PROGRESS BAR -->
-					<h6 class="progress-title">Design <span class="pull-right"><span>75</span>%</span></h6>
-					<div class="progress">
-						<div class="progress-bar" aria-valuenow="75" role="progressbar" aria-valuemin="0"
-							aria-valuemax="100" style="width: 75%;"></div>
-					</div>
-					<!-- END PROGRESS BAR -->
-				</div>
-			</div>
-		</div>
-	</div>
-
 
 	<!-- call-to-action-area start -->
 	<div class="call-to-action-area gray-bg ptb-60">
diff --git a/contact.html b/contact.html
index 333d2c9..6c2f772 100644
--- a/contact.html
+++ b/contact.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB - contact</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
@@ -86,15 +86,15 @@ <h4><a href="index.html">James-jb</a></h4>
 	</header>
 	<!-- header end -->
 
-
+	<!-- 开始 -->
 	<!-- basic-breadcrumb start -->
 	<div class="basic-breadcrumb-area gray-bg ptb-70">
 		<div class="container">
 			<div class="basic-breadcrumb text-center">
-				<h3 class="">Contact Us</h3>
+				<h3 class="">Contact Me</h3>
 				<ol class="breadcrumb text-xs">
 					<li><a href="index.html">Home</a></li>
-					<li class="active">Contact</li>
+					<li><a href="contact.html">Contact</a></li>
 				</ol>
 			</div>
 		</div>
@@ -102,67 +102,117 @@ <h3 class="">Contact Us</h3>
 	<!-- basic-breadcrumb end -->
 
 
+	<!-- 主要区域 -->
 	<!-- basic-contact-area -->
-	<div class="basic-contact-area pt-90 pb-50">
+	<div class="basic-process-area pt-90 pb-60">
 		<div class="container">
-			<div class="row multi-columns-row">
-				<div class="col-sm-4 col-md-4 col-lg-4 mb-40">
-					<div class="contact-person">
-						<h4>Chief Editor</h4>
-						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-							In dui magna posuere.</p>
-						<a href="javascript:;"><span class="__cf_email__"
-								data-cfemail="dfbcb7b6bab99fbdbeacb6bcabb7bab2baf1b1baab">[email&#160;protected]</span></a>
+			<div class="area-title text-center">
+				<h2>If you can't find me, don't worry.</h2>
+				<!-- 如果找不到我，别急。 -->
+
+				<p>I can handle all kinds of things. But remember, I still have email, github, youtube, Facebook, etc.
+					There's always one way you can catch me!</p>
+				<!-- 我可能处理各种事情。但请记住，我还有邮箱、github、youtube、脸书等等，你们总有一个方式能抓到我！ -->
+
+			</div>
+
+			<!-- et-line-fonts.css图标文件里有 -->
+			<div class="row">
+				<!-- github -->
+				<div class="col-md-3 col-sm-6 mb-30">
+					<div class="process-item text-center">
+						<div class="process-item-icon">
+							<a href="https://github.com/James-jb">
+								<span class="ion-social-github-outline"></span>
+							</a>
+						</div>
+						<div class="process-item-content">
+							<span class="process-item-number">1</span>
+							<h3 class="process-item-title"><a href="https://github.com/James-jb">github</a></h3>
+							<p>GitHub is a feature-rich, widely used open source hosting platform.</p>
+							<!-- GitHub是一个功能丰富、用户广泛的开源代码托管平台。 -->
+						</div>
 					</div>
 				</div>
 
-				<div class="col-sm-4 col-md-4 col-lg-4 mb-40">
-					<div class="contact-person">
-						<h4>Technical Director</h4>
-						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-							In dui magna posuere.</p>
-						<a href="javascript:;"><span class="__cf_email__"
-								data-cfemail="c5a1acb7a0a6b1aab785a7a4b6aca6b1ada0a8a0ebaba0b1">[email&#160;protected]</span></a>
+				<!-- youtube -->
+				<div class="col-md-3 col-sm-6 mb-30">
+					<div class="process-item text-center highlight">
+						<div class="process-item-icon">
+							<a href="#" onclick="alert('Account number not found')">
+								<span class="ion-social-youtube"></span>
+							</a>
+						</div>
+						<div class="process-item-content">
+							<span class="process-item-number">2</span>
+
+							<h3 class="process-item-title"><a href="#"
+									onclick="alert('Account number not found')">youtube</a></h3>
+							<p>YouTube is the world's largest video sharing platform</p>
+							<!-- YouTube作为全球最大的视频分享平台 -->
+						</div>
 					</div>
 				</div>
 
-				<div class="col-sm-4 col-md-4 col-lg-4 mb-40">
-					<div class="contact-person">
-						<h4>Lead Designer</h4>
-						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-							In dui magna posuere.</p>
-						<a href="javascript:;"><span class="__cf_email__"
-								data-cfemail="b9dddccad0ded7dccbf9dbd8cad0dacdd1dcd4dc97d7dccd">[email&#160;protected]</span></a>
+				<!-- facebook -->
+				<div class="col-md-3 col-sm-6 mb-30">
+					<div class="process-item text-center">
+						<div class="process-item-icon">
+							<a href="#" onclick="alert('Account number not found')">
+								<span class="ion-social-facebook-outline"></span>
+							</a>
+						</div>
+						<div class="process-item-content">
+							<span class="process-item-number">3</span>
+							<h3 class="process-item-title"><a href="#"
+									onclick="alert('Account number not found')">facebook</a></h3>
+							<p>Facebook is one of the largest social media platforms in the world</p>
+							<!-- Facebook作为全球最大的社交媒体平台之一 -->
+						</div>
 					</div>
 				</div>
-			</div>
-		</div>
-	</div>
-	<!-- basic-contact-area end -->
 
 
-	<div class="map-area">
-		<div class="container">
-			<div id="map"></div>
+				<!-- whatsapp -->
+				<div class="col-md-3 col-sm-6 mb-30">
+					<div class="process-item text-center highlight">
+						<div class="process-item-icon">
+							<a href="#" onclick="alert('Account number not found')">
+								<span class="ion-social-whatsapp"></span>
+							</a>
+						</div>
+						<div class="process-item-content">
+							<span class="process-item-number">4</span>
+							<h3 class="process-item-title"><a href="#"
+									onclick="alert('Account number not found')">whatsapp</a></h3>
+							<p>WhatsApp is a world-famous instant messaging app.</p>
+							<!-- WhatsApp是一款全球知名的即时通讯软件 -->
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
+	<!-- basic-contact-area end -->
 
 
-
+	<!-- 邮箱联系 -->
 	<div class="basic-contact-form ptb-90">
 		<div class="container">
 			<div class="area-title text-center">
-				<h2>Let’s talk</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
+				<h2>Email contact</h2>
+				<!-- 邮箱联系 -->
+				<p>hi, I may not be able to respond to every message in real time. For your convenience, please send your email first</p>
+					<!-- hi，我可能无法实时回复每一条消息。为了方便大家，请优先发送你的的邮箱📧 -->
 			</div>
 			<div class="row">
 				<div class="col-sm-8 col-sm-offset-2">
+					<!-- 表单执行 -->
 					<form id="contact-form" action="mail.php" method="post">
 						<div class="row">
 							<div class="col-md-6 form-group">
 								<label class="sr-only">First Name</label>
-								<input type="text" class="form-control input-lg" name="name" placeholder="First Name">
+								<input type="text" class="form-control input-lg" name="name" placeholder="Name">
 								<p class="help-block text-danger"></p>
 							</div>
 							<div class="col-md-6 form-group">
@@ -171,15 +221,18 @@ <h2>Let’s talk</h2>
 								<p class="help-block text-danger"></p>
 							</div>
 							<div class="col-md-12 form-group">
-								<label class="sr-only">Subject</label>
-								<input type="text" class="form-control input-lg" name="subject" placeholder="Subject">
+								<label class="sr-only">Request reason</label>
+								<input type="text" class="form-control input-lg" name="subject" placeholder="Request reason">
 								<p class="help-block text-danger"></p>
 							</div>
-							<div class="col-md-12 form-group">
+							<!-- 可以写内容的 -->
+							<!-- <div class="col-md-12 form-group">
 								<textarea class="form-control input-lg" rows="7" name="message"
 									placeholder="Message*"></textarea>
 								<p class="help-block text-danger"></p>
-							</div>
+							</div> -->
+
+							
 							<div class="col-md-12 text-center">
 								<button type="submit" class="btn btn-lg btn-round btn-dark">Send Email</button>
 							</div>
diff --git a/essay.html b/essay.html
index 682a07a..e899315 100644
--- a/essay.html
+++ b/essay.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB - essay</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
@@ -91,13 +91,9 @@ <h4><a href="index.html">James-jb</a></h4>
 	<div class="basic-breadcrumb-area gray-bg ptb-70">
 		<div class="container">
 			<div class="basic-breadcrumb text-center">
-				<h3 class="">Blog Grid</h3>
-				<ol class="breadcrumb text-xs">
-					<li><a href="index.html">Home</a></li>
-					<li><a href="#">Blog</a></li>
-					<li class="active">Grid</li>
-				</ol>
-			</div>
+				<h3 class="">essay</h3>
+				<!-- 随笔 -->
+				</div>
 		</div>
 	</div>
 	<!-- basic-breadcrumb end -->
@@ -108,14 +104,17 @@ <h3 class="">Blog Grid</h3>
 	<div class="basic-blog-area ptb-90">
 		<div class="container">
 			<div class="area-title text-center">
-				<h2>Our Blog</h2>
-				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora veritatis nemo aut ea iusto
-					eos est expedita, quas ab adipisci.</p>
+				<h2>Unrestrained: My random notes</h2>
+				<!-- 无拘无束：我的随意笔记 -->
+				<p>📖 I doodle freely. The sentences were broken, but I didn't care. It's not a formal article, it's just a freewheeling expression, okay</p>
+					<!-- 📖 我随意地涂鸦。句子断断续续，但我并不在意。这不是什么正式的文章，只是一次随心所欲的表达 -->
 			</div>
 
+
 			<!-- 这里是文章 -->
 			<div class="row blog-masonry">
 
+				<!-- 1 -->
 				<div class="col-sm-6 col-md-4 blog-item">
 					<!-- POST -->
 					<article class="post">
@@ -124,19 +123,23 @@ <h2>Our Blog</h2>
 						</div>
 						<div class="post-header">
 							<div class="post-meta">
-								By <a href="#">Mark Stone</a>, 23 November, 2021
+								By <a href="#">james-jb</a>, 9 June, 2024
 							</div>
-							<h2 class="post-title"><a href="blog-single.html">The Ultimate Renters Guide</a></h2>
+							
+							<h2 class="post-title"><a href="./EssayAll/Essay-1.html">Best personal blog</a></h2>
+							<!-- 最好的个人博客 -->
 						</div>
 						<div class="post-content">
-							<p>Grass there without lights be years male have and grass firmament kind bring, is thing
-								doesn't herb.</p>
+							<p>These blogs are considered the Best Personal blogs because they are beautiful.</p>
+								<!-- 这些博客之所以被认为是Best Personal Blog，是因为它漂亮 -->
+
 							<a class="post-more" href="blog-single.html">Read more &rarr;</a>
 						</div>
 					</article>
 					<!-- /POST -->
 				</div>
 
+				<!-- 2 -->
 				<div class="col-sm-6 col-md-4 blog-item">
 					<!-- POST -->
 					<article class="post">
@@ -145,7 +148,7 @@ <h2 class="post-title"><a href="blog-single.html">The Ultimate Renters Guide</a>
 						</div>
 						<div class="post-header">
 							<div class="post-meta">
-								By <a href="#">Mark Stone</a>, 23 November, 2021
+								By <a href="#">james-jb</a>, 23 November, 2021
 							</div>
 							<h2 class="post-title"><a href="blog-single.html">The Ultimate Renters Guide</a></h2>
 						</div>
@@ -158,6 +161,7 @@ <h2 class="post-title"><a href="blog-single.html">The Ultimate Renters Guide</a>
 					<!-- /POST -->
 				</div>
 
+				<!-- 3 -->
 				<div class="col-sm-6 col-md-4 blog-item">
 					<!-- POST -->
 					<article class="post">
@@ -166,7 +170,7 @@ <h2 class="post-title"><a href="blog-single.html">The Ultimate Renters Guide</a>
 						</div>
 						<div class="post-header">
 							<div class="post-meta">
-								By <a href="#">Mark Stone</a>, 23 November, 2021
+								By <a href="#">james-jb</a>, 23 November, 2021
 							</div>
 							<h2 class="post-title"><a href="blog-single.html">Living Big in Tiny Houses</a></h2>
 						</div>
@@ -179,6 +183,7 @@ <h2 class="post-title"><a href="blog-single.html">Living Big in Tiny Houses</a><
 					<!-- /POST -->
 				</div>
 
+				<!-- 4 -->
 				<div class="col-sm-6 col-md-4 blog-item">
 					<!-- POST -->
 					<article class="post">
@@ -187,7 +192,7 @@ <h2 class="post-title"><a href="blog-single.html">Living Big in Tiny Houses</a><
 						</div>
 						<div class="post-header">
 							<div class="post-meta">
-								By <a href="#">Mark Stone</a>, 23 November, 2021
+								By <a href="#">james-jb</a>, 23 November, 2024
 							</div>
 							<h2 class="post-title"><a href="blog-single.html">How to Hang a Gallery Wall</a></h2>
 						</div>
@@ -200,8 +205,8 @@ <h2 class="post-title"><a href="blog-single.html">How to Hang a Gallery Wall</a>
 					<!-- /POST -->
 				</div>
 
+				<!-- 5 -->
 				<div class="col-sm-6 col-md-4 blog-item">
-
 					<!-- POST -->
 					<article class="post">
 						<div class="post-thumbnail">
@@ -209,7 +214,7 @@ <h2 class="post-title"><a href="blog-single.html">How to Hang a Gallery Wall</a>
 						</div>
 						<div class="post-header">
 							<div class="post-meta">
-								By <a href="#">Mark Stone</a>, 23 November, 2021
+								By <a href="#">james-jb</a>, 23 November, 2024
 							</div>
 							<h2 class="post-title"><a href="blog-single.html">25 Essential Home Products</a></h2>
 						</div>
@@ -222,8 +227,8 @@ <h2 class="post-title"><a href="blog-single.html">25 Essential Home Products</a>
 					<!-- /POST -->
 				</div>
 
-				<div class="col-sm-6 col-md-4 blog-item">
-					<!-- POST -->
+				<!-- 6 -->
+				<!-- <div class="col-sm-6 col-md-4 blog-item">
 					<article class="post">
 						<div class="post-thumbnail">
 							<img src="static/picture/41.jpg" alt="">
@@ -240,8 +245,8 @@ <h2 class="post-title"><a href="blog-single.html">60 Beautiful Kitchen Island Id
 							<a class="post-more" href="blog-single.html">Read more &rarr;</a>
 						</div>
 					</article>
-					<!-- /POST -->
-				</div>
+				</div> -->
+
 			</div>
 
 
@@ -250,11 +255,11 @@ <h2 class="post-title"><a href="blog-single.html">60 Beautiful Kitchen Island Id
 				<ul class="pagination">
 					<li><a href="#" aria-label="Previous"><i class="ion-ios-arrow-back"></i></a></li>
 					<li class="active"><a href="#">1</a></li>
-					<li><a href="#">2</a></li>
-					<li><a href="#">3</a></li>
-					<li><a href="#">4</a></li>
-					<li><a href="#">5</a></li>
-					<li><a href="#" aria-label="Next"><i class="ion-ios-arrow-forward"></i></a></li>
+					<li><a href="#" onclick="alert('no more')">2</a></li>
+					<li><a href="#" onclick="alert('no more')">3</a></li>
+					<li><a href="#" onclick="alert('no more')">4</a></li>
+					<li><a href="#" onclick="alert('no more')">5</a></li>
+					<li><a href="#" aria-label="Next"><i class="ion-ios-arrow-forward" ></i></a></li>
 				</ul>
 			</nav>
 
diff --git a/files/Video/1 (2).mp4 b/files/Video/1 (2).mp4
deleted file mode 100644
index 9fceb94..0000000
Binary files a/files/Video/1 (2).mp4 and /dev/null differ
diff --git a/files/Video/1.jpg b/files/Video/1.jpg
deleted file mode 100644
index 9ca4c4d..0000000
Binary files a/files/Video/1.jpg and /dev/null differ
diff --git a/files/b.jpg b/files/b.jpg
deleted file mode 100644
index ac55afe..0000000
Binary files a/files/b.jpg and /dev/null differ
diff --git a/index.html b/index.html
index 890c048..7ffe186 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>blog - Here is James-JB's blog</title>
+	<title>James-JB - Here is James-JB's blog</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
diff --git a/more.html b/more.html
index d0dc93b..d7e1769 100644
--- a/more.html
+++ b/more.html
@@ -4,7 +4,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<title>White - Minimal Portfolio Template</title>
+	<title>James-JB's - more photos</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<!-- icon -->
diff --git a/static/css/style.css b/static/css/style.css
index 23e63c0..ae1dcda 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,1705 +1,3411 @@
-/*
-  Theme Name: White - Minimal Portfolio Template
-  Author: basictheme
-  Description: Portfolio template.
-  Version: 1.0
-*/
-
-/* Css Index 
------------------------------------
-1. Theme default css
-2. header
-3. basic slider
-4. portfolio
-5. service
-6. testimonial
-7. footer
-8. blog
-9. pricing
-10. process
-11. team
-11. breadcrumb
-12. contact
-13. about
-*/
-
-
-/*-------------------------------------------------------
-1. Theme default css
----------------------------------------------------------*/
-@import url('css.css');
-@import url('font-awesome.min.css');
-@import url('text-headline.css');
-@import url('owl.carousel.min.css');
-@import url('hamburgers.min.css');
-@import url('animate.css');
-
-body {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: normal;
-  font-style: normal;
-}
-.img,img{
- max-width: 100%;
-transition: all 0.3s ease-out 0s;
-}
-a,
-.button {
-  -webkit-transition: all 0.3s ease-out 0s;
-  -moz-transition: all 0.3s ease-out 0s;
-  -ms-transition: all 0.3s ease-out 0s;
-  -o-transition: all 0.3s ease-out 0s;
-  transition: all 0.3s ease-out 0s;
-}
-a:focus,
-.button:focus {
-  text-decoration: none;
-  outline: none;
-}
-a:focus,
-a:hover,
-.portfolio-cat a:hover,
-.footer-menu li a:hover {
-  color: #999;
-  text-decoration: none;
-}
-a, button {
-  color: #444;
-  outline: medium none;
-}
-.uppercase { 
-  text-transform: uppercase;
-}
-.capitalize { 
-  text-transform: capitalize;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Dosis', sans-serif;
-  font-weight: normal;
-  color: #232332;
-  margin-top: 0px;
-  font-style: normal;
-  font-weight: 300;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a { 
-    color: inherit;
-}
-h1 {
-    font-size: 40px;
-    font-weight: 500;
-}
-h2 {
-    font-size: 35px;
-}
-h3 {
-    font-size: 28px;
-}
-h4 {
-    font-size: 22px;
-}
-h5 {
-    font-size: 18px;
-}
-h6 {
-    font-size: 16px;
-}
-ul {
-  margin: 0px;
-  padding: 0px;
-}
-li { list-style: none }
-p {
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 24px;
-  color: #555;
-  margin-bottom: 15px;
-}
-hr{
-  padding: 0px;
-  border-bottom: 1px solid #eceff8;
-  border-top: 0px;
-}
-label {
-  color: #444;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 400;
-}
-*::-moz-selection {
-  background: #d6b161;
-  color: #fff;
-  text-shadow: none;
-}
-::-moz-selection {
-  background: #555;
-  color: #fff;
-  text-shadow: none;
-}
-::selection {
-  background: #555;
-  color: #fff;
-  text-shadow: none;
-}
-*::-moz-placeholder {
-  color: #555555;
-  font-size: 14px;
-  opacity: 1;
-}
-*::placeholder {
-  color: #555555;
-  font-size: 14px;
-  opacity: 1;
-}
-
-/* button style */
-.btn {
-  -moz-user-select: none;
-  background: #444 none repeat scroll 0 0;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: dosis;
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 1px;
-  line-height: 1.42857;
-  margin-bottom: 0;
-  padding: 7px 20px;
-  text-align: center;
-  text-transform: uppercase;
-  touch-action: manipulation;
-  transition: all 0.3s ease 0s;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-.btn:hover{background:transparent;border-color:#444}
-.btn.btn-large {
-  padding: 10px 25px;
-}
-.btn-lg {
-  font-weight: 700;
-  padding: 13px 31px;
-}
-.btn.white-btn:hover{border-color:#ddd;color:#ddd}
-
-/* bg img part */
- .bg-1 {background: url(../image/bg-1.jpg);}
- .bg-2 { background: url(../image/bg-2.jpg);}
- .bg-3 { background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/bg-3.jpg);}
- .bg-4 { background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/12.jpg);}
- .bg-5 { background: url(../image/15.jpg);}
- .bg-6{ background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/bg-video.png);}
-.color-white {
-  color: #ffffff !important;
-}
-.white-bg{background:#fff;}
- 
-.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8, .bg-9, .bg-10{
-  background-attachment: fixed; 
-  background-clip: initial; 
-  background-color: rgba(0, 0, 0, 0); 
-  background-origin: initial; 
-  background-position: center center; 
-  background-repeat: no-repeat; 
-  background-size: cover; 
-  position: relative; 
-  z-index: 0;
-}
-/* opacity */
-.bg-black-alfa-5::before, .bg-black-alfa-10::before, .bg-black-alfa-15::before, .bg-black-alfa-20::before, .bg-black-alfa-25::before, .bg-black-alfa-30::before, .bg-black-alfa-35::before, .bg-black-alfa-40::before, .bg-black-alfa-45::before, .bg-black-alfa-50::before, .bg-black-alfa-55::before, .bg-black-alfa-60::before, .bg-black-alfa-65::before, .bg-black-alfa-70::before, .bg-black-alfa-75::before, .bg-black-alfa-80::before, .bg-black-alfa-85::before, .bg-black-alfa-90::before, .bg-black-alfa-95::before {
-  content: "";
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 0;
-}
-.bg-black-alfa-5::before, .bg-black-alfa-10::before, .bg-black-alfa-15::before, .bg-black-alfa-20::before, .bg-black-alfa-25::before, .bg-black-alfa-30::before, .bg-black-alfa-35::before, .bg-black-alfa-40::before, .bg-black-alfa-45::before, .bg-black-alfa-50::before, .bg-black-alfa-55::before, .bg-black-alfa-60::before, .bg-black-alfa-65::before, .bg-black-alfa-70::before, .bg-black-alfa-75::before, .bg-black-alfa-80::before, .bg-black-alfa-85::before, .bg-black-alfa-90::before, .bg-black-alfa-95::before {
-  background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
-}
-.bg-black-alfa-40::before {
-  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
-}
-.owl-carousel .owl-nav div {
-  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
-  height: 40px;
-  left: 20px;
-  line-height: 40px;
-  opacity: 0;
-  position: absolute;
-  text-align: center;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all 0.3s ease 0s;
-  visibility: hidden;
-  width: 40px;
-}
-.owl-carousel .owl-nav div.owl-next {
-  left: auto;
-  right: 20px;
-}
-.owl-carousel:hover .owl-nav div{opacity: 1;visibility:visible}
-/* 2. header */
-.header-fixed {
-  left: 0;
-  position: absolute;
-  right: 0;
-  z-index: 1030;
-}
-.header-transparent {
-  background: transparent none repeat scroll 0 0;
-  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
-  transition: height 0.3s ease-out 0s, background 0.3s ease-out 0s, box-shadow 0s ease-out 0s;
-}
-.sticky {
-  left: 0;
-  margin: auto;
-  position: fixed;
-  top: 0;
-  width: 100%;
-background: #ffffff none repeat scroll 0 0;
-box-shadow: 0 -1px 0 #f5f5f5 inset;
-transition: height 0.3s ease-out 0s, background 0.3s ease-out 0s, box-shadow 0.3s ease-out 0s;
-z-index: 1030;
-}
-.breadcrumb-2-area {
-  background-position: 50% 0;
-  height: 70vh;
-  overflow: hidden;
-  padding: 0;
-}
-.hero-caption {
-  display: table;
-  height: 100%;
-  margin: 0 auto;
-  position: relative;
-  width: 80%;
-  z-index: 2;
-}
-.hero-text {
-  display: table-cell;
-  height: 100%;
-  position: relative;
-  vertical-align: middle;
-}
-h1.breadcrumb-2 {
-  font-size: 36px;
-  font-weight: 600;
-  letter-spacing: 5px;
-}
-.logo {
-  padding: 26px 0;
-  transition: all 0.3s ease 0s;
-}
-.logo h4 {
-  font-weight: 600;
-  margin: 0;
-}
-.header-transparent .logo h4 {
-  color: #fff;
-}
-.sticky .logo h4 {
-  color: #222;
-}
-.sticky .logo {
-  padding: 19px 0;
-}
-.basic-area {
-  position: relative;
-}
-.basic-menu {
-  float: right;
-}
-.basic-menu li {
-  float: left;
-  margin-left: 30px;
-  position: relative;
-  transition: all 0.3s ease 0s;
-}
-/* .basic-menu > li::after {
-  background: #d7d7d7 none repeat scroll 0 0;
-  content: "";
-  height: 15px;
-  position: absolute;
-  right: -16px;
-  top: 32px;
-  transform: rotate(45deg);
-  transition: all 0.3s ease 0s;
-  width: 1px;
-} */
-.basic-menu > li:last-child:after{display:none}
-.basic-menu li a {
-  color: #232332;
-  display: inline-block;
-  text-transform: uppercase;
-  position: relative;
-  font-size: 12px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-.basic-menu > li > a::before {
-  background: #666666 none repeat scroll 0 0;
-  bottom: 23px;
-  content: "";
-  height: 1px;
-  left: 0;
-  margin: auto;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: all 0.3s ease 0s;
-  width: 0px;
-}
-.basic-menu > li > a {
-  padding: 30px 0;
-}
-.basic-menu li:hover > a {
-  color: #999;
-}
-.basic-menu li:hover > a:before{opacity:1;width:15px;}
-.basic-menu li ul {
-  background: #222 none repeat scroll 0 0;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
-  float: none;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  text-align: left;
-  top: 110%;
-  transition: all 0.3s ease 0s;
-  visibility: hidden;
-  width: 200px;
-  z-index: 11;
-}
-.basic-menu li:hover > ul {
-  opacity: 1;
-  top: 100%;
-  visibility: visible;
-}
-.basic-menu li ul li {
-  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
-  display: block;
-  float: none;
-  margin: 0;
-}
-.basic-menu li ul li:last-child {
-  border-bottom: 0 none;
-  margin: 0;
-}
-.basic-menu li ul li a i{float:right}
-/* --------------------------
-  Child Sub menu
------------------------------*/
-.basic-menu li ul li ul {
-  left: 100%;
-  opacity: 0;
-  position: absolute;
-  top: 10%;
-  visibility: hidden;
-  z-index: 999;
-}
-.basic-menu li ul li:hover > ul {
-  opacity: 1;
-  top: 0;
-  visibility: visible;
-}
-.basic-menu li ul li a {
-  color: rgba(255, 255, 255, 0.7);
-  display: block;
-  font-size: 11px;
-  padding: 10px 15px;
-}
-.basic-menu li ul li:hover > a {
-  background: rgba(51, 51, 51, 0.5) none repeat scroll 0 0;
-  color: #fff;
-}
-.basic-menu li ul li a span {
-  float: right;
-}
-.member-img img {
-    width: 100%;
-}
-.menu-area .menu-p-right ul {
-  left: auto;
-  right: 0;
-}
-.basic-menu .menu-p-right ul li ul {
-  right: 100%;
-}
-
-.headroom {
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 10;
-}
-.headroom--pinned {
-  background: #fff none repeat scroll 0 0;
-  box-shadow: 0 -1px 0 #f5f5f5 inset;
-  transform: translateY(0px);
-}
-.headroom--unpinned {
-  transform: translateY(-100%);
-}
-.headroom {
-  transition: transform 0.25s ease-in-out 0s;
-  will-change: transform;
-}
-.basic-space{height:78px}
-.header-transparent .basic-menu li a {
-  color: #fff;
-}
-.header-transparent.sticky .basic-menu > li > a {
-  color: #232332;
-}
-.sticky .basic-menu > li > a {
-  padding: 23px 0;
-}
-.sticky .basic-menu > li::after {
-  top: 25px;
-}
-.header-transparent .basic-menu > li > a::before {
-  background: #f6f6f6 none repeat scroll 0 0;
-}
-.header-transparent.sticky .basic-menu > li > a::before {
-  background: #666 none repeat scroll 0 0;
-}
-.sticky .basic-menu > li > a::before {
-  bottom: 17px;
-}
-.hamburger {
-  float: right;
-  margin-left: 20px;
-  margin-top: 24px;
-  padding: 0;
-  transition: all 0.3s ease 0s;
-}
-.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
-  height: 2px;
-  width: 30px;
-}
-.hamburger-inner::before {
-  top: -8px;
-}
-.hamburger--collapse .hamburger-inner::after {
-  top: -16px;
-}
-.hamburger-menu {
-  float: right;
-  margin-right: -30px;
-  opacity: 0;
-  transition: all 0.3s ease 0s;
-  visibility: hidden;
-}
-nav.nav-menu-show {
-  margin-right: 0;
-  opacity: 1;
-  visibility: visible;
-}
-.sticky .hamburger {
-  margin-top: 17px;
-}
-
-/* 3. basic slider */
-.basic-slider {
-  position: relative;
-}
-.height-100-vh{height:100vh}
-.slide-1 {
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-1.jpg") repeat scroll center top / cover ;
-}
-.slide-2 {
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-2.jpg") repeat scroll center center / cover ;
-}
-.slide-3 {
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/sss.jpg") repeat scroll right top / cover ;
-}
-.slide-4 {
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-5.jpg") repeat scroll right top / cover ;
-}
-.slide-5 {
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-6.jpg") repeat scroll right top / cover ;
-}
-.slide-6 {
-  background: rgba(0, 0, 0, 0) url("../image/15.jpg") repeat scroll right top / cover ;
-}
-.slide-7{
-  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/bg-video.png") repeat scroll right top / cover ;
-}
-.slider-content h2 {
-  font-weight: 500;
-  letter-spacing: 5px;
-}
-.dot {
-  background: #444 none repeat scroll 0 0;
-  display: inline-block;
-  height: 5px;
-  width: 5px;
-}
-.slider-content.text-white h2 {
-  color: #ddd;
-}
-.slider-content.text-white p {
-  color: #ddd;
-}
-.slider-content.black-bg-opacity {
-  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
-  display: inline-block;
-  padding: 70px 50px;
-  text-align: center;
-  outline: 1px solid rgba(0, 0, 0, 0.2);
-  outline-offset: -15px;
-  position:relative;
-}
-.slider-content.white-bg-opacity {
-  background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
-  display: inline-block;
-  outline: 1px solid rgba(0, 0, 0, 0.2);
-  outline-offset: -15px;
-  padding: 70px 50px;
-  position: relative;
-  text-align: center;
-}
-.slider-content.black-bg-opacity > h2 {
-  font-size: 30px;
-  line-height: 40px;
-  position: relative;
-  color:#000
-}
-.slider-content.white-bg-opacity > h4 {
-  color: #000000;
-  font-size: 16px;
-  font-weight: 400;
-  letter-spacing: 5px;
-}
-.slider-content.text-white.black-bg-opacity::before {
-  border: 1px solid #888;
-  bottom: 15px;
-  content: "";
-  left: 15px;
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
-.slider-white {
-  border-bottom: 1px solid #f5f5f5;
-  border-top: 1px solid #f5f5f5;
-  padding: 140px 0;
-}
-.slider-white .slider-content{}
-.slider-white .slider-content h3 {
-  font-weight: 500;
-  letter-spacing: 3px;
-  line-height: 50px;
-  margin: 0;
-}
-.single-slider {
-  background: rgba(0, 0, 0, 0) none repeat scroll center center / cover ;
-  padding: 200px 0;
-}
-.border-t-b{border-top:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5}
-.slider-screen {
-  background-position: center center;
-  background-size: cover;
-  height: 100vh;
-  padding: 0;
-  position: relative;
-}
-.slider-screen .slider-content {
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 99;
-}
-.basic-slider .container{height:100%}
-.hero-caption {
-  display: table;
-  height: 100%;
-  width: 100%;
-}
-.hero-text {
-  display: table-cell;
-  height: 100%;
-  vertical-align: middle;
-}
-.bg-white-opacity::before {
-  background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
-  content: "";
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-/* 4. portfolio */
-.filter-menu{}
-.filter-menu button {
-  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
-  border: 0 none;
-  color: #666;
-  font-family: dosis;
-  font-weight: 500;
-  letter-spacing: 2px;
-  margin: 0 2px;
-  padding: 6px 15px;
-  position: relative;
-  text-transform: uppercase;
-}
-.filter-menu button::before {
-  background: #d7d7d7 none repeat scroll 0 0;
-  content: "";
-  height: 15px;
-  position: absolute;
-  right: -2px;
-  top: 10px;
-  transform: rotate(45deg);
-  width: 1px;
-}
-.filter-menu button:last-child:before{display:none}
-.filter-menu button::after {
-  background: #777 none repeat scroll 0 0;
-  bottom: -2px;
-  content: "";
-  height: 4px;
-  left: 0;
-  margin: auto;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  transition: all 0.3s ease 0s;
-  width: 4px;
-}
-.filter-menu button.active:after , .filter-menu button:hover:after {opacity:1}
-.row-portfolio{margin:0 -10px}
-.row-portfolio .portfolio-item{padding: 0 10px;}
-.portfolio-wrapper {
-  position: relative;
-}
-.portfolio-item{
-  width: 33.33%;
-    float: left;
-    margin-bottom: 20px;  
-}
-.portfolio-thumb img {
-  width: 100%;
-}
-.portfolio-thumb {
-  position: relative;
-}
-.portfolio-thumb::before {
-  background: #fff none repeat scroll 0 0;
-  content: "";
-  height: 100%;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  transition: all 0.3s ease 0s;
-  width: 100%;
-}
-.portfolio-wrapper:hover .portfolio-thumb::before{opacity:.8}
-.view-icon {
-  left: 0;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 50%;
-  opacity:0;
-  visibility:hidden;
-  z-index:9;
-  transition:.3s;
-  transform: scale(1.3) ;
-  margin-top:-20px;
-}
-.portfolio-wrapper:hover .view-icon{opacity:1;visibility:visible;transform: scale(1)}
-.view-icon > a {
-  background: #222 none repeat scroll 0 0;
-  border-radius: 50%;
-  color: #fff;
-  display: inline-block;
-  height: 40px;
-  line-height: 41px;
-  width: 40px;
-}
-.view-icon > a:hover{background:#666;}
-.portfolio-caption {
-  padding: 15px;
-}
-.portfolio-caption > h4 {
-  font-size: 18px;
-  font-weight: 500;
-  letter-spacing: 1px;
-  margin-bottom: 0;
-  padding-bottom: 9px;
-  position: relative;
-}
-/* .portfolio-caption > h4::before {
-  bottom: -7px;
-  content: "• • • •";
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-} */
-.work-tag > a {
-  color: #555;
-  font-size: 13px;
-  letter-spacing: 1px;
-}
-.portfolio-caption {
-  padding: 15px;
-}
-.portfolio-caption {
-  padding: 15px;
-}
-.caption-border {
-  border: 1px solid #f6f6f6;
-}
-/* portfolio style 2 */
-.portfolio-style-2{}
-.portfolio-style-2 .portfolio-caption {
-  left: 0;
-  opacity: 0;
-  padding: 15px;
-  position: absolute;
-  right: 0;
-  top: 10px;
-  transition: all 0.3s ease 0s;
-  visibility: hidden;
-}
-.portfolio-wrapper:hover .portfolio-caption{opacity:1;visibility:visible;top:0}
-
-/* call to action */
-.call-to-action > h3 {
-  font-weight: 500;
-  letter-spacing: 1.5px;
-}
-.call-to-action > p {
-  margin: 0;
-}
-.call-to-action a {
-  margin-top: 12px;
-}
-/* portfolio-style-3 */
-.portfolio-style-3{}
-.portfolio-style-3 .portfolio-caption {
-  bottom: 20px;
-  top: inherit;
-}
-.portfolio-style-3 .portfolio-wrapper:hover .portfolio-caption {
-  bottom: 0;
-  top: inherit;
-}
-.row-portfolio.m-0{margin:0;}
-.portfolio-style-4 .portfolio-thumb::before {
-  background: #000 none repeat scroll 0 0;
-}
-.portfolio-style-4 .portfolio-wrapper:hover .portfolio-thumb::before {
-  opacity: 0.7;
-}
-.portfolio-style-4 .portfolio-caption > h4 {
-  color: #fff;
-}
-.portfolio-style-4 .work-tag > a {
-  color: #fff;
-}
-.portfolio-style-4 .portfolio-caption {
-  bottom: 50%;
-  top: inherit;
-}
-.portfolio-style-4 .portfolio-wrapper:hover .portfolio-caption {
-  transform:translateY(50%);
-  bottom:50%;
-}
-.portfolio-grid-2 .portfolio-item {
-  width: 50%;
-}
-.portfolio-grid-4 .portfolio-item{width:25%}
-.no-space .portfolio-item{margin-bottom:0;}
-.width-8{width: 66.6667%;}
-#related-active .portfolio-item {
-  width: 100%;
-  padding:0 10px;
-  margin-bottom:0;
-}
-.basic-separator{border-top:1px solid #ddd}
-/* portfolio details */
-.portfolio-full-img img {
-  width: 100%;
-}
-.project-details li {
-  padding: 0 0 10px;
-font-family: "Dosis",sans-serif;
-letter-spacing: 3px;
-text-transform: uppercase;
-}
-/* 5. service */
-.service-box {
-  padding: 49px 40px 32px;
-}
-.area-title {
-  margin: 0 auto 60px;
-  width: 60%;
-}
-.area-title h2 {
-  display: inline-block;
-  font-size: 28px;
-  font-weight: 500;
-  letter-spacing: 2px;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  position: relative;
-  text-transform: uppercase;
-}
-.area-title h2::after {
-  background: #444444 none repeat scroll 0 0;
-  bottom: 0;
-  content: "";
-  display: block;
-  font-size: 20px;
-  height: 2px;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  width: 50px;
-}
-.area-title p {
-  margin: 0;
-}
-.service-icon {
-}
-.service-icon span {
-background-color: #e6e6e6;
-border-radius: 50%;
-color: #3e3e3e;
-height: 46px;
-line-height: 46px;
-text-align: center;
-transition: all 0.4s ease 0s;
-width: 46px;
-display: inline-block;
-font-size: 18px;
-margin-bottom: 17px;
-}
-.service-box:hover .service-icon span {background:#555;color:#fff}
-.service-content{}
-.service-content h3 {
-font-size: 15px;
-font-weight: 600;
-margin-bottom: 10px;
-}
-.service-content p {
-  margin: 0;
-}
-/* 6. testimonial */
-.testimonial-box {
-  margin: auto;
-  max-width: 700px;
-}
-.testimonial-box blockquote {
-  background: #ffffff none repeat scroll 0 0;
-  border: medium none;
-  font-size: 17px;
-  font-style: normal;
-  line-height: 1.6;
-  margin: 0;
-  padding: 50px;
-  position: relative;
-}
-.testimonial-box blockquote:after {
-  -moz-border-bottom-colors: none;
-  -moz-border-left-colors: none;
-  -moz-border-right-colors: none;
-  -moz-border-top-colors: none;
-  border-color: #fff transparent transparent;
-  border-image: none;
-  border-style: solid;
-  border-width: 8px;
-  bottom: -16px;
-  content: "";
-  display: block;
-  height: 0;
-  left: 20px;
-  position: absolute;
-  right: 0;
-  width: 0;
-}
-.testimonial-content{margin-top: 20px;
-position: relative;}
-.testimonial-name {
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 700;
-  margin: 0;
-}
-.testimonial-pos {
-  color: #ffffff;
-  display: block;
-  font-size: 14px;
-  margin-top: 5px;
-}
-.testimonial-pos > a {
-  color: #ffffff;
-}
-/* 7. footer */
-.footer-logo h3{
-  font-weight: 600;
-  margin: 0;
-}
-.social-icon{}
-.social-icon a {
-  background: #252525 none repeat scroll 0 0;
-  border-radius: 50%;
-  color: #fff;
-  display: inline-block;
-  font-size: 16px;
-  height: 35px;
-  line-height: 34px;
-  margin: 0 5px;
-  text-align: center;
-  width: 35px;
-}
-.social-icon a:hover {background:#999;}
-.footer-menu li {
-  display: inline-block;
-  padding: 0 10px;
-  position: relative;
-}
-.footer-menu a {
-  color: #444;
-  font-family: dosis;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-.footer-menu li::before {
-  background: #666 none repeat scroll 0 0;
-  bottom: 8px;
-  content: "";
-  height: 4px;
-  left: -5px;
-  margin-right: 6px;
-  position: absolute;
-  width: 4px;
-}
-.footer-menu li:first-child:before{display:none}
-.copyright p {
-  margin-bottom: 0;
-}
-.copyright.mt-20 a {
-  color: #000;
-}
-.bg-soft {
-  background: #f9f9f9 none repeat scroll 0 0;
-}
-.footer-info{}
-.socile-2 a{}
-.socile-2 a {
-  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
-  border-radius: 50%;
-  color: #444;
-  display: inline-block;
-  font-size: 16px;
-  height: inherit;
-  line-height: inherit;
-  margin: 0 5px;
-  text-align: center;
-  width: inherit;
-}
-.socile-2 a:hover{color:#999}
-.post-thumbnail > img {
-  width: 100%;
-}
-/* 8. blog */
-.post {
-	margin: 0 0 60px;
-}
-.post-title, .post-title a {
-  color: #111;
-  font-size: 20px;
-  font-weight: 400;
-  margin: 10px 0 15px;
-}
-.post-title a:hover{color:#999}
-.post-thumbnail {
-  margin: 0 0 25px;
-}
-.widget {
-  margin: 0 0 40px;
-}
-.widget form{position:relative}
-.form-control {
-  border: 2px solid #eee;
-  border-radius: 2px;
-  box-shadow: none;
-  color: #999999;
-  font-size: 14px;
-  height: 39px;
-}
-.form-control:focus {
-  border-color: #444;
-}
-.widget form input{}
-.widget form button {
-  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
-  border: 0 none;
-  color: #666;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 40px;
-}
-.widget-title {
-  font-weight: 600;
-  position: relative;
-}
-.widget-title::before {
-  border-bottom: 2px solid #eeeeee;
-  bottom: 0;
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-}
-.widget-title::after {
-  border-bottom: 2px solid #666;
-  content: "";
-  display: block;
-  margin: 20px auto 25px 0;
-  position: relative;
-  width: 35px;
-  z-index: 1;
-}
-.icons-list > li {
-  border-top: 1px solid #eee;
-  padding: 10px 0;
-}
-.icons-list > li:first-child {
-  border: 0 none;
-  padding-top: 0;
-}
-.icons-list a {
-  color: #999999;
-}
-.icons-list a:hover {
-  color: #444;
-}
-.widget-posts-image {
-  float: left;
-  width: 44px;
-}
-.widget-posts-body {
-  margin-left: 58px;
-}
-.widget .recent-posts > li {
-  border-top: 1px solid #eee;
-  overflow: hidden;
-  padding: 10px 0;
-}
-.widget-posts-image img {
-  max-width: 100%;
-}
-.widget .recent-posts > li:first-child {
-  border: 0 none;
-  padding-top: 0;
-}
-.widget-posts-title {
-  font-size: 12px;
-  font-weight: 600;
-  margin: 2px 0 3px;
-}
-.widget-posts-meta {
-  font-size: 12px;
-  opacity: 0.7;
-}
-ul.tags{}
-ul.tags li {
-  display: inline-block;
-}
-ul.tags li a {
-  background: #f8f8f8 none repeat scroll 0 0;
-  border-radius: 2px;
-  color: #666;
-  display: inline-block;
-  font-size: 13px;
-  margin: 0 0 6px;
-  padding: 8px 12px;
-  text-transform: capitalize;
-}
-ul.tags li a:hover{background:#444;color:#fff}
-.post-content blockquote {
-  color: #fff;
-  font-size: 20px;
-  font-style: normal;
-  padding: 30px 25px;
-  border: 0;
-}
-.post-content blockquote i {
-  display: block;
-  font-size: 24px;
-  margin: 0 0 20px;
-}
-.post.format-quote .post-content {
-  background: #444 none repeat scroll 0 0;
-  padding: 30px 25px;
-}
-.format-quote .post-content p {
-  color: #fff;
-  font-size: 18px;
-  line-height: 34px;
-}
-.post-content footer {
-  color: #fff;
-}
-/* single posts */
-blockquote.single-blockquote {
-  background: #444;
-}
-blockquote.single-blockquote p {
-  color: #fff;
-}
-.comments, .comment-form {
-  margin-bottom: 70px;
-}
-.comment, .comment-content {
-  position: relative;
-}
-.comment-avatar {
-  float: left;
-  margin: 5px 0 0;
-  max-width: 70px;
-  position: relative;
-  z-index: 1;
-}
-.comment-avatar::after {
-  background: #f5f5f5 none repeat scroll 0 0;
-  content: "";
-  height: 2px;
-  left: 70px;
-  position: absolute;
-  top: 34px;
-  width: 20px;
-  z-index: -1;
-}
-.comment-avatar img {
-  border-radius: 50%;
-  height: 70px;
-  width: 70px;
-}
-.comment-tools {
-  padding: 0 30px;
-  position: absolute;
-  right: 0;
-  top: 25px;
-  z-index: 1;
-}
-.comment-tools a {
-  color: #666;
-  margin: 0 0 0 15px;
-}
-.comment-content {
-  background: #f5f5f5 none repeat scroll 0 0;
-  border-radius: 2px;
-  margin: 0 0 35px 90px;
-  padding: 30px;
-  position: relative;
-}
-.comment-content h5 {
-  font-size: 16px;
-  font-weight: 600;
-}
-.comment-reply {
-  margin-left: 90px;
-}
-/*------------------------------------------------------------------
-[Pagination]
-*/
-.pagination > li {
-  display: inline-block;
-  margin-right: 2px;
-}
-.pagination > li:first-child > a, .pagination > li:first-child > span {
-  border-radius: 3px;
-}
-.pagination > li > a, .pagination > li > span {
-  border: 2px solid #eeeeee;
-  border-radius: 3px;
-  color: #777777;
-  display: block;
-  float: none;
-  padding: 8px 15px;
-}
-.pagination > .active > a, .pagination > .active > span {
-  background: #27cbc0 none repeat scroll 0 0;
-  border-color: #27cbc0;
-  color: #ffffff;
-}
-.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
-  background: #444 none repeat scroll 0 0;
-  border-color: #444;
-  color: #ffffff;
-}
-.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
-  background-color: #444;
-  border-color: #444;
-  color: #fff;
-  cursor: default;
-  z-index: 3;
-}
-/* 9. pricing */
-.pricing-table {
-    background: #fff;
-    box-shadow: 0 0 1px 1px #eee;
-    position: relative;
-    text-align: center;
-}
-.pricing-title,
-.pricing-action {
-    padding: 25px 0;
-}
-.pricing-title h6 {
-  font-weight: 700;
-  letter-spacing: 1px;
-  margin: 0;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-}
-.pricing-price {
-    border-top: 1px solid #f5f5f5;
-    border-bottom: 1px solid #f5f5f5;
-    padding: 20px 0;
-}
-.pricing-price .price-unit {
-    text-transform: uppercase;
-    font-size: 54px;
-    color: #222222;
-}
-.price-unit > span {
-    vertical-align: top;
-    letter-spacing: 2px;
-    line-height: 3.5;
-    font-size: 22px;
-}
-.pricing-features ul {
-    list-style: none;
-    padding: 0 0;
-    margin: 0;
-}
-.pricing-features ul li {
-    border-bottom: 1px solid #f5f5f5;
-    padding: 8px 0;
-}
-.pricing-features ul li:nth-child(odd) {
-    background: #f8f8f8;
-}
-.pricing-table {
-    margin: 10px 0 0;
-}
-.pricing-table.best-value {
-    z-index: 1;
-    margin: 0 0 0;
-}
-.pricing-table.best-value .pricing-title,
-.pricing-table.best-value .pricing-action {
-    padding: 30px 0;
-}
-/* 10. process */
-.process-item {
-    margin-top: 30px
-}
-.process-item img {
-    max-width: 100%;
-    height: auto
-}
-.process-item-icon {
-  font-size: 50px;
-  line-height: 60px;
-  padding: 60px 30px 80px;
-  text-align: center;
-}
-.process-item-content {
-    border-top: 1px solid #f2f2f2;
-    position: relative;
-    padding: 30px
-}
-.process-item-number {
-  background-color: #444;
-  border: 5px solid #fff;
-  border-radius: 40px;
-  color: #fff;
-  font-size: 20px;
-  font-weight: 700;
-  height: 60px;
-  left: 50%;
-  line-height: 45px;
-  position: absolute;
-  text-align: center;
-  top: -30px;
-  transform: translateX(-50%);
-  width: 60px;
-}
-.process-item-title {
-  font-size: 16px;
-  font-weight: 500;
-  letter-spacing: 2px;
-  margin: 15px 0;
-  text-transform: uppercase;
-}
-.process-item.highlight {
-    -webkit-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
-    -moz-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
-    -ms-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
-    -o-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
-    box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1)
-}
-.process-item.process-item-alt .process-item-icon {
-    padding: 30px 30px 50px
-}
-.process-item.process-item-alt .process-item-number {
-    top: -23px;
-    width: 46px;
-    height: 46px;
-    font-size: 16px;
-    line-height: 35px
-}
-.process-item.process-item-alt .process-item-title {
-    font-size: 14px
-}
-
-.process-item.process-item-alt .process-item-content {
-    padding: 20px
-}
-/* 11. team */
-.team-item {
-    display: block;
-    position: relative;
-    margin-bottom: 30px;
-    text-align: center
-}
-.team-item-image {
-  display: block;
-  margin: 0 auto 20px;
-  overflow: hidden;
-  position: relative;
-}
-.team-item-image::after {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    -webkit-transition: all .27s cubic-bezier(0, 0, .58, 1);
-    -moz-transition: all .27s cubic-bezier(0, 0, .58, 1);
-    -ms-transition: all .27s cubic-bezier(0, 0, .58, 1);
-    -o-transition: all .27s cubic-bezier(0, 0, .58, 1);
-    transition: all .27s cubic-bezier(0, 0, .58, 1)
-}
-
-.team-item-image:hover::after {
-    background-color: rgba(255, 255, 255, .9)
-}
-
-.team-item-image:hover .team-item-detail {
-    opacity: 1
-}
-
-.team-item-image img {
-    max-width: 100%;
-    height: auto
-}
-.team-item-detail {
-  left: 0;
-  opacity: 0;
-  padding: 20px;
-  position: absolute;
-  text-align: center;
-  top: 50%;
-  transform: translateY(-50%);
-  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
-  width: 100%;
-  z-index: 2;
-}
-.team-item-title {
-  font-size: 18px;
-  font-weight: 500;
-  letter-spacing: 2px;
-  line-height: 24px;
-  text-transform: uppercase;
-}
-.team-item-name {
-  font-size: 18px;
-  font-weight: 400;
-  letter-spacing: 3px;
-  text-transform: uppercase;
-}
-
-.team-item-role {
-    display: block;
-    text-transform: capitalize;
-    font-size: 13px;
-    letter-spacing: 1px;
-    color: #858899
-}
-.team-social-icon{}
-.team-social-icon a{background: #252525 none repeat scroll 0 0;
-border-radius: 50%;
-color: #fff;
-display: inline-block;
-font-size: 16px;
-height: 35px;
-line-height: 34px;
-margin: 0 5px;
-text-align: center;
-width: 35px;}
-.team-social-icon a:hover{background:#999}
-/* 11. breadcrumb */
-.basic-breadcrumb-area{}
-.basic-breadcrumb > h3 {
-  font-size: 25px;
-  font-weight: 600;
-  letter-spacing: 6px;
-}
-.breadcrumb {
-  border-radius: 0px;
-  margin-bottom: 0;
-}
-/* 12. contact */
-.contact-person > h4 {
-  font-size: 19px;
-  font-weight: 500;
-  letter-spacing: 2px;
-  margin-bottom: 15px;
-}
-#map{height:420px;width:100%}
-.input-lg {
-  font-size: 14px;
-  height: 47px;
-}
-/* 13. about */
-.about-text > h5 {
-  font-size: 22px;
-  font-weight: 500;
-  letter-spacing: 3px;
-  margin-bottom: 25px;
-}
-.about-text > p {
-  line-height: 26px;
-  margin-bottom: 25px;
-}
-.signature > img {
-  margin-left: -12px;
-}
-.counter-box {
-  background: #eee none repeat scroll 0 0;
-  float: left;
-  padding: 80px 30px;
-  text-align: center;
-  width: 25%;
-}
-.counter-box:nth-child(2n+1) {
-  background: #f6f6f6 none repeat scroll 0 0;
-}
-.counter-icon span {
-  font-size: 30px;
-}
-.counter-text h3 {
-  color: #444;
-  font-size: 34px;
-  font-weight: 300;
-  margin: 15px 0;
-}
-.counter-text > h4 {
-  font-size: 16px;
-  font-weight: 500;
-  letter-spacing: 3px;
-  margin-bottom: 0;
-}
-.owl-carousel .owl-item .basic-clients img {
-  width: inherit;
-}
-.progress-title {
-  font-size: 15px;
-  font-weight: 500;
-  letter-spacing: 1px;
-  margin: 0 0 10px;
-  padding: 0;
-  text-align: left;
-  text-transform: uppercase;
-}
-.progress {
-  background-color: #f5f5f5;
-  border-radius: 0;
-  box-shadow: none;
-  height: 2px;
-  margin-bottom: 20px;
-  overflow: visible;
-}
-.progress-bar {
-  background-color: #444;
-  border-radius: 0;
-  box-shadow: none;
-  color: #333333;
-  position: relative;
-}
-.video-area {
-  position: relative;
-}
-.video-area:before {
-  background: #000 none repeat scroll 0 0;
-  content: "";
-  height: 100%;
-  left: 0;
-  opacity: 0.5;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-.video-icon-view.text-center {
-  margin: 60px 0;
-  text-align: center;
-}
-.play-btn {
-  animation: 1.2s cubic-bezier(0.8, 0, 0, 1) 0s normal none infinite running pulse;
-  background-color: transparent;
-  border: 2px solid #000000;
-  border-radius: 50%;
-  box-shadow: 0 0 0 0 rgba(194, 244, 246, 0.7);
-  color: #000000;
-  display: inline-block;
-  font-size: 18px;
-  height: 75px;
-  line-height: 72px;
-  margin: 0 20px;
-  padding: 0 0 0 5px;
-  position: relative;
-  text-align: center;
-  width: 75px;
- border-color: #ffffff;
-color: #ffffff; 
-}
-@-webkit-keyframes pulse {
-    to {
-        box-shadow: 0 0 0 45px rgba(194, 244, 246, 0);
-    }
-}
-
-@keyframes pulse {
-    to {
-        box-shadow: 0 0 0 45px rgba(194, 244, 246, 0);
-    }
-}
-
-/* scrollUp */
-a#scrollUp {
-  background: #444 none repeat scroll 0 0;
-  bottom: 50px;
-  color: #fff;
-  height: 40px;
-  line-height: 40px;
-  position: absolute;
-  right: 50px;
-  text-align: center;
-  width: 40px;
-}
-/*------------------------------------------------------------------
-[17.Preloader]
-*/
-
-.page-loader {
-	background: #fff;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	z-index: 9998;
-}
-
-.loader {
-	background: #666;
-	position: absolute;
-	display: inline-block;
-	height: 40px;
-	width: 40px;
-	left: 50%;
-	top: 50%;
-	margin: -20px 0 0 -20px;
-	text-indent: -9999em;
-	-webkit-border-radius: 100%;
-	   -moz-border-radius: 100%;
-	        border-radius: 100%;
-	-webkit-animation-fill-mode: both;
-	        animation-fill-mode: both;
-	-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
-	        animation: ball-scale 1s 0s ease-in-out infinite;
-}
-
-@-webkit-keyframes ball-scale {
-
-	0% {
-		-webkit-transform: scale(0);
-		   -moz-transform: scale(0);
-		    -ms-transform: scale(0);
-		     -o-transform: scale(0);
-		        transform: scale(0);
-	}
-
-	100% {
-		opacity: 0;
-		-webkit-transform: scale(1);
-		   -moz-transform: scale(1);
-		    -ms-transform: scale(1);
-		     -o-transform: scale(1);
-		        transform: scale(1);
-	}
-
-}
-
-@keyframes ball-scale {
-
-	0% {
-		-webkit-transform: scale(0);
-		   -moz-transform: scale(0);
-		    -ms-transform: scale(0);
-		     -o-transform: scale(0);
-		        transform: scale(0);
-	}
-
-	100% {
-		opacity: 0;
-		-webkit-transform: scale(1);
-		   -moz-transform: scale(1);
-		    -ms-transform: scale(1);
-		     -o-transform: scale(1);
-		        transform: scale(1);
-	}
-
-}
-/* css end here */
-
-
-
+/*
+
+  Theme Name: White - Minimal Portfolio Template
+
+  Author: basictheme
+
+  Description: Portfolio template.
+
+  Version: 1.0
+
+*/
+
+
+
+/* Css Index 
+
+-----------------------------------
+
+1. Theme default css
+
+2. header
+
+3. basic slider
+
+4. portfolio
+
+5. service
+
+6. testimonial
+
+7. footer
+
+8. blog
+
+9. pricing
+
+10. process
+
+11. team
+
+11. breadcrumb
+
+12. contact
+
+13. about
+
+*/
+
+
+
+
+
+/*-------------------------------------------------------
+
+1. Theme default css
+
+---------------------------------------------------------*/
+
+@import url('css.css');
+
+@import url('font-awesome.min.css');
+
+@import url('text-headline.css');
+
+@import url('owl.carousel.min.css');
+
+@import url('hamburgers.min.css');
+
+@import url('animate.css');
+
+
+
+body {
+
+  font-family: 'Open Sans', sans-serif;
+
+  font-weight: normal;
+
+  font-style: normal;
+
+}
+
+.img,img{
+
+ max-width: 100%;
+
+transition: all 0.3s ease-out 0s;
+
+}
+
+a,
+
+.button {
+
+  -webkit-transition: all 0.3s ease-out 0s;
+
+  -moz-transition: all 0.3s ease-out 0s;
+
+  -ms-transition: all 0.3s ease-out 0s;
+
+  -o-transition: all 0.3s ease-out 0s;
+
+  transition: all 0.3s ease-out 0s;
+
+}
+
+a:focus,
+
+.button:focus {
+
+  text-decoration: none;
+
+  outline: none;
+
+}
+
+a:focus,
+
+a:hover,
+
+.portfolio-cat a:hover,
+
+.footer-menu li a:hover {
+
+  color: #999;
+
+  text-decoration: none;
+
+}
+
+a, button {
+
+  color: #444;
+
+  outline: medium none;
+
+}
+
+.uppercase { 
+
+  text-transform: uppercase;
+
+}
+
+.capitalize { 
+
+  text-transform: capitalize;
+
+}
+
+h1,
+
+h2,
+
+h3,
+
+h4,
+
+h5,
+
+h6 {
+
+  font-family: 'Dosis', sans-serif;
+
+  font-weight: normal;
+
+  color: #232332;
+
+  margin-top: 0px;
+
+  font-style: normal;
+
+  font-weight: 300;
+
+  letter-spacing: 1px;
+
+  text-transform: uppercase;
+
+}
+
+h1 a,
+
+h2 a,
+
+h3 a,
+
+h4 a,
+
+h5 a,
+
+h6 a { 
+
+    color: inherit;
+
+}
+
+h1 {
+
+    font-size: 40px;
+
+    font-weight: 500;
+
+}
+
+h2 {
+
+    font-size: 35px;
+
+}
+
+h3 {
+
+    font-size: 28px;
+
+}
+
+h4 {
+
+    font-size: 22px;
+
+}
+
+h5 {
+
+    font-size: 18px;
+
+}
+
+h6 {
+
+    font-size: 16px;
+
+}
+
+ul {
+
+  margin: 0px;
+
+  padding: 0px;
+
+}
+
+li { list-style: none }
+
+p {
+
+  font-size: 14px;
+
+  font-weight: normal;
+
+  line-height: 24px;
+
+  color: #555;
+
+  margin-bottom: 15px;
+
+}
+
+hr{
+
+  padding: 0px;
+
+  border-bottom: 1px solid #eceff8;
+
+  border-top: 0px;
+
+}
+
+label {
+
+  color: #444;
+
+  cursor: pointer;
+
+  font-size: 14px;
+
+  font-weight: 400;
+
+}
+
+*::-moz-selection {
+
+  background: #d6b161;
+
+  color: #fff;
+
+  text-shadow: none;
+
+}
+
+::-moz-selection {
+
+  background: #555;
+
+  color: #fff;
+
+  text-shadow: none;
+
+}
+
+::selection {
+
+  background: #555;
+
+  color: #fff;
+
+  text-shadow: none;
+
+}
+
+*::-moz-placeholder {
+
+  color: #555555;
+
+  font-size: 14px;
+
+  opacity: 1;
+
+}
+
+*::placeholder {
+
+  color: #555555;
+
+  font-size: 14px;
+
+  opacity: 1;
+
+}
+
+
+
+/* button style */
+
+.btn {
+
+  -moz-user-select: none;
+
+  background: #444 none repeat scroll 0 0;
+
+  border: 1px solid transparent;
+
+  border-radius: 2px;
+
+  color: #fff;
+
+  cursor: pointer;
+
+  display: inline-block;
+
+  font-family: dosis;
+
+  font-size: 14px;
+
+  font-weight: 400;
+
+  letter-spacing: 1px;
+
+  line-height: 1.42857;
+
+  margin-bottom: 0;
+
+  padding: 7px 20px;
+
+  text-align: center;
+
+  text-transform: uppercase;
+
+  touch-action: manipulation;
+
+  transition: all 0.3s ease 0s;
+
+  vertical-align: middle;
+
+  white-space: nowrap;
+
+}
+
+.btn:hover{background:transparent;border-color:#444}
+
+.btn.btn-large {
+
+  padding: 10px 25px;
+
+}
+
+.btn-lg {
+
+  font-weight: 700;
+
+  padding: 13px 31px;
+
+}
+
+.btn.white-btn:hover{border-color:#ddd;color:#ddd}
+
+
+
+/* bg img part */
+
+ .bg-1 {background: url(../image/bg-1.jpg);}
+
+ .bg-2 { background: url(../image/bg-2.jpg);}
+
+ .bg-3 { background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/bg-3.jpg);}
+
+ .bg-4 { background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/12.jpg);}
+
+ /* 主页背景 */
+ .bg-5 { background: url(../image/15.jpg);}
+
+ .bg-6{ background: url(https://www.17sucai.com/preview/776298/2021-08-27/white/img/bg/bg-video.png);}
+
+.color-white {
+
+  color: #ffffff !important;
+
+}
+
+.white-bg{background:#fff;}
+
+ 
+
+.bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8, .bg-9, .bg-10{
+
+  background-attachment: fixed; 
+
+  background-clip: initial; 
+
+  background-color: rgba(0, 0, 0, 0); 
+
+  background-origin: initial; 
+
+  background-position: center center; 
+
+  background-repeat: no-repeat; 
+
+  background-size: cover; 
+
+  position: relative; 
+
+  z-index: 0;
+
+}
+
+/* opacity */
+
+.bg-black-alfa-5::before, .bg-black-alfa-10::before, .bg-black-alfa-15::before, .bg-black-alfa-20::before, .bg-black-alfa-25::before, .bg-black-alfa-30::before, .bg-black-alfa-35::before, .bg-black-alfa-40::before, .bg-black-alfa-45::before, .bg-black-alfa-50::before, .bg-black-alfa-55::before, .bg-black-alfa-60::before, .bg-black-alfa-65::before, .bg-black-alfa-70::before, .bg-black-alfa-75::before, .bg-black-alfa-80::before, .bg-black-alfa-85::before, .bg-black-alfa-90::before, .bg-black-alfa-95::before {
+
+  content: "";
+
+  height: 100%;
+
+  left: 0;
+
+  position: absolute;
+
+  top: 0;
+
+  width: 100%;
+
+  z-index: 0;
+
+}
+
+.bg-black-alfa-5::before, .bg-black-alfa-10::before, .bg-black-alfa-15::before, .bg-black-alfa-20::before, .bg-black-alfa-25::before, .bg-black-alfa-30::before, .bg-black-alfa-35::before, .bg-black-alfa-40::before, .bg-black-alfa-45::before, .bg-black-alfa-50::before, .bg-black-alfa-55::before, .bg-black-alfa-60::before, .bg-black-alfa-65::before, .bg-black-alfa-70::before, .bg-black-alfa-75::before, .bg-black-alfa-80::before, .bg-black-alfa-85::before, .bg-black-alfa-90::before, .bg-black-alfa-95::before {
+
+  background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
+
+}
+
+.bg-black-alfa-40::before {
+
+  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
+
+}
+
+.owl-carousel .owl-nav div {
+
+  background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
+
+  height: 40px;
+
+  left: 20px;
+
+  line-height: 40px;
+
+  opacity: 0;
+
+  position: absolute;
+
+  text-align: center;
+
+  top: 50%;
+
+  transform: translateY(-50%);
+
+  transition: all 0.3s ease 0s;
+
+  visibility: hidden;
+
+  width: 40px;
+
+}
+
+.owl-carousel .owl-nav div.owl-next {
+
+  left: auto;
+
+  right: 20px;
+
+}
+
+.owl-carousel:hover .owl-nav div{opacity: 1;visibility:visible}
+
+/* 2. header */
+
+.header-fixed {
+
+  left: 0;
+
+  position: absolute;
+
+  right: 0;
+
+  z-index: 1030;
+
+}
+
+.header-transparent {
+
+  background: transparent none repeat scroll 0 0;
+
+  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
+
+  transition: height 0.3s ease-out 0s, background 0.3s ease-out 0s, box-shadow 0s ease-out 0s;
+
+}
+
+.sticky {
+
+  left: 0;
+
+  margin: auto;
+
+  position: fixed;
+
+  top: 0;
+
+  width: 100%;
+
+background: #ffffff none repeat scroll 0 0;
+
+box-shadow: 0 -1px 0 #f5f5f5 inset;
+
+transition: height 0.3s ease-out 0s, background 0.3s ease-out 0s, box-shadow 0.3s ease-out 0s;
+
+z-index: 1030;
+
+}
+
+.breadcrumb-2-area {
+
+  background-position: 50% 0;
+
+  height: 70vh;
+
+  overflow: hidden;
+
+  padding: 0;
+
+}
+
+.hero-caption {
+
+  display: table;
+
+  height: 100%;
+
+  margin: 0 auto;
+
+  position: relative;
+
+  width: 80%;
+
+  z-index: 2;
+
+}
+
+.hero-text {
+
+  display: table-cell;
+
+  height: 100%;
+
+  position: relative;
+
+  vertical-align: middle;
+
+}
+
+h1.breadcrumb-2 {
+
+  font-size: 36px;
+
+  font-weight: 600;
+
+  letter-spacing: 5px;
+
+}
+
+.logo {
+
+  padding: 26px 0;
+
+  transition: all 0.3s ease 0s;
+
+}
+
+.logo h4 {
+
+  font-weight: 600;
+
+  margin: 0;
+
+}
+
+.header-transparent .logo h4 {
+
+  color: #fff;
+
+}
+
+.sticky .logo h4 {
+
+  color: #222;
+
+}
+
+.sticky .logo {
+
+  padding: 19px 0;
+
+}
+
+.basic-area {
+
+  position: relative;
+
+}
+
+.basic-menu {
+
+  float: right;
+
+}
+
+.basic-menu li {
+
+  float: left;
+
+  margin-left: 30px;
+
+  position: relative;
+
+  transition: all 0.3s ease 0s;
+
+}
+
+/* .basic-menu > li::after {
+
+  background: #d7d7d7 none repeat scroll 0 0;
+
+  content: "";
+
+  height: 15px;
+
+  position: absolute;
+
+  right: -16px;
+
+  top: 32px;
+
+  transform: rotate(45deg);
+
+  transition: all 0.3s ease 0s;
+
+  width: 1px;
+
+} */
+
+.basic-menu > li:last-child:after{display:none}
+
+.basic-menu li a {
+
+  color: #232332;
+
+  display: inline-block;
+
+  text-transform: uppercase;
+
+  position: relative;
+
+  font-size: 12px;
+
+  letter-spacing: 1px;
+
+  text-transform: uppercase;
+
+}
+
+.basic-menu > li > a::before {
+
+  background: #666666 none repeat scroll 0 0;
+
+  bottom: 23px;
+
+  content: "";
+
+  height: 1px;
+
+  left: 0;
+
+  margin: auto;
+
+  opacity: 0;
+
+  position: absolute;
+
+  right: 0;
+
+  transition: all 0.3s ease 0s;
+
+  width: 0px;
+
+}
+
+.basic-menu > li > a {
+
+  padding: 30px 0;
+
+}
+
+.basic-menu li:hover > a {
+
+  color: #999;
+
+}
+
+.basic-menu li:hover > a:before{opacity:1;width:15px;}
+
+.basic-menu li ul {
+
+  background: #222 none repeat scroll 0 0;
+
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
+
+  float: none;
+
+  left: 0;
+
+  opacity: 0;
+
+  position: absolute;
+
+  text-align: left;
+
+  top: 110%;
+
+  transition: all 0.3s ease 0s;
+
+  visibility: hidden;
+
+  width: 200px;
+
+  z-index: 11;
+
+}
+
+.basic-menu li:hover > ul {
+
+  opacity: 1;
+
+  top: 100%;
+
+  visibility: visible;
+
+}
+
+.basic-menu li ul li {
+
+  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
+
+  display: block;
+
+  float: none;
+
+  margin: 0;
+
+}
+
+.basic-menu li ul li:last-child {
+
+  border-bottom: 0 none;
+
+  margin: 0;
+
+}
+
+.basic-menu li ul li a i{float:right}
+
+/* --------------------------
+
+  Child Sub menu
+
+-----------------------------*/
+
+.basic-menu li ul li ul {
+
+  left: 100%;
+
+  opacity: 0;
+
+  position: absolute;
+
+  top: 10%;
+
+  visibility: hidden;
+
+  z-index: 999;
+
+}
+
+.basic-menu li ul li:hover > ul {
+
+  opacity: 1;
+
+  top: 0;
+
+  visibility: visible;
+
+}
+
+.basic-menu li ul li a {
+
+  color: rgba(255, 255, 255, 0.7);
+
+  display: block;
+
+  font-size: 11px;
+
+  padding: 10px 15px;
+
+}
+
+.basic-menu li ul li:hover > a {
+
+  background: rgba(51, 51, 51, 0.5) none repeat scroll 0 0;
+
+  color: #fff;
+
+}
+
+.basic-menu li ul li a span {
+
+  float: right;
+
+}
+
+.member-img img {
+
+    width: 100%;
+
+}
+
+.menu-area .menu-p-right ul {
+
+  left: auto;
+
+  right: 0;
+
+}
+
+.basic-menu .menu-p-right ul li ul {
+
+  right: 100%;
+
+}
+
+
+
+.headroom {
+
+  left: 0;
+
+  position: fixed;
+
+  right: 0;
+
+  top: 0;
+
+  z-index: 10;
+
+}
+
+.headroom--pinned {
+
+  background: #fff none repeat scroll 0 0;
+
+  box-shadow: 0 -1px 0 #f5f5f5 inset;
+
+  transform: translateY(0px);
+
+}
+
+.headroom--unpinned {
+
+  transform: translateY(-100%);
+
+}
+
+.headroom {
+
+  transition: transform 0.25s ease-in-out 0s;
+
+  will-change: transform;
+
+}
+
+.basic-space{height:78px}
+
+.header-transparent .basic-menu li a {
+
+  color: #fff;
+
+}
+
+.header-transparent.sticky .basic-menu > li > a {
+
+  color: #232332;
+
+}
+
+.sticky .basic-menu > li > a {
+
+  padding: 23px 0;
+
+}
+
+.sticky .basic-menu > li::after {
+
+  top: 25px;
+
+}
+
+.header-transparent .basic-menu > li > a::before {
+
+  background: #f6f6f6 none repeat scroll 0 0;
+
+}
+
+.header-transparent.sticky .basic-menu > li > a::before {
+
+  background: #666 none repeat scroll 0 0;
+
+}
+
+.sticky .basic-menu > li > a::before {
+
+  bottom: 17px;
+
+}
+
+.hamburger {
+
+  float: right;
+
+  margin-left: 20px;
+
+  margin-top: 24px;
+
+  padding: 0;
+
+  transition: all 0.3s ease 0s;
+
+}
+
+.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
+
+  height: 2px;
+
+  width: 30px;
+
+}
+
+.hamburger-inner::before {
+
+  top: -8px;
+
+}
+
+.hamburger--collapse .hamburger-inner::after {
+
+  top: -16px;
+
+}
+
+.hamburger-menu {
+
+  float: right;
+
+  margin-right: -30px;
+
+  opacity: 0;
+
+  transition: all 0.3s ease 0s;
+
+  visibility: hidden;
+
+}
+
+nav.nav-menu-show {
+
+  margin-right: 0;
+
+  opacity: 1;
+
+  visibility: visible;
+
+}
+
+.sticky .hamburger {
+
+  margin-top: 17px;
+
+}
+
+
+
+/* 3. basic slider */
+
+.basic-slider {
+
+  position: relative;
+
+}
+
+.height-100-vh{height:100vh}
+
+.slide-1 {
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-1.jpg") repeat scroll center top / cover ;
+
+}
+
+.slide-2 {
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-2.jpg") repeat scroll center center / cover ;
+
+}
+
+.slide-3 {
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/sss.jpg") repeat scroll right top / cover ;
+
+}
+
+.slide-4 {
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-5.jpg") repeat scroll right top / cover ;
+
+}
+
+.slide-5 {
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/slider-6.jpg") repeat scroll right top / cover ;
+
+}
+
+.slide-6 {
+
+  background: rgba(0, 0, 0, 0) url("../image/15.jpg") repeat scroll right top / cover ;
+
+}
+
+.slide-7{
+
+  background: rgba(0, 0, 0, 0) url("https://www.17sucai.com/preview/776298/2021-08-27/white/img/slider/bg-video.png") repeat scroll right top / cover ;
+
+}
+
+.slider-content h2 {
+
+  font-weight: 500;
+
+  letter-spacing: 5px;
+
+}
+
+.dot {
+
+  background: #444 none repeat scroll 0 0;
+
+  display: inline-block;
+
+  height: 5px;
+
+  width: 5px;
+
+}
+
+.slider-content.text-white h2 {
+
+  color: #ddd;
+
+}
+
+.slider-content.text-white p {
+
+  color: #ddd;
+
+}
+
+.slider-content.black-bg-opacity {
+
+  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
+
+  display: inline-block;
+
+  padding: 70px 50px;
+
+  text-align: center;
+
+  outline: 1px solid rgba(0, 0, 0, 0.2);
+
+  outline-offset: -15px;
+
+  position:relative;
+
+}
+
+.slider-content.white-bg-opacity {
+
+  background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
+
+  display: inline-block;
+
+  outline: 1px solid rgba(0, 0, 0, 0.2);
+
+  outline-offset: -15px;
+
+  padding: 70px 50px;
+
+  position: relative;
+
+  text-align: center;
+
+}
+
+.slider-content.black-bg-opacity > h2 {
+
+  font-size: 30px;
+
+  line-height: 40px;
+
+  position: relative;
+
+  color:#000
+
+}
+
+.slider-content.white-bg-opacity > h4 {
+
+  color: #000000;
+
+  font-size: 16px;
+
+  font-weight: 400;
+
+  letter-spacing: 5px;
+
+}
+
+.slider-content.text-white.black-bg-opacity::before {
+
+  border: 1px solid #888;
+
+  bottom: 15px;
+
+  content: "";
+
+  left: 15px;
+
+  position: absolute;
+
+  right: 15px;
+
+  top: 10px;
+
+}
+
+.slider-white {
+
+  border-bottom: 1px solid #f5f5f5;
+
+  border-top: 1px solid #f5f5f5;
+
+  padding: 140px 0;
+
+}
+
+.slider-white .slider-content{}
+
+.slider-white .slider-content h3 {
+
+  font-weight: 500;
+
+  letter-spacing: 3px;
+
+  line-height: 50px;
+
+  margin: 0;
+
+}
+
+.single-slider {
+
+  background: rgba(0, 0, 0, 0) none repeat scroll center center / cover ;
+
+  padding: 200px 0;
+
+}
+
+.border-t-b{border-top:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5}
+
+.slider-screen {
+
+  background-position: center center;
+
+  background-size: cover;
+
+  height: 100vh;
+
+  padding: 0;
+
+  position: relative;
+
+}
+
+.slider-screen .slider-content {
+
+  left: 0;
+
+  position: absolute;
+
+  right: 0;
+
+  text-align: center;
+
+  top: 50%;
+
+  transform: translateY(-50%);
+
+  z-index: 99;
+
+}
+
+.basic-slider .container{height:100%}
+
+.hero-caption {
+
+  display: table;
+
+  height: 100%;
+
+  width: 100%;
+
+}
+
+.hero-text {
+
+  display: table-cell;
+
+  height: 100%;
+
+  vertical-align: middle;
+
+}
+
+.bg-white-opacity::before {
+
+  background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
+
+  content: "";
+
+  height: 100%;
+
+  left: 0;
+
+  position: absolute;
+
+  top: 0;
+
+  width: 100%;
+
+}
+
+/* 4. portfolio */
+
+.filter-menu{}
+
+.filter-menu button {
+
+  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
+
+  border: 0 none;
+
+  color: #666;
+
+  font-family: dosis;
+
+  font-weight: 500;
+
+  letter-spacing: 2px;
+
+  margin: 0 2px;
+
+  padding: 6px 15px;
+
+  position: relative;
+
+  text-transform: uppercase;
+
+}
+
+.filter-menu button::before {
+
+  background: #d7d7d7 none repeat scroll 0 0;
+
+  content: "";
+
+  height: 15px;
+
+  position: absolute;
+
+  right: -2px;
+
+  top: 10px;
+
+  transform: rotate(45deg);
+
+  width: 1px;
+
+}
+
+.filter-menu button:last-child:before{display:none}
+
+.filter-menu button::after {
+
+  background: #777 none repeat scroll 0 0;
+
+  bottom: -2px;
+
+  content: "";
+
+  height: 4px;
+
+  left: 0;
+
+  margin: auto;
+
+  opacity: 0;
+
+  position: absolute;
+
+  right: 0;
+
+  transition: all 0.3s ease 0s;
+
+  width: 4px;
+
+}
+
+.filter-menu button.active:after , .filter-menu button:hover:after {opacity:1}
+
+.row-portfolio{margin:0 -10px}
+
+.row-portfolio .portfolio-item{padding: 0 10px;}
+
+.portfolio-wrapper {
+
+  position: relative;
+
+}
+
+.portfolio-item{
+
+  width: 33.33%;
+
+    float: left;
+
+    margin-bottom: 20px;  
+
+}
+
+.portfolio-thumb img {
+
+  width: 100%;
+
+}
+
+.portfolio-thumb {
+
+  position: relative;
+
+}
+
+.portfolio-thumb::before {
+
+  background: #fff none repeat scroll 0 0;
+
+  content: "";
+
+  height: 100%;
+
+  left: 0;
+
+  opacity: 0;
+
+  position: absolute;
+
+  top: 0;
+
+  transition: all 0.3s ease 0s;
+
+  width: 100%;
+
+}
+
+.portfolio-wrapper:hover .portfolio-thumb::before{opacity:.8}
+
+.view-icon {
+
+  left: 0;
+
+  position: absolute;
+
+  right: 0;
+
+  text-align: center;
+
+  top: 50%;
+
+  opacity:0;
+
+  visibility:hidden;
+
+  z-index:9;
+
+  transition:.3s;
+
+  transform: scale(1.3) ;
+
+  margin-top:-20px;
+
+}
+
+.portfolio-wrapper:hover .view-icon{opacity:1;visibility:visible;transform: scale(1)}
+
+.view-icon > a {
+
+  background: #222 none repeat scroll 0 0;
+
+  border-radius: 50%;
+
+  color: #fff;
+
+  display: inline-block;
+
+  height: 40px;
+
+  line-height: 41px;
+
+  width: 40px;
+
+}
+
+.view-icon > a:hover{background:#666;}
+
+.portfolio-caption {
+
+  padding: 15px;
+
+}
+
+.portfolio-caption > h4 {
+
+  font-size: 18px;
+
+  font-weight: 500;
+
+  letter-spacing: 1px;
+
+  margin-bottom: 0;
+
+  padding-bottom: 9px;
+
+  position: relative;
+
+}
+
+/* .portfolio-caption > h4::before {
+
+  bottom: -7px;
+
+  content: "• • • •";
+
+  left: 0;
+
+  margin: auto;
+
+  position: absolute;
+
+  right: 0;
+
+} */
+
+.work-tag > a {
+
+  color: #555;
+
+  font-size: 13px;
+
+  letter-spacing: 1px;
+
+}
+
+.portfolio-caption {
+
+  padding: 15px;
+
+}
+
+.portfolio-caption {
+
+  padding: 15px;
+
+}
+
+.caption-border {
+
+  border: 1px solid #f6f6f6;
+
+}
+
+/* portfolio style 2 */
+
+.portfolio-style-2{}
+
+.portfolio-style-2 .portfolio-caption {
+
+  left: 0;
+
+  opacity: 0;
+
+  padding: 15px;
+
+  position: absolute;
+
+  right: 0;
+
+  top: 10px;
+
+  transition: all 0.3s ease 0s;
+
+  visibility: hidden;
+
+}
+
+.portfolio-wrapper:hover .portfolio-caption{opacity:1;visibility:visible;top:0}
+
+
+
+/* call to action */
+
+.call-to-action > h3 {
+
+  font-weight: 500;
+
+  letter-spacing: 1.5px;
+
+}
+
+.call-to-action > p {
+
+  margin: 0;
+
+}
+
+.call-to-action a {
+
+  margin-top: 12px;
+
+}
+
+/* portfolio-style-3 */
+
+.portfolio-style-3{}
+
+.portfolio-style-3 .portfolio-caption {
+
+  bottom: 20px;
+
+  top: inherit;
+
+}
+
+.portfolio-style-3 .portfolio-wrapper:hover .portfolio-caption {
+
+  bottom: 0;
+
+  top: inherit;
+
+}
+
+.row-portfolio.m-0{margin:0;}
+
+.portfolio-style-4 .portfolio-thumb::before {
+
+  background: #000 none repeat scroll 0 0;
+
+}
+
+.portfolio-style-4 .portfolio-wrapper:hover .portfolio-thumb::before {
+
+  opacity: 0.7;
+
+}
+
+.portfolio-style-4 .portfolio-caption > h4 {
+
+  color: #fff;
+
+}
+
+.portfolio-style-4 .work-tag > a {
+
+  color: #fff;
+
+}
+
+.portfolio-style-4 .portfolio-caption {
+
+  bottom: 50%;
+
+  top: inherit;
+
+}
+
+.portfolio-style-4 .portfolio-wrapper:hover .portfolio-caption {
+
+  transform:translateY(50%);
+
+  bottom:50%;
+
+}
+
+.portfolio-grid-2 .portfolio-item {
+
+  width: 50%;
+
+}
+
+.portfolio-grid-4 .portfolio-item{width:25%}
+
+.no-space .portfolio-item{margin-bottom:0;}
+
+.width-8{width: 66.6667%;}
+
+#related-active .portfolio-item {
+
+  width: 100%;
+
+  padding:0 10px;
+
+  margin-bottom:0;
+
+}
+
+.basic-separator{border-top:1px solid #ddd}
+
+/* portfolio details */
+
+.portfolio-full-img img {
+
+  width: 100%;
+
+}
+
+.project-details li {
+
+  padding: 0 0 10px;
+
+font-family: "Dosis",sans-serif;
+
+letter-spacing: 3px;
+
+text-transform: uppercase;
+
+}
+
+/* 5. service */
+
+.service-box {
+
+  padding: 49px 40px 32px;
+
+}
+
+.area-title {
+
+  margin: 0 auto 60px;
+
+  width: 60%;
+
+}
+
+.area-title h2 {
+
+  display: inline-block;
+
+  font-size: 28px;
+
+  font-weight: 500;
+
+  letter-spacing: 2px;
+
+  margin-bottom: 20px;
+
+  padding-bottom: 15px;
+
+  position: relative;
+
+  text-transform: uppercase;
+
+}
+
+.area-title h2::after {
+
+  background: #444444 none repeat scroll 0 0;
+
+  bottom: 0;
+
+  content: "";
+
+  display: block;
+
+  font-size: 20px;
+
+  height: 2px;
+
+  left: 0;
+
+  margin: auto;
+
+  position: absolute;
+
+  right: 0;
+
+  width: 50px;
+
+}
+
+.area-title p {
+
+  margin: 0;
+
+}
+
+.service-icon {
+
+}
+
+.service-icon span {
+
+background-color: #e6e6e6;
+
+border-radius: 50%;
+
+color: #3e3e3e;
+
+height: 46px;
+
+line-height: 46px;
+
+text-align: center;
+
+transition: all 0.4s ease 0s;
+
+width: 46px;
+
+display: inline-block;
+
+font-size: 18px;
+
+margin-bottom: 17px;
+
+}
+
+.service-box:hover .service-icon span {background:#555;color:#fff}
+
+.service-content{}
+
+.service-content h3 {
+
+font-size: 15px;
+
+font-weight: 600;
+
+margin-bottom: 10px;
+
+}
+
+.service-content p {
+
+  margin: 0;
+
+}
+
+/* 6. testimonial */
+
+.testimonial-box {
+
+  margin: auto;
+
+  max-width: 700px;
+
+}
+
+.testimonial-box blockquote {
+
+  background: #ffffff none repeat scroll 0 0;
+
+  border: medium none;
+
+  font-size: 17px;
+
+  font-style: normal;
+
+  line-height: 1.6;
+
+  margin: 0;
+
+  padding: 50px;
+
+  position: relative;
+
+}
+
+.testimonial-box blockquote:after {
+
+  -moz-border-bottom-colors: none;
+
+  -moz-border-left-colors: none;
+
+  -moz-border-right-colors: none;
+
+  -moz-border-top-colors: none;
+
+  border-color: #fff transparent transparent;
+
+  border-image: none;
+
+  border-style: solid;
+
+  border-width: 8px;
+
+  bottom: -16px;
+
+  content: "";
+
+  display: block;
+
+  height: 0;
+
+  left: 20px;
+
+  position: absolute;
+
+  right: 0;
+
+  width: 0;
+
+}
+
+.testimonial-content{margin-top: 20px;
+
+position: relative;}
+
+.testimonial-name {
+
+  color: #ffffff;
+
+  font-size: 15px;
+
+  font-weight: 700;
+
+  margin: 0;
+
+}
+
+.testimonial-pos {
+
+  color: #ffffff;
+
+  display: block;
+
+  font-size: 14px;
+
+  margin-top: 5px;
+
+}
+
+.testimonial-pos > a {
+
+  color: #ffffff;
+
+}
+
+/* 7. footer */
+
+.footer-logo h3{
+
+  font-weight: 600;
+
+  margin: 0;
+
+}
+
+.social-icon{}
+
+.social-icon a {
+
+  background: #252525 none repeat scroll 0 0;
+
+  border-radius: 50%;
+
+  color: #fff;
+
+  display: inline-block;
+
+  font-size: 16px;
+
+  height: 35px;
+
+  line-height: 34px;
+
+  margin: 0 5px;
+
+  text-align: center;
+
+  width: 35px;
+
+}
+
+.social-icon a:hover {background:#999;}
+
+.footer-menu li {
+
+  display: inline-block;
+
+  padding: 0 10px;
+
+  position: relative;
+
+}
+
+.footer-menu a {
+
+  color: #444;
+
+  font-family: dosis;
+
+  letter-spacing: 2px;
+
+  text-transform: uppercase;
+
+}
+
+.footer-menu li::before {
+
+  background: #666 none repeat scroll 0 0;
+
+  bottom: 8px;
+
+  content: "";
+
+  height: 4px;
+
+  left: -5px;
+
+  margin-right: 6px;
+
+  position: absolute;
+
+  width: 4px;
+
+}
+
+.footer-menu li:first-child:before{display:none}
+
+.copyright p {
+
+  margin-bottom: 0;
+
+}
+
+.copyright.mt-20 a {
+
+  color: #000;
+
+}
+
+.bg-soft {
+
+  background: #f9f9f9 none repeat scroll 0 0;
+
+}
+
+.footer-info{}
+
+.socile-2 a{}
+
+.socile-2 a {
+
+  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
+
+  border-radius: 50%;
+
+  color: #444;
+
+  display: inline-block;
+
+  font-size: 16px;
+
+  height: inherit;
+
+  line-height: inherit;
+
+  margin: 0 5px;
+
+  text-align: center;
+
+  width: inherit;
+
+}
+
+.socile-2 a:hover{color:#999}
+
+.post-thumbnail > img {
+
+  width: 100%;
+
+}
+
+/* 8. blog */
+
+.post {
+
+	margin: 0 0 60px;
+
+}
+
+.post-title, .post-title a {
+
+  color: #111;
+
+  font-size: 20px;
+
+  font-weight: 400;
+
+  margin: 10px 0 15px;
+
+}
+
+.post-title a:hover{color:#999}
+
+.post-thumbnail {
+
+  margin: 0 0 25px;
+
+}
+
+.widget {
+
+  margin: 0 0 40px;
+
+}
+
+.widget form{position:relative}
+
+.form-control {
+
+  border: 2px solid #eee;
+
+  border-radius: 2px;
+
+  box-shadow: none;
+
+  color: #999999;
+
+  font-size: 14px;
+
+  height: 39px;
+
+}
+
+.form-control:focus {
+
+  border-color: #444;
+
+}
+
+.widget form input{}
+
+.widget form button {
+
+  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
+
+  border: 0 none;
+
+  color: #666;
+
+  height: 100%;
+
+  position: absolute;
+
+  right: 0;
+
+  top: 0;
+
+  width: 40px;
+
+}
+
+.widget-title {
+
+  font-weight: 600;
+
+  position: relative;
+
+}
+
+.widget-title::before {
+
+  border-bottom: 2px solid #eeeeee;
+
+  bottom: 0;
+
+  content: "";
+
+  display: block;
+
+  position: absolute;
+
+  width: 100%;
+
+}
+
+.widget-title::after {
+
+  border-bottom: 2px solid #666;
+
+  content: "";
+
+  display: block;
+
+  margin: 20px auto 25px 0;
+
+  position: relative;
+
+  width: 35px;
+
+  z-index: 1;
+
+}
+
+.icons-list > li {
+
+  border-top: 1px solid #eee;
+
+  padding: 10px 0;
+
+}
+
+.icons-list > li:first-child {
+
+  border: 0 none;
+
+  padding-top: 0;
+
+}
+
+.icons-list a {
+
+  color: #999999;
+
+}
+
+.icons-list a:hover {
+
+  color: #444;
+
+}
+
+.widget-posts-image {
+
+  float: left;
+
+  width: 44px;
+
+}
+
+.widget-posts-body {
+
+  margin-left: 58px;
+
+}
+
+.widget .recent-posts > li {
+
+  border-top: 1px solid #eee;
+
+  overflow: hidden;
+
+  padding: 10px 0;
+
+}
+
+.widget-posts-image img {
+
+  max-width: 100%;
+
+}
+
+.widget .recent-posts > li:first-child {
+
+  border: 0 none;
+
+  padding-top: 0;
+
+}
+
+.widget-posts-title {
+
+  font-size: 12px;
+
+  font-weight: 600;
+
+  margin: 2px 0 3px;
+
+}
+
+.widget-posts-meta {
+
+  font-size: 12px;
+
+  opacity: 0.7;
+
+}
+
+ul.tags{}
+
+ul.tags li {
+
+  display: inline-block;
+
+}
+
+ul.tags li a {
+
+  background: #f8f8f8 none repeat scroll 0 0;
+
+  border-radius: 2px;
+
+  color: #666;
+
+  display: inline-block;
+
+  font-size: 13px;
+
+  margin: 0 0 6px;
+
+  padding: 8px 12px;
+
+  text-transform: capitalize;
+
+}
+
+ul.tags li a:hover{background:#444;color:#fff}
+
+.post-content blockquote {
+
+  color: #fff;
+
+  font-size: 20px;
+
+  font-style: normal;
+
+  padding: 30px 25px;
+
+  border: 0;
+
+}
+
+.post-content blockquote i {
+
+  display: block;
+
+  font-size: 24px;
+
+  margin: 0 0 20px;
+
+}
+
+.post.format-quote .post-content {
+
+  background: #444 none repeat scroll 0 0;
+
+  padding: 30px 25px;
+
+}
+
+.format-quote .post-content p {
+
+  color: #fff;
+
+  font-size: 18px;
+
+  line-height: 34px;
+
+}
+
+.post-content footer {
+
+  color: #fff;
+
+}
+
+/* single posts */
+
+blockquote.single-blockquote {
+
+  background: #444;
+
+}
+
+blockquote.single-blockquote p {
+
+  color: #fff;
+
+}
+
+.comments, .comment-form {
+
+  margin-bottom: 70px;
+
+}
+
+.comment, .comment-content {
+
+  position: relative;
+
+}
+
+.comment-avatar {
+
+  float: left;
+
+  margin: 5px 0 0;
+
+  max-width: 70px;
+
+  position: relative;
+
+  z-index: 1;
+
+}
+
+.comment-avatar::after {
+
+  background: #f5f5f5 none repeat scroll 0 0;
+
+  content: "";
+
+  height: 2px;
+
+  left: 70px;
+
+  position: absolute;
+
+  top: 34px;
+
+  width: 20px;
+
+  z-index: -1;
+
+}
+
+.comment-avatar img {
+
+  border-radius: 50%;
+
+  height: 70px;
+
+  width: 70px;
+
+}
+
+.comment-tools {
+
+  padding: 0 30px;
+
+  position: absolute;
+
+  right: 0;
+
+  top: 25px;
+
+  z-index: 1;
+
+}
+
+.comment-tools a {
+
+  color: #666;
+
+  margin: 0 0 0 15px;
+
+}
+
+.comment-content {
+
+  background: #f5f5f5 none repeat scroll 0 0;
+
+  border-radius: 2px;
+
+  margin: 0 0 35px 90px;
+
+  padding: 30px;
+
+  position: relative;
+
+}
+
+.comment-content h5 {
+
+  font-size: 16px;
+
+  font-weight: 600;
+
+}
+
+.comment-reply {
+
+  margin-left: 90px;
+
+}
+
+/*------------------------------------------------------------------
+
+[Pagination]
+
+*/
+
+.pagination > li {
+
+  display: inline-block;
+
+  margin-right: 2px;
+
+}
+
+.pagination > li:first-child > a, .pagination > li:first-child > span {
+
+  border-radius: 3px;
+
+}
+
+.pagination > li > a, .pagination > li > span {
+
+  border: 2px solid #eeeeee;
+
+  border-radius: 3px;
+
+  color: #777777;
+
+  display: block;
+
+  float: none;
+
+  padding: 8px 15px;
+
+}
+
+.pagination > .active > a, .pagination > .active > span {
+
+  background: #27cbc0 none repeat scroll 0 0;
+
+  border-color: #27cbc0;
+
+  color: #ffffff;
+
+}
+
+.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
+
+  background: #444 none repeat scroll 0 0;
+
+  border-color: #444;
+
+  color: #ffffff;
+
+}
+
+.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
+
+  background-color: #444;
+
+  border-color: #444;
+
+  color: #fff;
+
+  cursor: default;
+
+  z-index: 3;
+
+}
+
+/* 9. pricing */
+
+.pricing-table {
+
+    background: #fff;
+
+    box-shadow: 0 0 1px 1px #eee;
+
+    position: relative;
+
+    text-align: center;
+
+}
+
+.pricing-title,
+
+.pricing-action {
+
+    padding: 25px 0;
+
+}
+
+.pricing-title h6 {
+
+  font-weight: 700;
+
+  letter-spacing: 1px;
+
+  margin: 0;
+
+  text-transform: uppercase;
+
+  margin-bottom: 10px;
+
+}
+
+.pricing-price {
+
+    border-top: 1px solid #f5f5f5;
+
+    border-bottom: 1px solid #f5f5f5;
+
+    padding: 20px 0;
+
+}
+
+.pricing-price .price-unit {
+
+    text-transform: uppercase;
+
+    font-size: 54px;
+
+    color: #222222;
+
+}
+
+.price-unit > span {
+
+    vertical-align: top;
+
+    letter-spacing: 2px;
+
+    line-height: 3.5;
+
+    font-size: 22px;
+
+}
+
+.pricing-features ul {
+
+    list-style: none;
+
+    padding: 0 0;
+
+    margin: 0;
+
+}
+
+.pricing-features ul li {
+
+    border-bottom: 1px solid #f5f5f5;
+
+    padding: 8px 0;
+
+}
+
+.pricing-features ul li:nth-child(odd) {
+
+    background: #f8f8f8;
+
+}
+
+.pricing-table {
+
+    margin: 10px 0 0;
+
+}
+
+.pricing-table.best-value {
+
+    z-index: 1;
+
+    margin: 0 0 0;
+
+}
+
+.pricing-table.best-value .pricing-title,
+
+.pricing-table.best-value .pricing-action {
+
+    padding: 30px 0;
+
+}
+
+/* 10. process */
+
+.process-item {
+
+    margin-top: 30px
+
+}
+
+.process-item img {
+
+    max-width: 100%;
+
+    height: auto
+
+}
+
+.process-item-icon {
+
+  font-size: 50px;
+
+  line-height: 60px;
+
+  padding: 60px 30px 80px;
+
+  text-align: center;
+
+}
+
+.process-item-content {
+
+    border-top: 1px solid #f2f2f2;
+
+    position: relative;
+
+    padding: 30px
+
+}
+
+.process-item-number {
+
+  background-color: #444;
+
+  border: 5px solid #fff;
+
+  border-radius: 40px;
+
+  color: #fff;
+
+  font-size: 20px;
+
+  font-weight: 700;
+
+  height: 60px;
+
+  left: 50%;
+
+  line-height: 45px;
+
+  position: absolute;
+
+  text-align: center;
+
+  top: -30px;
+
+  transform: translateX(-50%);
+
+  width: 60px;
+
+}
+
+.process-item-title {
+
+  font-size: 16px;
+
+  font-weight: 500;
+
+  letter-spacing: 2px;
+
+  margin: 15px 0;
+
+  text-transform: uppercase;
+
+}
+
+.process-item.highlight {
+
+    -webkit-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
+
+    -moz-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
+
+    -ms-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
+
+    -o-box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1);
+
+    box-shadow: 0 8px 31px 0 rgba(0, 0, 0, .1)
+
+}
+
+.process-item.process-item-alt .process-item-icon {
+
+    padding: 30px 30px 50px
+
+}
+
+.process-item.process-item-alt .process-item-number {
+
+    top: -23px;
+
+    width: 46px;
+
+    height: 46px;
+
+    font-size: 16px;
+
+    line-height: 35px
+
+}
+
+.process-item.process-item-alt .process-item-title {
+
+    font-size: 14px
+
+}
+
+
+
+.process-item.process-item-alt .process-item-content {
+
+    padding: 20px
+
+}
+
+/* 11. team */
+
+.team-item {
+
+    display: block;
+
+    position: relative;
+
+    margin-bottom: 30px;
+
+    text-align: center
+
+}
+
+.team-item-image {
+
+  display: block;
+
+  margin: 0 auto 20px;
+
+  overflow: hidden;
+
+  position: relative;
+
+}
+
+.team-item-image::after {
+
+    content: '';
+
+    position: absolute;
+
+    z-index: 1;
+
+    top: 0;
+
+    left: 0;
+
+    width: 100%;
+
+    height: 100%;
+
+    background-color: transparent;
+
+    -webkit-transition: all .27s cubic-bezier(0, 0, .58, 1);
+
+    -moz-transition: all .27s cubic-bezier(0, 0, .58, 1);
+
+    -ms-transition: all .27s cubic-bezier(0, 0, .58, 1);
+
+    -o-transition: all .27s cubic-bezier(0, 0, .58, 1);
+
+    transition: all .27s cubic-bezier(0, 0, .58, 1)
+
+}
+
+
+
+.team-item-image:hover::after {
+
+    background-color: rgba(255, 255, 255, .9)
+
+}
+
+
+
+.team-item-image:hover .team-item-detail {
+
+    opacity: 1
+
+}
+
+
+
+.team-item-image img {
+
+    max-width: 100%;
+
+    height: auto
+
+}
+
+.team-item-detail {
+
+  left: 0;
+
+  opacity: 0;
+
+  padding: 20px;
+
+  position: absolute;
+
+  text-align: center;
+
+  top: 50%;
+
+  transform: translateY(-50%);
+
+  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
+
+  width: 100%;
+
+  z-index: 2;
+
+}
+
+.team-item-title {
+
+  font-size: 18px;
+
+  font-weight: 500;
+
+  letter-spacing: 2px;
+
+  line-height: 24px;
+
+  text-transform: uppercase;
+
+}
+
+.team-item-name {
+
+  font-size: 18px;
+
+  font-weight: 400;
+
+  letter-spacing: 3px;
+
+  text-transform: uppercase;
+
+}
+
+
+
+.team-item-role {
+
+    display: block;
+
+    text-transform: capitalize;
+
+    font-size: 13px;
+
+    letter-spacing: 1px;
+
+    color: #858899
+
+}
+
+.team-social-icon{}
+
+.team-social-icon a{background: #252525 none repeat scroll 0 0;
+
+border-radius: 50%;
+
+color: #fff;
+
+display: inline-block;
+
+font-size: 16px;
+
+height: 35px;
+
+line-height: 34px;
+
+margin: 0 5px;
+
+text-align: center;
+
+width: 35px;}
+
+.team-social-icon a:hover{background:#999}
+
+/* 11. breadcrumb */
+
+.basic-breadcrumb-area{}
+
+.basic-breadcrumb > h3 {
+
+  font-size: 25px;
+
+  font-weight: 600;
+
+  letter-spacing: 6px;
+
+}
+
+.breadcrumb {
+
+  border-radius: 0px;
+
+  margin-bottom: 0;
+
+}
+
+/* 12. contact */
+
+.contact-person > h4 {
+
+  font-size: 19px;
+
+  font-weight: 500;
+
+  letter-spacing: 2px;
+
+  margin-bottom: 15px;
+
+}
+
+#map{height:420px;width:100%}
+
+.input-lg {
+
+  font-size: 14px;
+
+  height: 47px;
+
+}
+
+/* 13. about */
+
+.about-text > h5 {
+
+  font-size: 22px;
+
+  font-weight: 500;
+
+  letter-spacing: 3px;
+
+  margin-bottom: 25px;
+
+}
+
+.about-text > p {
+
+  line-height: 26px;
+
+  margin-bottom: 25px;
+
+}
+
+.signature > img {
+
+  margin-left: -12px;
+
+}
+
+.counter-box {
+
+  background: #eee none repeat scroll 0 0;
+
+  float: left;
+
+  padding: 80px 30px;
+
+  text-align: center;
+
+  width: 25%;
+
+}
+
+.counter-box:nth-child(2n+1) {
+
+  background: #f6f6f6 none repeat scroll 0 0;
+
+}
+
+.counter-icon span {
+
+  font-size: 30px;
+
+}
+
+.counter-text h3 {
+
+  color: #444;
+
+  font-size: 34px;
+
+  font-weight: 300;
+
+  margin: 15px 0;
+
+}
+
+.counter-text > h4 {
+
+  font-size: 16px;
+
+  font-weight: 500;
+
+  letter-spacing: 3px;
+
+  margin-bottom: 0;
+
+}
+
+.owl-carousel .owl-item .basic-clients img {
+
+  width: inherit;
+
+}
+
+.progress-title {
+
+  font-size: 15px;
+
+  font-weight: 500;
+
+  letter-spacing: 1px;
+
+  margin: 0 0 10px;
+
+  padding: 0;
+
+  text-align: left;
+
+  text-transform: uppercase;
+
+}
+
+.progress {
+
+  background-color: #f5f5f5;
+
+  border-radius: 0;
+
+  box-shadow: none;
+
+  height: 2px;
+
+  margin-bottom: 20px;
+
+  overflow: visible;
+
+}
+
+.progress-bar {
+
+  background-color: #444;
+
+  border-radius: 0;
+
+  box-shadow: none;
+
+  color: #333333;
+
+  position: relative;
+
+}
+
+.video-area {
+
+  position: relative;
+
+}
+
+.video-area:before {
+
+  background: #000 none repeat scroll 0 0;
+
+  content: "";
+
+  height: 100%;
+
+  left: 0;
+
+  opacity: 0.5;
+
+  position: absolute;
+
+  top: 0;
+
+  width: 100%;
+
+}
+
+.video-icon-view.text-center {
+
+  margin: 60px 0;
+
+  text-align: center;
+
+}
+
+.play-btn {
+
+  animation: 1.2s cubic-bezier(0.8, 0, 0, 1) 0s normal none infinite running pulse;
+
+  background-color: transparent;
+
+  border: 2px solid #000000;
+
+  border-radius: 50%;
+
+  box-shadow: 0 0 0 0 rgba(194, 244, 246, 0.7);
+
+  color: #000000;
+
+  display: inline-block;
+
+  font-size: 18px;
+
+  height: 75px;
+
+  line-height: 72px;
+
+  margin: 0 20px;
+
+  padding: 0 0 0 5px;
+
+  position: relative;
+
+  text-align: center;
+
+  width: 75px;
+
+ border-color: #ffffff;
+
+color: #ffffff; 
+
+}
+
+@-webkit-keyframes pulse {
+
+    to {
+
+        box-shadow: 0 0 0 45px rgba(194, 244, 246, 0);
+
+    }
+
+}
+
+
+
+@keyframes pulse {
+
+    to {
+
+        box-shadow: 0 0 0 45px rgba(194, 244, 246, 0);
+
+    }
+
+}
+
+
+
+/* scrollUp */
+
+a#scrollUp {
+
+  background: #444 none repeat scroll 0 0;
+
+  bottom: 50px;
+
+  color: #fff;
+
+  height: 40px;
+
+  line-height: 40px;
+
+  position: absolute;
+
+  right: 50px;
+
+  text-align: center;
+
+  width: 40px;
+
+}
+
+/*------------------------------------------------------------------
+
+[17.Preloader]
+
+*/
+
+
+
+.page-loader {
+
+	background: #fff;
+
+	position: fixed;
+
+	top: 0;
+
+	bottom: 0;
+
+	right: 0;
+
+	left: 0;
+
+	z-index: 9998;
+
+}
+
+
+
+.loader {
+
+	background: #666;
+
+	position: absolute;
+
+	display: inline-block;
+
+	height: 40px;
+
+	width: 40px;
+
+	left: 50%;
+
+	top: 50%;
+
+	margin: -20px 0 0 -20px;
+
+	text-indent: -9999em;
+
+	-webkit-border-radius: 100%;
+
+	   -moz-border-radius: 100%;
+
+	        border-radius: 100%;
+
+	-webkit-animation-fill-mode: both;
+
+	        animation-fill-mode: both;
+
+	-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
+
+	        animation: ball-scale 1s 0s ease-in-out infinite;
+
+}
+
+
+
+@-webkit-keyframes ball-scale {
+
+
+
+	0% {
+
+		-webkit-transform: scale(0);
+
+		   -moz-transform: scale(0);
+
+		    -ms-transform: scale(0);
+
+		     -o-transform: scale(0);
+
+		        transform: scale(0);
+
+	}
+
+
+
+	100% {
+
+		opacity: 0;
+
+		-webkit-transform: scale(1);
+
+		   -moz-transform: scale(1);
+
+		    -ms-transform: scale(1);
+
+		     -o-transform: scale(1);
+
+		        transform: scale(1);
+
+	}
+
+
+
+}
+
+
+
+@keyframes ball-scale {
+
+
+
+	0% {
+
+		-webkit-transform: scale(0);
+
+		   -moz-transform: scale(0);
+
+		    -ms-transform: scale(0);
+
+		     -o-transform: scale(0);
+
+		        transform: scale(0);
+
+	}
+
+
+
+	100% {
+
+		opacity: 0;
+
+		-webkit-transform: scale(1);
+
+		   -moz-transform: scale(1);
+
+		    -ms-transform: scale(1);
+
+		     -o-transform: scale(1);
+
+		        transform: scale(1);
+
+	}
+
+
+
+}
+
+/* css end here */
+
+
+
+
+
+
+
diff --git a/static/image/1.jpg b/static/image/1.jpg
deleted file mode 100644
index 873a870..0000000
Binary files a/static/image/1.jpg and /dev/null differ
diff --git a/static/image/12.jpg b/static/image/12.jpg
deleted file mode 100644
index 4a8acd9..0000000
Binary files a/static/image/12.jpg and /dev/null differ
diff --git "a/static/image/15\346\230\257.txt" "b/static/image/15\346\230\257.txt"
deleted file mode 100644
index e69de29..0000000
diff --git a/static/image/2.jpg b/static/image/2.jpg
deleted file mode 100644
index 8100257..0000000
Binary files a/static/image/2.jpg and /dev/null differ
diff --git a/static/image/20240426n1bbf5.webp b/static/image/20240426n1bbf5.webp
new file mode 100644
index 0000000..c97eb21
Binary files /dev/null and b/static/image/20240426n1bbf5.webp differ
diff --git a/static/image/3.jpg b/static/image/3.jpg
deleted file mode 100644
index 7439de3..0000000
Binary files a/static/image/3.jpg and /dev/null differ
diff --git a/static/image/bg-1.jpg b/static/image/bg-1.jpg
index d7b4088..bcdc163 100644
Binary files a/static/image/bg-1.jpg and b/static/image/bg-1.jpg differ
diff --git a/static/image/bg-2.jpg b/static/image/bg-2.jpg
index ffdf4da..4a8acd9 100644
Binary files a/static/image/bg-2.jpg and b/static/image/bg-2.jpg differ
diff --git "a/static/image/\351\241\272\345\272\217\347\232\204\351\207\215\350\246\201.txt" "b/static/image/\351\241\272\345\272\217\347\232\204\351\207\215\350\246\201.txt"
new file mode 100644
index 0000000..2404e3f
--- /dev/null
+++ "b/static/image/\351\241\272\345\272\217\347\232\204\351\207\215\350\246\201.txt"
@@ -0,0 +1,7 @@
+15.jpg是主页背景
+
+bg-1.jpg
+是about
+
+bg-2.jpg
+是code
\ No newline at end of file
diff --git a/static/picture/41.jpg b/static/picture/41.jpg
deleted file mode 100644
index 1965e56..0000000
Binary files a/static/picture/41.jpg and /dev/null differ
diff --git a/static/picture/client-1.png b/static/picture/client-1.png
index b933c01..6a9ed7f 100644
Binary files a/static/picture/client-1.png and b/static/picture/client-1.png differ
diff --git a/static/picture/client-2.png b/static/picture/client-2.png
index 50ab6e1..8ae9de3 100644
Binary files a/static/picture/client-2.png and b/static/picture/client-2.png differ
diff --git a/static/picture/client-3.png b/static/picture/client-3.png
index d6d8cf0..07efd4c 100644
Binary files a/static/picture/client-3.png and b/static/picture/client-3.png differ
diff --git a/static/picture/client-4.png b/static/picture/client-4.png
index 69c4bad..65a2498 100644
Binary files a/static/picture/client-4.png and b/static/picture/client-4.png differ
diff --git a/static/picture/client-5.png b/static/picture/client-5.png
index 07045bc..a2348ec 100644
Binary files a/static/picture/client-5.png and b/static/picture/client-5.png differ
diff --git a/static/picture/client-6.png b/static/picture/client-6.png
index 9c689cd..0fb99ee 100644
Binary files a/static/picture/client-6.png and b/static/picture/client-6.png differ
diff --git a/static/picture/m-project1.jpg b/static/picture/m-project1.jpg
deleted file mode 100644
index 6fe3e93..0000000
Binary files a/static/picture/m-project1.jpg and /dev/null differ
diff --git a/static/picture/m-project2.jpg b/static/picture/m-project2.jpg
deleted file mode 100644
index db82505..0000000
Binary files a/static/picture/m-project2.jpg and /dev/null differ
diff --git a/static/picture/m-project3.jpg b/static/picture/m-project3.jpg
deleted file mode 100644
index 97962e3..0000000
Binary files a/static/picture/m-project3.jpg and /dev/null differ
