ross官网修改

about.html

@@ -31,17 +31,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li class="active"><a href="/about.html">艾斯佰丽</a></li>
+            <li>
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li class="active">
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -53,11 +58,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -71,7 +80,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner图 start -->
-    <div class="banner">
+    <div class="banner single">
       <img src="/img/about-banner.png" alt="" />
     </div>
     <!-- banner图 end -->
@@ -249,64 +258,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-1.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li>
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -159,64 +168,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-2.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li>
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -171,64 +180,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-3.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li>
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -152,64 +161,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-4.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -155,64 +164,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-5.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -158,64 +167,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-6.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -151,64 +160,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

appliance-7.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -155,64 +164,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

brand-detail.html

@@ -31,17 +31,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
-            <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -53,11 +58,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -94,64 +103,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -160,6 +153,7 @@
       </div>
     </div>
     <!-- 底部区域 end -->
+
     <script src="/libs/jquery-3.6.0.min.js"></script>
     <script src="/js/main.js"></script>
   </body>

brand-ross.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -81,19 +90,24 @@
     <!-- 广告位 end -->
 
     <div class="main">
-      <!-- 关于ross start -->
-      <div class="about wrapper">
-        <div class="container">
-          <div class="title">关于ROS'S</div>
-          <div class="content clearfix">
+      <div class="container about">
+        <div class="section-title">
+          <img src="/img/ross-title-about.png" alt="" />
+          <h3>公司介绍</h3>
+        </div>
+        <div class="content">
+          <div class="clearfix about-swiper">
             <div class="swiper fl">
               <div class="swiper-container" id="aboutSwiepr">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide">
-                    <img src="/img/banner1.png" alt="" />
+                    <img src="/img/ross-about-banner-01.png" alt="" />
                   </div>
                   <div class="swiper-slide">
-                    <img src="/img/banner1.png" alt="" />
+                    <img src="/img/ross-about-banner-02.png" alt="" />
+                  </div>
+                  <div class="swiper-slide">
+                    <img src="/img/ross-about-banner-03.png" alt="" />
                   </div>
                 </div>
                 <!-- 如果需要导航按钮 -->
@@ -101,350 +115,222 @@
                 <div class="swiper-next"></div>
               </div>
             </div>
-            <div class="section scroll-box fl">
-              <div class="item">
-                <div class="cover only-mobile">
-                  <img src="/img/banner1.png" alt="" />
-                </div>
-                <div class="num">01</div>
-                <div class="line"></div>
-                <div class="desc">
-                  ROS'S是一家专注于二进制先进美容仪器研发、制造 和销售的西班牙企业。成立于1978年，公司涉及美容、
-                  康复理疗、医疗等领域：ROS'S----来自智能科技的成 果给您的身体一个崭新的生命。
-                </div>
-              </div>
-              <div class="item">
-                <div class="cover only-mobile">
-                  <img src="/img/banner1.png" alt="" />
-                </div>
-                <div class="num">02</div>
-                <div class="line"></div>
-                <div class="desc">ROS'S是一家专注于二进制先进美容仪器研发、制造 和销</div>
+            <div class="section fl">
+              <div class="title">RÖS’S ESTÉTICA公司简介</div>
+              <div class="description">
+                RÖS’S品牌创立于1978年，总部位于西班牙巴塞罗那，是一家专注于二进制先进科技研发、制造和销售的智能创新研发型企业。获得欧盟CE、国际ISO
+                9001等系列认证，旗下拥有Binary Premium，Kestos T2，Rollaction，Intradermik等多系列先进智能科技设备。
               </div>
             </div>
           </div>
+          <ul class="more-content">
+            <li><img src="/img/ross-about-item-01.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-02.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-03.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-04.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-05.png" alt="" /></li>
+          </ul>
         </div>
       </div>
-      <!-- 关于ross end -->
 
-      <!-- 关于疗法 start -->
-      <div class="therapy wrapper">
-        <div class="container">
-          <div class="title">关于疗法</div>
-          <div class="content scroll-box" id="therapy">
-            <div class="item">
-              <div class="cover">
-                <div class="tip">热透疗法</div>
-                <div class="line"></div>
-                <img src="/img/brand-ross-therapy-cover-01.png" alt="" />
-              </div>
-              <div class="active">
-                <img src="/img/brand-ross-therapy-active-01.png" alt="448KHz热透疗法" />
-                <div class="info">
-                  <div class="tip">448KHz热透疗法</div>
-                  <div class="subtip">电容模式应用人体组织</div>
-                  <div class="section">
-                    <dl>
-                      <dt>身体护理</dt>
-                      <dd>- 肌肉理疗</dd>
-                      <dd>- 肌肉损伤</dd>
-                      <dd>- 肌肉松弛</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="item hover">
-              <div class="cover">
-                <div class="tip">面部护理</div>
-                <div class="line"></div>
-                <img src="/img/brand-ross-therapy-cover-02.png" alt="面部护理" />
-              </div>
-              <div class="active">
-                <img src="/img/brand-ross-therapy-active-02.png" alt="面部护理" />
-                <div class="info">
-                  <div class="tip">面部护理</div>
-                  <div class="subtip">电容模式应用人体组织</div>
-                  <div class="section">
-                    <dl>
-                      <dt>身体护理</dt>
-                      <dd>- 肌肉理疗</dd>
-                      <dd>- 肌肉损伤</dd>
-                      <dd>- 肌肉松弛</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="cover">
-                <div class="tip">电提升</div>
-                <div class="line"></div>
-                <img src="/img/brand-ross-therapy-cover-03.png" alt="电提升" />
-              </div>
-              <div class="active">
-                <img src="/img/brand-ross-therapy-active-03.png" alt="电提升" />
-                <div class="info">
-                  <div class="tip">电提升</div>
-                  <div class="subtip">电容模式应用人体组织</div>
-                  <div class="section">
-                    <dl>
-                      <dt>身体护理</dt>
-                      <dd>- 肌肉理疗</dd>
-                      <dd>- 肌肉损伤</dd>
-                      <dd>- 肌肉松弛</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="cover">
-                <div class="tip">电紧致</div>
-                <div class="line"></div>
-                <img src="/img/brand-ross-therapy-cover-04.png" alt="电紧致" />
-              </div>
-              <div class="active">
-                <img src="/img/brand-ross-therapy-active-04.png" alt="电紧致" />
-                <div class="info">
-                  <div class="tip">电紧致</div>
-                  <div class="subtip">电容模式应用人体组织</div>
-                  <div class="section">
-                    <dl>
-                      <dt>身体护理</dt>
-                      <dd>- 肌肉理疗</dd>
-                      <dd>- 肌肉损伤</dd>
-                      <dd>- 肌肉松弛</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="item">
-              <div class="cover">
-                <div class="tip">电脂解</div>
-                <div class="line"></div>
-                <img src="/img/brand-ross-therapy-cover-05.png" alt="电脂解" />
-              </div>
-              <div class="active">
-                <img src="/img/brand-ross-therapy-active-05.png" alt="电脂解" />
-                <div class="info">
-                  <div class="tip">电脂解</div>
-                  <div class="subtip">电容模式应用人体组织</div>
-                  <div class="section">
-                    <dl>
-                      <dt>身体护理</dt>
-                      <dd>- 肌肉理疗</dd>
-                      <dd>- 肌肉损伤</dd>
-                      <dd>- 肌肉松弛</dd>
-                    </dl>
-                  </div>
-                </div>
-              </div>
-            </div>
+      <div class="container chairman">
+        <div class="section-title">
+          <img src="/img/ross-title-chairman.png" alt="" />
+          <h3>董事长简介</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="cover fl"><img src="/img/ross-chairman-cover.png" alt="" /></div>
+          <div class="info fl">
+            <div class="name">董事长</div>
+            <div class="name-en"><span>RÖS'S ESTÉTICA/</span>Carlos moliner</div>
+            <div class="tip">RÖS'S ESTÉTICA董事长<span>|</span>RÖS'S品牌创始人</div>
+            <div class="line"></div>
+            <div class="description">RÖS'S ESTÉTICA是由······RÖS'S-来自智能科技的成果，重新定义美与健康</div>
           </div>
         </div>
       </div>
-      <!-- 关于疗法 end -->
 
-      <!-- 七大应用 start -->
-      <div class="application wrapper">
-        <div class="container">
-          <div class="title">七大应用</div>
-          <div class="content clearfix">
-            <div class="item">
-              <img src="/img/brand-ross-app-01.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">01</div>
-                  <div class="line"></div>
-                  <div class="tip">美学缺陷</div>
-                  <a href="/appliance-1.html" class="link">立即查看</a>
-                </div>
-              </div>
+      <div class="container word">
+        <div class="section-title">
+          <img src="/img/ross-title-word.png" alt="遍布世界各地" />
+          <h3>遍布世界各地</h3>
+        </div>
+        <div class="content">
+          <img src="/img/ross-word-cover.png" alt="遍布世界各地" class="only-pc" />
+          <img src="/img/ross-word-cover-h5.jpg" alt="遍布世界各地" class="only-mobile" />
+        </div>
+      </div>
+
+      <div class="container brand-activity">
+        <div class="section-title">
+          <img src="/img/ross-title-activity.png" alt="" />
+          <h3>品牌活动</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="item">
+            <img src="/img/ross-brand-activity-01.png" alt="全球专业美容盛会" />
+            <div class="cover">
+              <div class="title">· COSMO BEAUTY Barcelona （全球专业美容盛会)</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-02.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">02</div>
-                  <div class="line"></div>
-                  <div class="tip">减脂塑形</div>
-                  <a href="/appliance-2.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item no-mr">
+            <img src="/img/ross-brand-activity-02.png" alt="最佳创新奖" />
+            <div class="cover">
+              <div class="title">· 最佳创新奖</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-03.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">03</div>
-                  <div class="line"></div>
-                  <div class="tip">肌肉抗衰</div>
-                  <a href="/appliance-3.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item">
+            <img src="/img/ross-brand-activity-03.png" alt="最佳治疗奖项" />
+            <div class="cover">
+              <div class="title">· 最佳治疗奖项</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-04.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">04</div>
-                  <div class="line"></div>
-                  <div class="tip">运动损伤</div>
-                  <a href="/appliance-4.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item">
+            <img src="/img/ross-brand-activity-04.png" alt="著名的拉丁美洲刊物SPA GUIDE 采访了卡洛斯·莫利纳先生" />
+            <div class="cover">
+              <div class="title">· 著名的拉丁美洲刊物SPA GUIDE 采访了卡洛斯·莫利纳先生</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-05.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">05</div>
-                  <div class="line"></div>
-                  <div class="tip">亚健康</div>
-                  <a href="/appliance-5.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item no-mr">
+            <img src="/img/ross-brand-activity-05.png" alt="品牌展会" />
+            <div class="cover">
+              <div class="title">· 品牌展会</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-06.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">06</div>
-                  <div class="line"></div>
-                  <div class="tip">产后康复</div>
-                  <a href="/appliance-6.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item no-mb">
+            <img src="/img/ross-brand-activity-06.png" alt="国外合作商展会" />
+            <div class="cover">
+              <div class="title">· 国外合作商展会</div>
             </div>
-            <div class="item">
-              <img src="/img/brand-ross-app-07.png" alt="" />
-              <div class="active">
-                <div class="info">
-                  <div class="num">07</div>
-                  <div class="line"></div>
-                  <div class="tip">私密健康</div>
-                  <a href="/appliance-7.html" class="link">立即查看</a>
-                </div>
-              </div>
+          </div>
+          <div class="item no-mr no-mb">
+            <img src="/img/ross-brand-activity-07.png" alt="专业培训团队" />
+            <div class="cover">
+              <div class="title">· 专业培训团队</div>
             </div>
           </div>
         </div>
       </div>
-      <!-- 七大应用 end -->
 
-      <!-- 分布区域 start -->
-      <div class="distribution wrapper">
-        <div class="container">
-          <div class="title">分布区域</div>
-          <div class="content">
-            <img src="/img/brand-ross-map.png" alt="" />
-            <div class="section">
-              <div class="item">
-                <div class="row star">44</div>
-                <div class="row">ROS'S坚持科技创新已44年</div>
+      <div class="container honor">
+        <div class="section-title">
+          <img src="/img/ross-title-honor.png" alt="" />
+          <h3>荣誉证书</h3>
+        </div>
+        <div class="content">
+          <div class="scroll-box only-mobile">
+            <img src="/img/ross-honor-01.png" alt="" />
+            <img src="/img/ross-honor-02.png" alt="" />
+            <img src="/img/ross-honor-03.png" alt="" />
+            <img src="/img/ross-honor-04.png" alt="" />
+            <img src="/img/ross-honor-05.png" alt="" />
+          </div>
+          <div class="swiper-container only-pc" id="honorSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-01.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-02.png" alt="" />
               </div>
-              <div class="line"></div>
-              <div class="item">
-                <div class="row company">2000+</div>
-                <div class="row">超过2000+所专业治疗机构</div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-03.png" alt="" />
               </div>
-              <div class="line"></div>
-              <div class="item">
-                <div class="row doctor">10000+</div>
-                <div class="row">全球10000+名ROS'S专业体疗师</div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-04.png" alt="" />
               </div>
-              <div class="line"></div>
-              <div class="item">
-                <div class="row heart">千万</div>
-                <div class="row">ROS'S治疗和服务的人群</div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-05.png" alt="" />
               </div>
             </div>
           </div>
+          <!-- 如果需要导航按钮 -->
+          <div class="swiper-prev"></div>
+          <div class="swiper-next"></div>
         </div>
       </div>
-      <!-- 分布区域 end -->
 
-      <!-- 联系我们 start -->
-      <div class="contact wrapper">
-        <div class="container">
-          <div class="title">联系我们</div>
-          <div class="content clearfix">
-            <div class="cover fl">
-              <img src="/img/brand-ross-concat.png" alt="" />
-            </div>
-            <div class="form-container fr">
-              <textarea placeholder="如有问题请您留言（必填）"></textarea>
-              <div class="submit">提交</div>
+      <div class="container device">
+        <div class="section-title">
+          <img src="/img/ross-title-device.png" alt="" />
+          <h3>部分设备</h3>
+        </div>
+        <div class="content">
+          <div class="scroll-box only-mobile">
+            <img src="/img/ross-device-01.png" alt="" />
+            <img src="/img/ross-device-02.png" alt="" />
+            <img src="/img/ross-device-03.png" alt="" />
+            <img src="/img/ross-device-04.png" alt="" />
+            <img src="/img/ross-device-05.png" alt="" />
+          </div>
+          <div class="swiper-container only-pc" id="deviceSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img src="/img/ross-device-01.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-02.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-03.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-04.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-05.png" alt="" />
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <!-- 联系我们 end -->
     </div>
 
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -458,24 +344,33 @@
     <script src="/libs/jquery-3.6.0.min.js"></script>
     <script src="/js/main.js"></script>
     <script>
-      var mySwiper = new Swiper('#aboutSwiepr', {
+      var aboutSwiepr = new Swiper('#aboutSwiepr', {
         loop: true, // 循环模式选项
         // 如果需要前进后退按钮
         navigation: {
-          nextEl: '.swiper-next',
-          prevEl: '.swiper-prev',
+          nextEl: '#aboutSwiepr .swiper-next',
+          prevEl: '#aboutSwiepr .swiper-prev',
         },
-        on: {
-          slideChangeTransitionEnd: function () {
-            onChangeAboutItemWithSwiper(this.realIndex)
-          },
+      })
+
+      var honorSwiper = new Swiper('#honorSwiper', {
+        loop: true, // 循环模式选项
+        autoplay: true,
+        slidesPerView: 5,
+        spaceBetween: 24,
+        // 如果需要前进后退按钮
+        navigation: {
+          nextEl: '.honor .swiper-next',
+          prevEl: '.honor .swiper-prev',
         },
       })
 
-      // 文案随着轮播图切换
-      function onChangeAboutItemWithSwiper(index) {
-        $('#aboutSwiepr').parent().siblings('.section').children('.item').hide().eq(index).show()
-      }
+      var deviceSwiper = new Swiper('#deviceSwiper', {
+        loop: true, // 循环模式选项
+        autoplay: true,
+        slidesPerView: 5,
+        spaceBetween: 24,
+      })
 
       // 关于疗法 手风琴效果
       function therapyDemoAccordion() {

brand.html

@@ -6,6 +6,7 @@
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
     <title>品牌中心</title>
     <link rel="stylesheet" href="/css/normalize.css" />
+    <link rel="stylesheet" href="/libs/swiper/swiper.min.css" />
     <link rel="stylesheet" href="/css/base.css" />
     <link rel="stylesheet" href="/css/brand.css" />
   </head>
@@ -31,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -53,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -70,116 +80,126 @@
     </nav>
     <!-- 顶部导航栏 end -->
 
-    <!-- banner图 start -->
-    <div class="banner">
-      <img src="/img/about-banner.png" alt="" />
+    <!-- banner区域 start -->
+    <div class="swiper-container banner" id="banner">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <img src="/img/brand-banner.jpg" alt="" />
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
     </div>
-    <!-- banner图 end -->
+    <!-- banner区域 end -->
 
     <div class="main">
       <div class="brand">
         <div class="container">
-          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
+          <div class="cover"><img src="/img/brand-section-bg-01.png" alt="" /></div>
           <div class="content">
-            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
-            <div class="name">西班牙奢华护肤品牌</div>
-            <div class="link">品牌故事</div>
+            <img class="brand-logo" src="/img/brand-logo-01.png" alt="" />
+            <div class="name">云智能体疗管理系统</div>
+            <a href="/product-binary-premium.html" class="link">了解设备</a>
           </div>
         </div>
       </div>
       <div class="brand">
         <div class="container">
-          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
+          <div class="cover"><img src="/img/brand-section-bg-02.png" alt="" /></div>
           <div class="content">
-            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
-            <div class="name">西班牙奢华护肤品牌</div>
-            <div class="link">品牌故事</div>
+            <img class="brand-logo" src="/img/brand-logo-02.png" alt="" />
+            <div class="name">穿戴式肌肉抗衰系统</div>
+            <a href="/product-kestos.html" class="link">了解设备</a>
           </div>
         </div>
       </div>
       <div class="brand">
         <div class="container">
-          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
+          <div class="cover"><img src="/img/brand-section-bg-03.png" alt="" /></div>
           <div class="content">
-            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
-            <div class="name">西班牙奢华护肤品牌</div>
-            <div class="link">品牌故事</div>
+            <img class="brand-logo" src="/img/brand-logo-03.png" alt="" />
+            <div class="name">便携式Tecar体疗设备</div>
+            <a href="/product-intradermik.html" class="link">了解设备</a>
           </div>
         </div>
       </div>
       <div class="brand">
         <div class="container">
-          <div class="cover"><img src="/img/brand-section-bg.png" alt="" /></div>
+          <div class="cover"><img src="/img/brand-section-bg-04.png" alt="" /></div>
           <div class="content">
-            <img class="brand-logo" src="/img/brand-logo.jpg" alt="" />
-            <div class="name">西班牙奢华护肤品牌</div>
-            <div class="link">品牌故事</div>
+            <img class="brand-logo" src="/img/brand-logo-04.png" alt="" />
+            <div class="name">全身紧致抗衰系统</div>
+            <a href="/product-mesobiolift.html" class="link">了解设备</a>
+          </div>
+        </div>
+      </div>
+      <div class="brand">
+        <div class="container">
+          <div class="cover"><img src="/img/brand-section-bg-05.png" alt="" /></div>
+          <div class="content">
+            <img class="brand-logo" src="/img/brand-logo-05.png" alt="" />
+            <div class="name">创新理疗按摩系统</div>
+            <a href="/product-rollaction.html" class="link">了解设备</a>
+          </div>
+        </div>
+      </div>
+      <div class="brand">
+        <div class="container">
+          <div class="cover"><img src="/img/brand-section-bg-06.png" alt="" /></div>
+          <div class="content">
+            <img class="brand-logo" src="/img/brand-logo-06.png" alt="" />
+            <div class="name">专业康复理疗系统</div>
+            <a href="/product-diactivplvs.html" class="link">了解设备</a>
           </div>
         </div>
       </div>
     </div>
 
+
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -188,7 +208,18 @@
       </div>
     </div>
     <!-- 底部区域 end -->
+
     <script src="/libs/jquery-3.6.0.min.js"></script>
+    <script src="/libs/swiper/swiper.min.js"></script>
     <script src="/js/main.js"></script>
+    <script>
+      var mySwiper = new Swiper('#banner', {
+        loop: true, // 循环模式选项
+        // 如果需要分页器
+        pagination: {
+          el: '.swiper-pagination',
+        },
+      })
+    </script>
   </body>
 </html>

case.html

@@ -31,17 +31,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown active">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -53,11 +58,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -146,64 +155,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -212,6 +205,7 @@
       </div>
     </div>
     <!-- 底部区域 end -->
+
     <script src="/libs/jquery-3.6.0.min.js"></script>
     <script src="/js/main.js"></script>
   </body>

contact-consult.html

@@ -33,17 +33,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li ><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -55,11 +60,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown active">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -73,7 +82,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/contact-banner2.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -162,64 +171,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

contact-join-form.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown active">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/contact-banner3.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -253,64 +262,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -319,6 +312,7 @@
       </div>
     </div>
     <!-- 底部区域 end -->
+
     <script src="/libs/jquery-3.6.0.min.js"></script>
     <script src="/js/main.js"></script>
   </body>

contact-join.html

@@ -31,17 +31,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -53,11 +58,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown active">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -71,7 +80,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/contact-banner3.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -129,64 +138,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

contact.html

@@ -33,17 +33,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -55,11 +60,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li>
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown active">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -73,7 +82,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/contact-banner1.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -113,64 +122,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>
@@ -179,6 +172,7 @@
       </div>
     </div>
     <!-- 底部区域 end -->
+
     <script src="/libs/jquery-3.6.0.min.js"></script>
     <script src="/js/main.js"></script>
 

cooperative.html

@@ -32,17 +32,22 @@
         </div>
         <div class="navbar-collapse" id="navbar-collapse">
           <ul class="nav clearfix">
-            <li><a href="/">首页</a></li>
-            <li><a href="/about.html">艾斯佰丽</a></li>
+            <li class="">
+              <a href="/"><span>首页</span><span>Home</span></a>
+            </li>
+            <li>
+              <a href="/about.html"><span>艾斯佰丽</span><span>About Us</span></a>
+            </li>
             <li class="dropdown">
-              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心</a>
-              <a href="/brand.html" class="only-pc">品牌中心</a>
+              <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">品牌中心 </a>
+              <a href="/brand.html" class="only-pc"><span>品牌中心</span><span>Renderings</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/brand.html">品牌中心</a></li>
                 <li><a href="/brand-ross.html">ROS'S介绍</a></li>
                 <li>
                   <a href="javascript:void(0)" class="submenu-toggle">产品系列</a>
                   <ul class="dropdown-submenu clearfix">
+                    <li><a href="/product-binary-premium.html">Binary Premium</a></li>
                     <li><a href="/product-diactivplvs.html">Diactivplvs</a></li>
                     <li><a href="/product-intradermik.html">Intradermik</a></li>
                     <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
@@ -54,11 +59,15 @@
                 <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
               </ul>
             </li>
-            <li class="active"><a href="/cooperative.html">合作加盟</a></li>
-            <li><a href="/news.html">新闻动态</a></li>
+            <li class="active">
+              <a href="/cooperative.html"><span>合作加盟</span><span>Cooperative</span></a>
+            </li>
+            <li>
+              <a href="/news.html"><span>新闻动态</span><span>News</span></a>
+            </li>
             <li class="dropdown">
               <a class="dropdown-toggle only-mobile" data-toggle="dropdown" href="javascript:void(0)">联系我们</a>
-              <a href="/contact.html" class="only-pc">联系我们</a>
+              <a href="/contact.html" class="only-pc"><span>联系我们</span><span>Contact</span></a>
               <ul class="dropdown-menu">
                 <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
                 <li><a href="/contact-consult.html">联系方式</a></li>
@@ -72,7 +81,7 @@
     <!-- 顶部导航栏 end -->
 
     <!-- banner区域 start -->
-    <div class="banner" id="banner">
+    <div class="banner single" id="banner">
       <img src="/img/cooperative_banner.png" alt="" />
     </div>
     <!-- banner区域 end -->
@@ -268,64 +277,48 @@
     <!-- 底部区域 start -->
     <div class="footer">
       <div class="container clearfix">
-        <div class="title only-mobile">关于我们</div>
-        <div class="nav only-mobile clearfix">
-          <div class="item"><a href="/news.html">新闻动态</a></div>
-          <div class="item"><a href="/brand.html">品牌中心</a></div>
-          <div class="item"><a href="/cooperative.html">合作加盟</a></div>
-          <div class="item"><a href="/contact.html">联系我们</a></div>
-          <div class="item"><a href="/contact-join.html">人才招聘</a></div>
+        <div class="logo only-mobile">
+          <img src="/img/logo3.png" alt="" />
+          <img src="/img/logo-ross.png" alt="" />
         </div>
-        <div class="section fl">
-          <div class="logo only-pc"><img src="/img/logo2.png" alt="" /></div>
-          <div class="item mobile">
-            <span>0755-23769340</span>
-            <span>周一至周五：09:00-18:00</span>
+        <div class="title only-mobile">关于我们</div>
+        <div class="section">
+          <div class="logo only-pc">
+            <img src="/img/logo3.png" alt="" />
+            <img src="/img/logo-ross.png" alt="" />
           </div>
-          <div class="item email">518000</div>
+          <div class="item contact">acebelle生物科技（深圳）有限公司（ROS'S中国区总代理）</div>
+          <div class="item mobile">0755-23769340</div>
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
+          <div class="item site">http://www.spainross.com</div>
         </div>
-        <ul class="nav fl only-pc">
-          <li><a href="/">首页</a></li>
-          <li><a href="/brand-ross.html">ROS'S</a></li>
-          <li><a href="/brand.html">系列产品</a></li>
+        <ul class="nav first">
+          <li><a href="/about.html">艾斯百丽</a></li>
+          <li><a href="/brand.html">品牌中心</a></li>
+          <li><a href="/product-binary-premium.html">binary premium</a></li>
+          <li><a href="/product-kestos.html">kestos T2</a></li>
+          <li><a href="/product-intradermik.html">intradermik</a></li>
+          <li><a href="/product-rollaction.html">rollaction</a></li>
         </ul>
-        <ul class="nav fl only-pc">
-          <li><a href="/case.html">案例展示</a></li>
-          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">授权认证</a></li>
+        <ul class="nav second">
+          <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
+          <li><a href="product-diactivplvs.html">Diactivplus</a></li>
+          <li><a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a></li>
+          <li><a href="/cooperative.html">合作加盟</a></li>
           <li><a href="/contact.html">联系我们</a></li>
         </ul>
-        <div class="qrcode fr">
-          <img src="/img/qrcode.png" alt="二维码" />
-          <div class="tip">扫一扫加关注</div>
+        <div class="qrcode-content">
+          <div class="qrcode">
+            <img src="/img/qrcode1.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
+          <div class="qrcode">
+            <img src="/img/qrcode2.png" alt="二维码" />
+            <div class="tip">西班牙ROSS</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
-      <div class="link only-pc">
-        <a href="#">法律声明</a>
-        <i></i>
-        <a href="#">隐私政策</a>
-        <i></i>
-        <a href="#">购物付款类型</a>
-        <i></i>
-        <a href="#">服务付款类型</a>
-        <i></i>
-        <a href="#">支付方式</a>
-        <i></i>
-        <a href="#">产品售后与申诉</a>
-        <i></i>
-        <a href="#">服务投诉与申诉</a>
-        <i></i>
-        <a href="#">族蚂议价流程</a>
-        <i></i>
-        <a href="#">关于族蚂网</a>
-        <i></i>
-        <a href="#">如何创建主体</a>
-        <i></i>
-        <a href="#">违规举报</a>
-        <i></i>
-        <a href="#">知识产权维护</a>
-      </div>
       <div class="copyright">
         <a href="https://www.caimei365.com/" target="_blank">本网站由采美365网提供技术支持</a>
         <span>Copyright ©2022</span>

css/base.css

@@ -7,7 +7,7 @@ body {
 input,
 textarea,
 select {
-  outline-color: #0688d2;
+  outline-color: #f3920d;
 }
 
 h1,
@@ -149,23 +149,58 @@ a {
     margin-left: 18px;
   }
 
-  .banner {
+  .section-title {
     position: relative;
-    width: 100%;
-    min-width: 1200px;
-    height: 530px;
-    overflow: hidden;
+    text-align: center;
+    height: 70px;
+    margin: 100px 0 60px;
+  }
+  .section-title img {
+    display: block;
+    height: 58px;
+    margin: 0 auto;
   }
-  .banner img {
+  .section-title h3 {
     position: absolute;
     left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+    bottom: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    font-size: 41px;
+    font-weight: normal;
+    font-weight: bold;
+  }
+
+  .banner.swiper-container {
+    width: 100%;
+    height: 700px;
+  }
+  .banner.swiper-container .swiper-slide img {
+    display: block;
+    height: 100%;
+  }
+  .banner.swiper-container .swiper-pagination-bullet {
+    width: 10px;
+    height: 10px;
+    background: #fff;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 1px solid #000;
+  }
+  .banner.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
+    background: #000;
+  }
+  .banner.single {
+    width: 100%;
+    height: 530px;
+  }
+  .banner.single img {
+    display: block;
+    height: 530px;
   }
 
   .navbar {
-    height: 68px;
+    height: 90px;
     background-color: #fff;
     position: -webkit-sticky;
     position: sticky;
@@ -174,7 +209,11 @@ a {
     z-index: 90;
   }
   .navbar .container {
-    height: 68px;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 40px;
+    height: 90px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -201,7 +240,6 @@ a {
   }
   .navbar .navbar-header .logo img {
     display: block;
-    width: 64px;
     height: 42px;
   }
   .navbar .navbar-collapse .nav {
@@ -225,7 +263,7 @@ a {
     display: none;
     width: 28px;
     height: 3px;
-    background: #0688d2;
+    background: #f3920d;
     position: absolute;
     left: 50%;
     bottom: 0;
@@ -233,13 +271,13 @@ a {
     transform: translateX(-50%);
   }
   .navbar .navbar-collapse .nav > li.active > a {
-    color: #0688d2;
+    color: #f3920d;
   }
   .navbar .navbar-collapse .nav > li.active::after {
     display: block;
   }
   .navbar .navbar-collapse .nav > li:hover > a {
-    color: #0688d2;
+    color: #f3920d;
   }
   .navbar .navbar-collapse .nav > li:hover::after {
     display: block;
@@ -248,8 +286,19 @@ a {
     margin-left: 0;
   }
   .navbar .navbar-collapse .nav > li > a {
+    height: 66px;
     display: block;
-    line-height: 68px;
+  }
+  .navbar .navbar-collapse .nav > li > a span {
+    display: block;
+    text-align: center;
+  }
+  .navbar .navbar-collapse .nav > li > a span:first-child {
+    font-size: 28px;
+  }
+  .navbar .navbar-collapse .nav > li > a span:last-child {
+    font-size: 20px;
+    margin-top: 2px;
   }
   .navbar .navbar-collapse .nav .dropdown {
     position: relative;
@@ -259,7 +308,7 @@ a {
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu {
     display: none;
-    top: 68px;
+    top: 66px;
     position: absolute;
     background: #fff;
     left: 50%;
@@ -267,7 +316,7 @@ a {
     transform: translateX(-50%);
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover {
-    background: #0688d2;
+    background: #f3920d;
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover > a {
     color: #fff;
@@ -280,11 +329,11 @@ a {
     line-height: 50px;
     text-align: center;
     width: 128px;
-    font-size: 14px;
+    font-size: 20px;
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu .submenu-toggle {
     background: url(/img/icon-arrow-right.png) no-repeat;
-    background-position: 90% center;
+    background-position: 98% center;
     background-size: 18px;
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu {
@@ -293,54 +342,61 @@ a {
     top: 0;
     left: 128px;
     background: #fff;
-    width: 304px;
+    width: 220px;
     min-height: 200px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding: 16px 24px 16px 23px;
+    padding: 10px 24px;
     border-left: 1px solid #e8e8e8;
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li {
-    float: left;
-    margin: 16px 16px 0 0;
-  }
-  .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li:nth-child(2n) {
-    margin-right: 0;
-  }
-  .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li:nth-child(1), .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li:nth-child(2) {
-    margin-top: 0;
+    margin: 9px 0;
   }
   .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li > a {
     display: block;
-    width: 120px;
     line-height: 32px;
     text-align: center;
-    background: #eff9ff;
-    color: #0688d2;
+    background: #eee;
+    color: #000;
     font-size: 14px;
   }
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu > li > a:hover {
+    color: #f3920d;
+    background-color: rgba(243, 146, 13, 0.3);
+  }
 
   .footer {
     margin-top: 120px;
-    padding-top: 38px;
-    padding-bottom: 24px;
+    padding-top: 42px;
     background: #1b1b1b;
   }
+  .footer .container {
+    width: 1650px;
+  }
   .footer .container .section {
-    margin-right: 180px;
+    margin-right: 34px;
+    float: left;
+  }
+  .footer .container .section .logo img:first-child {
+    width: 188px;
+  }
+  .footer .container .section .logo img:last-child {
+    width: 136px;
+    margin-left: 30px;
   }
   .footer .container .section .item {
     position: relative;
-    color: rgba(255, 255, 255, 0.5);
     margin-top: 20px;
-    padding-left: 30px;
-    font-size: 12px;
+    padding-left: 44px;
+    font-size: 25px;
+    color: #fff;
+    font-weight: lighter;
   }
   .footer .container .section .item::before {
     content: "";
     display: block;
-    width: 20px;
-    height: 20px;
+    width: 27px;
+    height: 27px;
     position: absolute;
     left: 0;
     top: 50%;
@@ -348,7 +404,7 @@ a {
     transform: translateY(-50%);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 20px;
+    background-size: 27px;
   }
   .footer .container .section .item.mobile::before {
     background-image: url(/img/icon-mobile.png);
@@ -362,44 +418,67 @@ a {
   .footer .container .section .item.address::before {
     background-image: url(/img/icon-address.png);
   }
+  .footer .container .section .item.contact::before {
+    background-image: url(/img/icon-contact.png);
+  }
+  .footer .container .section .item.site::before {
+    background-image: url(/img/icon-site.png);
+  }
   .footer .container .nav {
-    margin-left: 110px;
+    margin-left: 86px;
+    float: left;
   }
   .footer .container .nav li {
-    margin-top: 25px;
     text-align: center;
+    margin-top: 14px;
   }
   .footer .container .nav li:first-child {
     margin-top: 12px;
   }
   .footer .container .nav li a {
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.5);
+    font-size: 20px;
+    font-weight: lighter;
+    color: #fff;
   }
   .footer .container .nav li a:hover {
-    color: #0688d2;
+    color: #f3920d;
+  }
+  .footer .container .qrcode-content {
+    float: right;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    margin-top: 80px;
   }
-  .footer .container .qrcode {
-    padding: 7px;
-    background: rgba(255, 255, 255, 0.06);
+  .footer .container .qrcode-content .qrcode {
+    width: 141px;
+    text-align: center;
+    margin-left: 25px;
   }
-  .footer .container .qrcode img {
-    display: block;
-    width: 94px;
-    height: 94px;
+  .footer .container .qrcode-content .qrcode img {
+    width: 119px;
+    height: 119px;
     background-color: #fff;
   }
-  .footer .container .qrcode .tip {
-    font-size: 12px;
+  .footer .container .qrcode-content .qrcode .tip {
+    font-size: 25px;
     color: #ffffff;
-    margin-top: 5px;
+    margin-top: 11px;
     text-align: center;
+    font-weight: lighter;
   }
   .footer .line {
-    width: 100%;
+    width: 1784px;
+    margin: 0 auto;
     height: 1px;
-    background-color: rgba(255, 255, 255, 0.3);
-    margin: 32px 0 24px;
+    background-color: #fff;
+    margin-top: 40px;
   }
   .footer .link {
     display: -webkit-box;
@@ -424,16 +503,17 @@ a {
     font-size: 12px;
   }
   .footer .link a:hover {
-    color: #0688d2;
+    color: #f3920d;
   }
   .footer .copyright {
-    margin-top: 20px;
     text-align: center;
-    color: rgba(255, 255, 255, 0.4);
-    font-size: 12px;
+    color: #bebebe;
+    font-size: 22px;
+    font-weight: lighter;
+    line-height: 64px;
   }
   .footer .copyright a {
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
     text-decoration: underline;
   }
   .footer .copyright * {
@@ -454,20 +534,66 @@ a {
     white-space: nowrap;
     font-size: 0;
   }
+  .scroll-box::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .scroll-box::-webkit-scrollbar-thumb {
+    display: none;
+  }
 
-  .banner {
+  .section-title {
     position: relative;
-    width: 100%;
-    height: 2.74rem;
-    overflow: hidden;
+    text-align: center;
+    height: 0.64rem;
+    margin: 1rem 0 0.65rem;
+  }
+  .section-title img {
+    display: block;
+    height: 0.58rem;
+    margin: 0 auto;
   }
-  .banner img {
+  .section-title h3 {
     position: absolute;
-    height: 2.74rem;
     left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+    bottom: 0;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    font-size: 0.34rem;
+    font-weight: bold;
+  }
+
+  .banner.swiper-container {
+    width: 7.5rem;
+    height: 2.74rem;
+  }
+  .banner.swiper-container .swiper-slide img {
+    display: block;
+    width: 7.5rem;
+    height: 2.74rem;
+  }
+  .banner.swiper-container .swiper-pagination {
+    bottom: 0;
+  }
+  .banner.swiper-container .swiper-pagination .swiper-pagination-bullet {
+    width: 0.1rem;
+    height: 0.1rem;
+    background: #fff;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border: 0.01rem solid #000;
+  }
+  .banner.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+    background: #000;
+  }
+  .banner.single {
+    width: 100%;
+    height: 2.08rem;
+  }
+  .banner.single img {
+    display: block;
+    width: 100%;
+    height: 2.08rem;
   }
 
   .navbar {
@@ -506,14 +632,14 @@ a {
     align-items: center;
     width: 2rem;
     height: 1.04rem;
-    background: #0688d2;
+    background: #f3920d;
   }
   .navbar .navbar-header .logo h1 {
     font-size: 0;
   }
   .navbar .navbar-header .logo img {
     display: block;
-    width: 1.14rem;
+    width: 1.78rem;
   }
   .navbar .navbar-header .navbar-toggle {
     display: -webkit-box;
@@ -528,7 +654,7 @@ a {
   }
   .navbar .navbar-header .navbar-toggle .name {
     font-size: 0.3rem;
-    color: #0688d2;
+    color: #f3920d;
     margin-right: 0.16rem;
   }
   .navbar .navbar-header .navbar-toggle .icon-bar {
@@ -592,6 +718,9 @@ a {
     font-size: 0.3rem;
     line-height: 1rem;
   }
+  .navbar .navbar-collapse .nav > li > a span:last-child {
+    display: none;
+  }
   .navbar .navbar-collapse .nav .dropdown .dropdown-toggle {
     background-image: url(/img/icon-menu-arrow-down.png);
     background-position: right center;
@@ -634,31 +763,43 @@ a {
 
   .footer {
     position: relative;
-    padding: 0.4rem;
-    background: #1b1b1b;
+    background: #050001;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin-top: 1rem;
   }
+  .footer .container {
+    width: 6.86rem;
+    margin: 0 auto;
+    position: relative;
+  }
+  .footer .container .logo img:first-child {
+    width: 1.88rem;
+  }
+  .footer .container .logo img:last-child {
+    width: 1.36rem;
+  }
   .footer .container .title {
     font-size: 0.3rem;
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
+    margin-top: 0.46rem;
   }
   .footer .container .section {
+    opacity: 0.8;
     width: 100%;
-    padding: 0.55rem 0;
-    border-top: 0.01rem solid rgba(255, 255, 255, 0.3);
-    border-bottom: 0.01rem solid rgba(255, 255, 255, 0.3);
-    margin-bottom: 0.45rem;
-    margin-top: 0.65rem;
+    padding: 0.32rem 0;
+    margin-top: 3.8rem;
+    border: 0.01rem solid #fff;
+    border-left: 0;
+    border-right: 0;
+    border-bottom-color: rgba(255, 255, 255, 0.3);
   }
   .footer .container .section .item {
     position: relative;
-    color: rgba(255, 255, 255, 0.5);
     margin-top: 0.25rem;
     padding-left: 0.6rem;
     font-size: 0.24rem;
-    line-height: 0.4rem;
+    color: #fff;
   }
   .footer .container .section .item:nth-child(2) {
     margin-top: 0;
@@ -689,46 +830,71 @@ a {
   .footer .container .section .item.address::before {
     background-image: url(/img/icon-address.png);
   }
-  .footer .container .nav .item {
-    float: left;
-    margin-right: 0.8rem;
-    margin-top: 0.32rem;
+  .footer .container .section .item.contact::before {
+    background-image: url(/img/icon-contact.png);
   }
-  .footer .container .nav .item:nth-child(4n) {
-    margin-right: 0;
+  .footer .container .section .item.site::before {
+    background-image: url(/img/icon-site.png);
+  }
+  .footer .container .nav {
+    opacity: 0.8;
+    position: absolute;
+    top: 2.11rem;
   }
-  .footer .container .nav .item a {
+  .footer .container .nav.first {
+    left: 0;
+  }
+  .footer .container .nav.second {
+    left: 3.91rem;
+  }
+  .footer .container .nav li {
+    margin-top: 0.24rem;
+  }
+  .footer .container .nav li a {
     display: block;
-    color: rgba(255, 255, 255, 0.5);
     font-size: 0.24rem;
+    color: #fff;
+  }
+  .footer .container .qrcode-content {
+    position: absolute;
+    right: 0;
+    bottom: -2.04rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+  .footer .container .qrcode-content .qrcode:first-child {
+    margin-right: 0.16rem;
   }
-  .footer .container .qrcode img {
+  .footer .container .qrcode-content .qrcode img {
     display: block;
-    width: 1.36rem;
-    height: 1.36rem;
+    width: 1.19rem;
+    height: 1.19rem;
     background-color: #fff;
   }
-  .footer .container .qrcode .tip {
+  .footer .container .qrcode-content .qrcode .tip {
     font-size: 0.2rem;
     color: #ffffff;
     margin-top: 0.16rem;
     text-align: center;
+    opacity: 0.8;
   }
   .footer .copyright {
     width: 100%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    bottom: 0;
     text-align: left;
-    color: rgba(255, 255, 255, 0.4);
+    color: #fff;
     font-size: 0.2rem;
     padding: 0.4rem;
+    opacity: 0.8;
   }
   .footer .copyright a {
     width: 4.2rem;
-    color: rgba(255, 255, 255, 0.4);
+    color: #fff;
   }
   .footer .copyright * {
     display: block;

css/base.scss

@@ -7,7 +7,7 @@ body {
 input,
 textarea,
 select {
-  outline-color: #0688d2;
+  outline-color: #f3920d;
 }
 
 h1,
@@ -149,25 +149,68 @@ a {
     margin-left: 18px;
   }
 
-  .banner {
+  .section-title {
     position: relative;
-    width: 100%;
-    min-width: 1200px;
-    height: 530px;
-    overflow: hidden;
-
+    text-align: center;
+    height: 70px;
+    margin: 100px 0 60px;
     img {
+      display: block;
+      height: 58px;
+      margin: 0 auto;
+    }
+    h3 {
       position: absolute;
       left: 50%;
-      top: 50%;
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
+      bottom: 0;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      font-size: 41px;
+      font-weight: normal;
+      font-weight: bold;
+    }
+  }
+
+  .banner {
+    &.swiper-container {
+      width: 100%;
+      height: 700px;
+
+      .swiper-slide {
+        img {
+          display: block;
+          height: 100%;
+        }
+      }
+
+      .swiper-pagination-bullet {
+        width: 10px;
+        height: 10px;
+        background: #fff;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border: 1px solid #000;
+
+        &.swiper-pagination-bullet-active {
+          background: #000;
+        }
+      }
+    }
+
+    &.single {
+      width: 100%;
+      height: 530px;
+
+      img {
+        display: block;
+        height: 530px;
+      }
     }
   }
 
   // 导航菜单
   .navbar {
-    height: 68px;
+    height: 90px;
     background-color: #fff;
     position: -webkit-sticky;
     position: sticky;
@@ -175,7 +218,11 @@ a {
     top: 0;
     z-index: 90;
     .container {
-      height: 68px;
+      width: 100%;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      padding: 0 40px;
+      height: 90px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
@@ -203,7 +250,7 @@ a {
         }
         img {
           display: block;
-          width: 64px;
+          // width: 64px;
           height: 42px;
         }
       }
@@ -230,7 +277,7 @@ a {
             display: none;
             width: 28px;
             height: 3px;
-            background: #0688d2;
+            background: #f3920d;
             position: absolute;
             left: 50%;
             bottom: 0;
@@ -240,7 +287,7 @@ a {
 
           &.active {
             & > a {
-              color: #0688d2;
+              color: #f3920d;
             }
             &::after {
               display: block;
@@ -249,7 +296,7 @@ a {
 
           &:hover {
             & > a {
-              color: #0688d2;
+              color: #f3920d;
             }
             &::after {
               display: block;
@@ -260,8 +307,21 @@ a {
             margin-left: 0;
           }
           & > a {
+            height: 66px;
             display: block;
-            line-height: 68px;
+            span {
+              display: block;
+              text-align: center;
+
+              &:first-child {
+                font-size: 28px;
+              }
+
+              &:last-child {
+                font-size: 20px;
+                margin-top: 2px;
+              }
+            }
           }
         }
 
@@ -276,7 +336,7 @@ a {
 
           .dropdown-menu {
             display: none;
-            top: 68px;
+            top: 66px;
             position: absolute;
             background: #fff;
             left: 50%;
@@ -285,7 +345,7 @@ a {
 
             & > li {
               &:hover {
-                background: #0688d2;
+                background: #f3920d;
                 & > a {
                   color: #fff;
                 }
@@ -299,13 +359,13 @@ a {
                 line-height: 50px;
                 text-align: center;
                 width: 128px;
-                font-size: 14px;
+                font-size: 20px;
               }
             }
 
             .submenu-toggle {
               background: url(/img/icon-arrow-right.png) no-repeat;
-              background-position: 90% center;
+              background-position: 98% center;
               background-size: 18px;
             }
 
@@ -315,34 +375,38 @@ a {
               top: 0;
               left: 128px;
               background: #fff;
-              width: 304px;
+              width: 220px;
               min-height: 200px;
               -webkit-box-sizing: border-box;
               box-sizing: border-box;
-              padding: 16px 24px 16px 23px;
+              // padding: 16px 24px 16px 23px;
+              padding: 10px 24px;
               border-left: 1px solid #e8e8e8;
 
               & > li {
-                float: left;
-                margin: 16px 16px 0 0;
+                // float: left;
+                // &:nth-child(2n) {
+                //   margin-right: 0;
+                // }
 
-                &:nth-child(2n) {
-                  margin-right: 0;
-                }
-
-                &:nth-child(1),
-                &:nth-child(2) {
-                  margin-top: 0;
-                }
+                // &:nth-child(1),
+                // &:nth-child(2) {
+                //   margin-top: 0;
+                // }
+                margin: 9px 0;
 
                 & > a {
                   display: block;
-                  width: 120px;
                   line-height: 32px;
                   text-align: center;
-                  background: #eff9ff;
-                  color: #0688d2;
+                  background: #eee;
+                  color: #000;
                   font-size: 14px;
+
+                  &:hover {
+                    color: #f3920d;
+                    background-color: rgb(243, 146, 13, 0.3);
+                  }
                 }
               }
             }
@@ -355,25 +419,41 @@ a {
   // 底部区域
   .footer {
     margin-top: 120px;
-    padding-top: 38px;
-    padding-bottom: 24px;
+    padding-top: 42px;
     background: #1b1b1b;
 
     .container {
+      width: 1650px;
       .section {
-        margin-right: 180px;
+        margin-right: 34px;
+        float: left;
+
+        .logo {
+          img {
+            &:first-child {
+              width: 188px;
+            }
+
+            &:last-child {
+              width: 136px;
+              margin-left: 30px;
+            }
+          }
+        }
+
         .item {
           position: relative;
-          color: rgba(255, 255, 255, 0.5);
           margin-top: 20px;
-          padding-left: 30px;
-          font-size: 12px;
+          padding-left: 44px;
+          font-size: 25px;
+          color: #fff;
+          font-weight: lighter;
 
           &::before {
             content: '';
             display: block;
-            width: 20px;
-            height: 20px;
+            width: 27px;
+            height: 27px;
             position: absolute;
             left: 0;
             top: 50%;
@@ -381,7 +461,7 @@ a {
             transform: translateY(-50%);
             background-repeat: no-repeat;
             background-position: center;
-            background-size: 20px;
+            background-size: 27px;
           }
 
           &.mobile {
@@ -406,51 +486,80 @@ a {
               background-image: url(/img/icon-address.png);
             }
           }
+
+          &.contact {
+            &::before {
+              background-image: url(/img/icon-contact.png);
+            }
+          }
+
+          &.site {
+            &::before {
+              background-image: url(/img/icon-site.png);
+            }
+          }
         }
       }
 
       .nav {
-        margin-left: 110px;
+        margin-left: 86px;
+        float: left;
+
         li {
-          margin-top: 25px;
           text-align: center;
+          margin-top: 14px;
           &:first-child {
             margin-top: 12px;
           }
           a {
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.5);
-
+            font-size: 20px;
+            font-weight: lighter;
+            color: #fff;
             &:hover {
-              color: #0688d2;
+              color: #f3920d;
             }
           }
         }
       }
 
-      .qrcode {
-        padding: 7px;
-        background: rgba(255, 255, 255, 0.06);
-        img {
-          display: block;
-          width: 94px;
-          height: 94px;
-          background-color: #fff;
-        }
-        .tip {
-          font-size: 12px;
-          color: #ffffff;
-          margin-top: 5px;
+      .qrcode-content {
+        float: right;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: flex-start;
+        margin-top: 80px;
+        .qrcode {
+          width: 141px;
           text-align: center;
+          margin-left: 25px;
+          img {
+            width: 119px;
+            height: 119px;
+            background-color: #fff;
+          }
+          .tip {
+            font-size: 25px;
+            color: #ffffff;
+            margin-top: 11px;
+            text-align: center;
+            font-weight: lighter;
+          }
         }
       }
     }
 
     .line {
-      width: 100%;
+      width: 1784px;
+      margin: 0 auto;
       height: 1px;
-      background-color: rgba(255, 255, 255, 0.3);
-      margin: 32px 0 24px;
+      background-color: #fff;
+      margin-top: 40px;
     }
 
     .link {
@@ -474,18 +583,20 @@ a {
         color: rgba(255, 255, 255, 0.4);
         font-size: 12px;
         &:hover {
-          color: #0688d2;
+          color: #f3920d;
         }
       }
     }
 
     .copyright {
-      margin-top: 20px;
       text-align: center;
-      color: rgba(255, 255, 255, 0.4);
-      font-size: 12px;
+      color: #bebebe;
+      font-size: 22px;
+      font-weight: lighter;
+      line-height: 64px;
       a {
-        color: rgba(255, 255, 255, 0.8);
+        // color: rgba(255, 255, 255, 0.8);
+        color: #fff;
         text-decoration: underline;
       }
       * {
@@ -508,36 +619,78 @@ a {
     overflow-x: auto;
     white-space: nowrap;
     font-size: 0;
-  }
-  // .mt18 {
-  //   margin-top: 18px;
-  // }
 
-  // .mr18 {
-  //   margin-right: 18px;
-  // }
-
-  // .mb18 {
-  //   margin-bottom: 18px;
-  // }
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
 
-  // .ml18 {
-  //   margin-left: 18px;
-  // }
+    &::-webkit-scrollbar-thumb {
+      display: none;
+    }
+  }
 
-  .banner {
+  .section-title {
     position: relative;
-    width: 100%;
-    height: 2.74rem;
-    overflow: hidden;
-
+    text-align: center;
+    height: 0.64rem;
+    margin: 1rem 0 0.65rem;
     img {
+      display: block;
+      height: 0.58rem;
+      margin: 0 auto;
+    }
+    h3 {
       position: absolute;
-      height: 2.74rem;
       left: 50%;
-      top: 50%;
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
+      bottom: 0;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      font-size: 0.34rem;
+      font-weight: bold;
+    }
+  }
+
+  .banner {
+    &.swiper-container {
+      width: 7.5rem;
+      height: 2.74rem;
+
+      .swiper-slide {
+        img {
+          display: block;
+          width: 7.5rem;
+          height: 2.74rem;
+        }
+      }
+
+      .swiper-pagination {
+        bottom: 0;
+
+        .swiper-pagination-bullet {
+          width: 0.1rem;
+          height: 0.1rem;
+          background: #fff;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          border: 0.01rem solid #000;
+
+          &.swiper-pagination-bullet-active {
+            background: #000;
+          }
+        }
+      }
+    }
+
+    &.single {
+      width: 100%;
+      height: 2.08rem;
+
+      img {
+        display: block;
+        width: 100%;
+        height: 2.08rem;
+      }
     }
   }
 
@@ -579,13 +732,13 @@ a {
         align-items: center;
         width: 2rem;
         height: 1.04rem;
-        background: #0688d2;
+        background: #f3920d;
         h1 {
           font-size: 0;
         }
         img {
           display: block;
-          width: 1.14rem;
+          width: 1.78rem;
         }
       }
 
@@ -601,7 +754,7 @@ a {
         align-items: center;
         .name {
           font-size: 0.3rem;
-          color: #0688d2;
+          color: #f3920d;
           margin-right: 0.16rem;
         }
         .icon-bar {
@@ -673,6 +826,12 @@ a {
           & > a {
             font-size: 0.3rem;
             line-height: 1rem;
+
+            span {
+              &:last-child {
+                display: none;
+              }
+            }
           }
         }
         .dropdown {
@@ -731,32 +890,49 @@ a {
   // 底部区域
   .footer {
     position: relative;
-    padding: 0.4rem;
-    background: #1b1b1b;
+    background: #050001;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin-top: 1rem;
 
     .container {
+      width: 6.86rem;
+      margin: 0 auto;
+      position: relative;
+
+      .logo {
+        img {
+          &:first-child {
+            width: 1.88rem;
+          }
+
+          &:last-child {
+            width: 1.36rem;
+          }
+        }
+      }
+
       .title {
         font-size: 0.3rem;
-        color: rgba(255, 255, 255, 0.8);
+        color: #fff;
+        margin-top: 0.46rem;
       }
 
       .section {
+        opacity: 0.8;
         width: 100%;
-        padding: 0.55rem 0;
-        border-top: 0.01rem solid rgba(255, 255, 255, 0.3);
-        border-bottom: 0.01rem solid rgba(255, 255, 255, 0.3);
-        margin-bottom: 0.45rem;
-        margin-top: 0.65rem;
+        padding: 0.32rem 0;
+        margin-top: 3.8rem;
+        border: 0.01rem solid #fff;
+        border-left: 0;
+        border-right: 0;
+        border-bottom-color: rgba(255, 255, 255, 0.3);
         .item {
           position: relative;
-          color: rgba(255, 255, 255, 0.5);
           margin-top: 0.25rem;
           padding-left: 0.6rem;
           font-size: 0.24rem;
-          line-height: 0.4rem;
+          color: #fff;
 
           &:nth-child(2) {
             margin-top: 0;
@@ -799,37 +975,71 @@ a {
               background-image: url(/img/icon-address.png);
             }
           }
+
+          &.contact {
+            &::before {
+              background-image: url(/img/icon-contact.png);
+            }
+          }
+
+          &.site {
+            &::before {
+              background-image: url(/img/icon-site.png);
+            }
+          }
         }
       }
 
       .nav {
-        .item {
-          float: left;
-          margin-right: 0.8rem;
-          margin-top: 0.32rem;
-          &:nth-child(4n) {
-            margin-right: 0;
-          }
+        opacity: 0.8;
+        position: absolute;
+        top: 2.11rem;
+
+        &.first {
+          left: 0;
+        }
+
+        &.second {
+          left: 3.91rem;
+        }
+        li {
+          margin-top: 0.24rem;
           a {
             display: block;
-            color: rgba(255, 255, 255, 0.5);
             font-size: 0.24rem;
+            color: #fff;
           }
         }
       }
 
-      .qrcode {
-        img {
-          display: block;
-          width: 1.36rem;
-          height: 1.36rem;
-          background-color: #fff;
-        }
-        .tip {
-          font-size: 0.2rem;
-          color: #ffffff;
-          margin-top: 0.16rem;
-          text-align: center;
+      .qrcode-content {
+        position: absolute;
+        right: 0;
+        bottom: -2.04rem;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+
+        .qrcode {
+          &:first-child {
+            margin-right: 0.16rem;
+          }
+          img {
+            display: block;
+            width: 1.19rem;
+            height: 1.19rem;
+            background-color: #fff;
+          }
+          .tip {
+            font-size: 0.2rem;
+            color: #ffffff;
+            margin-top: 0.16rem;
+            text-align: center;
+            opacity: 0.8;
+          }
         }
       }
     }
@@ -838,16 +1048,14 @@ a {
       width: 100%;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      position: absolute;
-      left: 0;
-      bottom: 0;
       text-align: left;
-      color: rgba(255, 255, 255, 0.4);
+      color: #fff;
       font-size: 0.2rem;
       padding: 0.4rem;
+      opacity: 0.8;
       a {
         width: 4.2rem;
-        color: rgba(255, 255, 255, 0.4);
+        color: #fff;
       }
       * {
         display: block;

css/brand-ross.css

@@ -1,33 +1,33 @@
 @media screen and (min-width: 768px) {
   .advertising {
     width: 100%;
-    height: 1055px;
+    height: 973px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #f2f2f2;
     overflow: hidden;
-    background: url(/img/brand-ross-ad.jpg) no-repeat center;
-    background-size: cover;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
   }
   .advertising .video-container {
     position: relative;
-    width: 1200px;
-    height: 570px;
+    width: 960px;
+    height: 540px;
     margin: 0 auto;
-    margin-top: 485px;
-    background: pink;
+    margin-top: 433px;
   }
   .advertising .video-container .play {
     position: absolute;
-    width: 64px;
-    height: 64px;
+    width: 132px;
+    height: 132px;
     border-radius: 50%;
     z-index: 2;
-    bottom: 155px;
+    top: 50%;
     left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
     cursor: pointer;
+    background: url(/img/ross-video-play.png) no-repeat center;
   }
   .advertising .video-container video {
     display: block;
@@ -35,26 +35,16 @@
     height: 100%;
   }
 
-  .main .wrapper {
-    margin-top: 120px;
-  }
-  .main .wrapper .title {
-    font-size: 34px;
-    text-align: center;
-  }
-  .main .wrapper .content {
-    margin-top: 80px;
-  }
-  .main .about .content {
+  .main .about .content .about-swiper {
     height: 540px;
   }
-  .main .about .content .swiper {
+  .main .about .content .about-swiper .swiper {
     width: 720px;
     height: 100%;
     position: relative;
   }
-  .main .about .content .swiper .swiper-prev,
-.main .about .content .swiper .swiper-next {
+  .main .about .content .about-swiper .swiper .swiper-prev,
+.main .about .content .about-swiper .swiper .swiper-next {
     position: absolute;
     left: 0;
     top: 50%;
@@ -67,695 +57,454 @@
     cursor: pointer;
     background: url(/img/icon-arrow-left.png) no-repeat center;
   }
-  .main .about .content .swiper .swiper-next {
+  .main .about .content .about-swiper .swiper .swiper-next {
     left: unset;
     right: 0;
     background: url(/img/icon-arrow-right.png) no-repeat center;
   }
-  .main .about .content .swiper img {
+  .main .about .content .about-swiper .swiper img {
     width: 100%;
     height: 540px;
   }
-  .main .about .content .section {
+  .main .about .content .about-swiper .section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
     width: 480px;
     height: 540px;
     background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
     background-color: #f3920d;
     background-repeat: no-repeat;
-    background-position: 48px 48px, 341px 410px;
-  }
-  .main .about .content .section .item {
-    width: 390px;
-    margin: 0 auto;
-    margin-top: 73px;
-    display: none;
-  }
-  .main .about .content .section .item .num {
-    font-size: 32px;
+    background-position: 36px 36px, 353px 422px;
     color: #fff;
-    text-align: center;
-  }
-  .main .about .content .section .item .line {
-    width: 1px;
-    height: 24px;
-    margin: 25px auto 40px;
-    background: #fff;
-  }
-  .main .about .content .section .item .desc {
-    font-size: 16px;
-    color: #fff;
-    line-height: 40px;
-  }
-  .main .therapy {
-    background: url(/img/about-bg.png) no-repeat top center;
-    padding-top: 80px;
-  }
-  .main .therapy .content {
-    margin-top: 80px;
-    height: 540px;
-    background-color: #fff;
-  }
-  .main .therapy .content .item {
-    float: left;
-    width: 180px;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
   }
-  .main .therapy .content .item.hover {
-    width: 480px;
-  }
-  .main .therapy .content .item.hover .cover {
-    opacity: 0;
-  }
-  .main .therapy .content .item.hover .active {
-    opacity: 1;
-  }
-  .main .therapy .content .item:first-child .cover {
-    border-left: 0;
-  }
-  .main .therapy .content .item .cover,
-.main .therapy .content .item .active {
-    -webkit-transition: opacity 0.4s;
-    transition: opacity 0.4s;
-  }
-  .main .therapy .content .item .cover {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
+  .main .about .content .about-swiper .section .title {
+    font-size: 25px;
+    font-weight: bold;
+    padding: 0 24px;
     width: 100%;
-    height: 100%;
+    text-align: left;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    border-left: 1px solid rgba(243, 146, 13, 0.2);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(243, 146, 13, 0.3)));
-    background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
-    overflow: hidden;
-    opacity: 1;
-  }
-  .main .therapy .content .item .cover .tip {
-    font-size: 16px;
-    text-align: center;
-    margin-top: 57px;
-    margin-bottom: 40px;
-    font-weight: bold;
-  }
-  .main .therapy .content .item .cover .line {
-    width: 24px;
-    height: 2px;
-    background: #f3920d;
-    margin: 0 auto;
   }
-  .main .therapy .content .item .cover img {
-    position: absolute;
-    width: 128px;
-    height: 128px;
-    bottom: 44px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  .main .therapy .content .item .active {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    opacity: 0;
-    width: 480px;
-    height: 100%;
-    text-align: center;
-    color: #fff;
-  }
-  .main .therapy .content .item .active img {
-    width: 100%;
-    height: 100%;
+  .main .about .content .about-swiper .section .description {
+    font-size: 24px;
+    font-weight: lighter;
+    line-height: 44px;
+    padding: 0 24px;
+    text-align: justify;
+    word-break: break-all;
+    margin-top: 12px;
   }
-  .main .therapy .content .item .active .info {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+  .main .about .content .more-content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
+    margin-top: 24px;
   }
-  .main .therapy .content .item .active .info .tip {
-    font-size: 24px;
-    margin-bottom: 10px;
+  .main .about .content .more-content img {
+    display: block;
+    width: 233px;
+    height: 160px;
   }
-  .main .therapy .content .item .active .info .subtip {
-    font-size: 16px;
-    margin-bottom: 60px;
+  .main .chairman .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
   }
-  .main .therapy .content .item .active .info .section {
-    width: 160px;
-    margin: 0 auto;
-    border: 1px solid #fff;
-    padding: 36px 0;
+  .main .chairman .info {
+    padding-top: 40px;
+    margin-left: 50px;
+  }
+  .main .chairman .info .name {
+    font-size: 50px;
+    color: #f3920d;
   }
-  .main .therapy .content .item .active .info .section dl {
-    padding: 0;
+  .main .chairman .info .name-en {
+    font-size: 34px;
+    color: #000000;
+    font-weight: lighter;
+    margin-top: 37px;
+  }
+  .main .chairman .info .name-en span {
+    font-size: 38px;
+    color: #f3920d;
+    font-weight: normal;
+  }
+  .main .chairman .info .tip {
+    font-size: 25px;
+    color: #000;
+    font-weight: lighter;
+    margin-top: 19px;
+  }
+  .main .chairman .info .tip span {
+    margin: 0 16px;
+  }
+  .main .chairman .info .line {
+    width: 36px;
+    height: 7px;
+    background: #f3920d;
+    margin: 25px 0 37px;
   }
-  .main .therapy .content .item .active .info .section dl dt {
-    margin-bottom: 24px;
+  .main .chairman .info .description {
+    font-size: 20px;
+    color: #000;
+    font-weight: lighter;
   }
-  .main .therapy .content .item .active .info .section dl dd {
-    margin: 0;
-    margin-top: 10px;
+  .main .word .content img {
+    display: block;
+    width: 100%;
   }
-  .main .application .content .item {
+  .main .brand-activity .content .item {
     position: relative;
     float: left;
+    height: 340px;
     width: 390px;
-    height: 390px;
     margin-right: 15px;
-    margin-top: 15px;
+    margin-bottom: 15px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
     overflow: hidden;
   }
-  .main .application .content .item img {
-    display: block;
+  .main .brand-activity .content .item .cover-bg {
     width: 100%;
     height: 100%;
+    opacity: 1;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
+    background: #f3920d;
   }
-  .main .application .content .item:nth-child(-n+3) {
-    margin-top: 0;
-  }
-  .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(6) {
-    width: 795px;
-  }
-  .main .application .content .item:nth-child(3), .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(7) {
-    margin-right: 0;
-  }
-  .main .application .content .item .active {
-    opacity: 0;
-    position: absolute;
+  .main .brand-activity .content .item img {
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.39);
-    z-index: 1;
-    top: 0;
-    left: 0;
+    opacity: 1;
     -webkit-transition: all 0.4s;
     transition: all 0.4s;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
   }
-  .main .application .content .item .active .info .num {
-    font-size: 50px;
-    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent));
-    background: linear-gradient(to bottom, #fff, transparent);
-    -webkit-background-clip: text;
-    color: transparent;
-    text-align: center;
+  .main .brand-activity .content .item.no-mb {
+    margin-bottom: 0;
   }
-  .main .application .content .item .active .info .tip {
-    font-size: 24px;
-    color: #fff;
-    text-align: center;
+  .main .brand-activity .content .item.no-mr {
+    margin-right: 0;
   }
-  .main .application .content .item .active .info .line {
-    width: 28px;
-    height: 2px;
-    background: #fff;
-    margin: 24px auto;
+  .main .brand-activity .content .item:nth-child(1), .main .brand-activity .content .item:nth-child(7) {
+    width: 795px;
   }
-  .main .application .content .item .active .info .link {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    width: 160px;
-    height: 48px;
-    border: 1px solid #fff;
-    font-size: 16px;
+  .main .brand-activity .content .item:hover img {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  .main .brand-activity .content .item .cover {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: inline-block;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 19px 14px;
+  }
+  .main .brand-activity .content .item .cover .title {
     color: #fff;
-    margin-top: 52px;
-    cursor: pointer;
+    font-size: 24px;
+    font-weight: lighter;
+    line-height: 1.5;
   }
-  .main .application .content .item:hover .active {
-    opacity: 1;
+  .main .honor .content {
+    position: relative;
   }
-  .main .application .content .item:hover img {
-    -webkit-transform: scale(1.06);
-    transform: scale(1.06);
+  .main .honor .content .swiper-container {
+    width: 1070px;
+    margin: 0 auto;
   }
-  .main .distribution .content img {
+  .main .honor .content .swiper-container img {
     display: block;
     width: 100%;
   }
-  .main .distribution .content .section {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin-top: 80px;
-  }
-  .main .distribution .content .section .line {
-    width: 1px;
-    height: 12px;
-    background: #b2b2b2;
-    -webkit-transform: translateY(52px);
-    transform: translateY(52px);
-  }
-  .main .distribution .content .section .item {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-  .main .distribution .content .section .item .row:first-child {
-    padding-left: 36px;
-    background: url(/img/icon-star.png) no-repeat left center;
-    line-height: 37px;
-    font-size: 28px;
-  }
-  .main .distribution .content .section .item .row.company {
-    background-image: url(/img/icon-company.png);
-  }
-  .main .distribution .content .section .item .row.doctor {
-    background-image: url(/img/icon-doctor.png);
-  }
-  .main .distribution .content .section .item .row.heart {
-    background-image: url(/img/icon-heart.png);
-  }
-  .main .distribution .content .section .item .row:last-child {
-    font-size: 14px;
-    color: #999;
-    margin-top: 12px;
+  .main .honor .content .swiper-prev,
+.main .honor .content .swiper-next {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 48px;
+    height: 72px;
+    background-color: rgba(55, 55, 55, 0.3) !important;
+    z-index: 5;
+    cursor: pointer;
+    background: url(/img/icon-arrow-left.png) no-repeat center;
   }
-  .main .contact .content .cover {
-    width: 626px;
-    height: 418px;
+  .main .honor .content .swiper-next {
+    left: unset;
+    right: 0;
+    background: url(/img/icon-arrow-right.png) no-repeat center;
   }
-  .main .contact .content .cover img {
+  .main .device .swiper-container img {
     display: block;
     width: 100%;
-    height: 100%;
-  }
-  .main .contact .content .form-container {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  .main .contact .content .form-container textarea {
-    display: block;
-    width: 526px;
-    height: 344px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 12px;
-    line-height: 26px;
-    font-size: 16px;
-    border-color: #dedede;
-  }
-  .main .contact .content .form-container .submit {
-    font-size: 16px;
-    color: #fff;
-    height: 48px;
-    background: #f3920d;
-    text-align: center;
-    line-height: 48px;
-    margin-top: 26px;
-    cursor: pointer;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-  }
-  .main .contact .content .form-container .submit:hover {
-    background: #e78d0d;
   }
 }
 @media screen and (max-width: 768px) {
   .advertising {
     width: 100%;
-    height: 5.45rem;
+    height: 5.9488rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #f2f2f2;
     overflow: hidden;
-    background: url(/img/brand-ross-ad.jpg) no-repeat center;
-    background-size: cover;
-    background-size: auto 5.45rem;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
+    background-size: 7.5rem;
   }
   .advertising .video-container {
     position: relative;
     width: 6.86rem;
-    height: 3.26rem;
+    height: 3.8588rem;
     margin: 0 auto;
-    margin-top: 2.8rem;
+    margin-top: 2.09rem;
   }
   .advertising .video-container .play {
     position: absolute;
-    width: 64px;
-    height: 64px;
+    width: 0.8rem;
+    height: 0.8rem;
     border-radius: 50%;
     z-index: 2;
-    bottom: 155px;
+    top: 50%;
     left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
     cursor: pointer;
+    background: url(/img/ross-video-play.png) no-repeat center;
+    background-size: 0.8rem;
   }
   .advertising .video-container video {
     display: block;
-    width: 6.86rem;
-    height: 3.26rem;
+    width: 100%;
+    height: 100%;
   }
 
-  .main .wrapper {
-    margin-top: 1.2rem;
-  }
-  .main .wrapper .title {
-    font-size: 0.34rem;
-    text-align: center;
-  }
-  .main .wrapper .content {
-    margin-top: 0.4rem;
-  }
-  .main .about .content .swiper {
-    display: none;
+  .main .about {
+    width: 6.86rem;
+    margin: 0 auto;
   }
-  .main .about .content .section {
-    padding-bottom: 0.16rem;
+  .main .about .content .about-swiper .swiper {
+    width: 100%;
     float: unset !important;
   }
-  .main .about .content .section::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
-    background-color: #f5f5f5;
-  }
-  .main .about .content .section::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background-color: #cccecf;
-  }
-  .main .about .content .section .item {
-    display: inline-block !important;
-    width: 5.83rem;
-    height: 8.32rem;
-    margin-left: 0.32rem;
-    background-color: #f3920d;
-    vertical-align: top;
-  }
-  .main .about .content .section .item:last-child {
-    margin-right: 0.32rem;
-  }
-  .main .about .content .section .item .cover {
-    width: 5.83rem;
-    height: 4.37rem;
+  .main .about .content .about-swiper .swiper .swiper-container {
+    width: 100%;
+    height: 5.14rem;
   }
-  .main .about .content .section .item .cover img {
+  .main .about .content .about-swiper .swiper .swiper-container img {
     display: block;
-    width: 5.83rem;
-    height: 4.37rem;
+    width: 100%;
+    height: 100%;
   }
-  .main .about .content .section .item .num {
-    font-size: 0.4rem;
+  .main .about .content .about-swiper .section {
+    float: unset !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
+    background-color: #f3920d;
+    background-repeat: no-repeat;
+    background-size: 0.66rem;
+    background-position: 0.4rem 0.82rem, 5.86rem 2.8rem;
     color: #fff;
+    padding: 0.4rem;
+  }
+  .main .about .content .about-swiper .section .title {
+    font-size: 0.32rem;
+    font-weight: bold;
+    width: 100%;
+    text-align: left;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
     text-align: center;
-    margin: 0.4rem 0 0.32rem;
   }
-  .main .about .content .section .item .desc {
+  .main .about .content .about-swiper .section .description {
     font-size: 0.24rem;
-    color: #fff;
-    line-height: 0.4rem;
-    padding: 0 0.4rem;
-    white-space: initial;
-  }
-  .main .therapy {
-    background: #f7f7f7;
-    background-size: 7.5rem auto;
-    padding-top: 0.8rem;
-  }
-  .main .therapy .content {
-    margin-top: 0.8rem;
-    padding-bottom: 0.63rem;
+    line-height: 0.46rem;
+    text-align: justify;
+    word-break: break-all;
+    margin-top: 0.4rem;
+    text-align: center;
   }
-  .main .therapy .content::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
-    background-color: #f5f5f5;
+  .main .about .content .more-content {
+    display: none;
   }
-  .main .therapy .content::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background-color: #cccecf;
+  .main .chairman {
+    width: 6.48rem;
+    margin: 0 auto;
   }
-  .main .therapy .content .item {
-    display: inline-block;
-    width: 4.8rem;
-    height: 100%;
-    position: relative;
-    margin-left: 0.32rem;
+  .main .chairman .content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
   }
-  .main .therapy .content .item:last-child {
-    margin-right: 0.32rem;
+  .main .chairman .content .cover {
+    float: unset !important;
   }
-  .main .therapy .content .item .cover {
-    display: none;
+  .main .chairman .content .cover img {
+    display: block;
+    width: 5.46rem;
+    height: 5.57rem;
+    margin: 0 auto;
   }
-  .main .therapy .content .item .active {
-    width: 4.8rem;
-    height: 100%;
+  .main .chairman .content .info {
+    float: unset !important;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
-  .main .therapy .content .item .active img {
-    width: 100%;
-    height: 100%;
+  .main .chairman .content .info .name {
+    font-size: 0.3rem;
+    color: #272727;
+    font-weight: bold;
   }
-  .main .therapy .content .item .active .info {
-    width: 100%;
-    height: 100%;
+  .main .chairman .content .info .name-en {
+    font-size: 0.26rem;
+    color: #272727;
+    margin-top: 0.32rem;
   }
-  .main .therapy .content .item .active .info .tip {
+  .main .chairman .content .info .name-en span {
     font-size: 0.3rem;
-    margin-bottom: 0.12rem;
-    margin-top: 0.32rem;
-    font-weight: bold;
+    color: #f3920d;
   }
-  .main .therapy .content .item .active .info .subtip {
-    font-size: 0.24rem;
-    color: #505050;
+  .main .chairman .content .info .tip {
+    font-size: 0.26rem;
+    color: #272727;
+    margin-top: 0.12rem;
   }
-  .main .therapy .content .item .active .info .section {
-    margin-top: 0.4rem;
+  .main .chairman .content .info .tip span {
+    margin: 0 0.16rem;
   }
-  .main .therapy .content .item .active .info .section dl {
-    padding: 0;
-    margin: 0;
+  .main .chairman .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #f3920d;
+    margin: 0.4rem 0;
   }
-  .main .therapy .content .item .active .info .section dl dt {
-    font-size: 0.24rem;
-    font-weight: bold;
-    margin-bottom: 0.24rem;
+  .main .chairman .content .info .description {
+    font-size: 0.26rem;
+    color: #666;
+    line-height: 0.48rem;
+    text-align: center;
+    margin-bottom: 0.4rem;
   }
-  .main .therapy .content .item .active .info .section dl dd {
-    font-size: 0.24rem;
-    margin: 0;
-    margin-top: 0.16rem;
-    color: #505050;
+  .main .word {
+    width: 6.86rem;
+    margin: 0 auto;
   }
-  .main .application .content {
-    padding-left: 0.32rem;
+  .main .word .content img {
+    display: block;
+    width: 100%;
   }
-  .main .application .content .item {
+  .main .brand-activity {
+    width: 6.86rem;
+    margin: 0 auto;
+  }
+  .main .brand-activity .content .item {
     position: relative;
     float: left;
+    height: 1.94rem;
     width: 2.23rem;
-    height: 2.23rem;
     margin-right: 0.08rem;
-    margin-top: 0.08rem;
+    margin-bottom: 0.08rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
     overflow: hidden;
   }
-  .main .application .content .item img {
-    display: block;
+  .main .brand-activity .content .item img {
     width: 100%;
     height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
   }
-  .main .application .content .item:nth-child(-n+3) {
-    margin-top: 0;
-  }
-  .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(6) {
-    width: 4.55rem;
+  .main .brand-activity .content .item.no-mb {
+    margin-bottom: 0;
   }
-  .main .application .content .item:nth-child(3), .main .application .content .item:nth-child(5), .main .application .content .item:nth-child(7) {
+  .main .brand-activity .content .item.no-mr {
     margin-right: 0;
   }
-  .main .application .content .item .active {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+  .main .brand-activity .content .item:nth-child(1), .main .brand-activity .content .item:nth-child(7) {
+    width: 4.54rem;
   }
-  .main .application .content .item .active .info .num {
-    display: none;
+  .main .brand-activity .content .item:hover img {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
   }
-  .main .application .content .item .active .info .tip {
+  .main .brand-activity .content .item .cover {
     position: absolute;
     left: 0;
     bottom: 0;
-    font-size: 0.24rem;
-    color: #fff;
-    text-align: center;
-    background: rgba(0, 0, 0, 0.39);
-    z-index: 1;
-    width: 100%;
-    text-align: center;
-    line-height: 0.48rem;
-  }
-  .main .application .content .item .active .info .link {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: 2;
-    opacity: 0;
-  }
-  .main .distribution .content img {
-    display: block;
-    width: 100%;
-  }
-  .main .distribution .content .section {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    margin-top: 0.6rem;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    padding: 0 0.32rem;
-  }
-  .main .distribution .content .section .item {
-    width: 50%;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  .main .distribution .content .section .item:nth-child(1), .main .distribution .content .section .item:nth-child(3) {
-    padding-bottom: 0.35rem;
-    border-bottom: 0.01rem solid #dedede;
-  }
-  .main .distribution .content .section .item:nth-child(1), .main .distribution .content .section .item:nth-child(5) {
-    border-right: 0.01rem solid #dedede;
-  }
-  .main .distribution .content .section .item:nth-child(5), .main .distribution .content .section .item:nth-child(7) {
-    padding-top: 0.35rem;
-  }
-  .main .distribution .content .section .item .row:first-child {
-    padding-left: 0.48rem;
-    background: url(/img/icon-star.png) no-repeat left center;
-    background-size: 0.4rem;
-    line-height: 0.4rem;
-    font-size: 0.26rem;
-  }
-  .main .distribution .content .section .item .row.company {
-    background-image: url(/img/icon-company.png);
-  }
-  .main .distribution .content .section .item .row.doctor {
-    background-image: url(/img/icon-doctor.png);
-  }
-  .main .distribution .content .section .item .row.heart {
-    background-image: url(/img/icon-heart.png);
-  }
-  .main .distribution .content .section .item .row:last-child {
-    font-size: 0.2rem;
-    color: #999;
-    margin-top: 0.16rem;
+    display: inline-block;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 0.08rem 0.1rem;
   }
-  .main .contact .content {
-    padding: 0 0.32rem;
+  .main .brand-activity .content .item .cover .title {
+    color: #fff;
+    font-size: 0.22rem;
+    font-weight: lighter;
+    line-height: 1.5;
   }
-  .main .contact .content .cover {
-    width: 100%;
-    height: 4.18rem;
-    float: unset !important;
+  .main .honor .scroll-box img {
+    width: 1.96rem;
+    height: 2.83rem;
+    margin-right: 0.24rem;
   }
-  .main .contact .content .cover img {
-    display: block;
-    width: 100%;
-    height: 100%;
+  .main .honor .scroll-box img:first-child {
+    margin-left: 0.32rem;
   }
-  .main .contact .content .form-container {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    float: unset !important;
+  .main .honor .scroll-box img:last-child {
+    margin-right: 0.32rem;
   }
-  .main .contact .content .form-container textarea {
-    display: block;
-    width: 100%;
-    height: 2.4rem;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 0.24rem;
-    line-height: 0.4rem;
-    font-size: 0.26rem;
-    border-color: #dedede;
-    margin-top: 0.24rem;
+  .main .device .scroll-box img {
+    width: 1.88rem;
+    height: 2.41rem;
+    margin-right: 0.24rem;
   }
-  .main .contact .content .form-container .submit {
-    font-size: 0.3rem;
-    color: #fff;
-    height: 0.9rem;
-    background: #f3920d;
-    text-align: center;
-    line-height: 0.9rem;
-    margin-top: 0.4rem;
+  .main .device .scroll-box img:first-child {
+    margin-left: 0.32rem;
   }
-  .main .contact .content .form-container .submit:hover {
-    background: #e78d0d;
+  .main .device .scroll-box img:last-child {
+    margin-right: 0.32rem;
   }
 }

css/brand-ross.scss

@@ -1,33 +1,33 @@
 @media screen and(min-width:768px) {
   .advertising {
     width: 100%;
-    height: 1055px;
+    height: 973px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #f2f2f2;
     overflow: hidden;
-    background: url(/img/brand-ross-ad.jpg) no-repeat center;
-    background-size: cover;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
 
     .video-container {
       position: relative;
-      width: 1200px;
-      height: 570px;
+      width: 960px;
+      height: 540px;
       margin: 0 auto;
-      margin-top: 485px;
-      background: pink;
+      margin-top: 433px;
 
       .play {
         position: absolute;
-        width: 64px;
-        height: 64px;
+        width: 132px;
+        height: 132px;
         border-radius: 50%;
         z-index: 2;
-        bottom: 155px;
+        top: 50%;
         left: 50%;
-        -webkit-transform: translateX(-50%);
-        transform: translateX(-50%);
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
         cursor: pointer;
+        background: url(/img/ross-video-play.png) no-repeat center;
       }
 
       video {
@@ -39,460 +39,277 @@
   }
 
   .main {
-    .wrapper {
-      margin-top: 120px;
-      .title {
-        font-size: 34px;
-        text-align: center;
-      }
-
-      .content {
-        margin-top: 80px;
-      }
-    }
-
     .about {
       .content {
-        height: 540px;
-        .swiper {
-          width: 720px;
-          height: 100%;
-          position: relative;
-
-          .swiper-prev,
-          .swiper-next {
-            position: absolute;
-            left: 0;
-            top: 50%;
-            -webkit-transform: translateY(-50%);
-            transform: translateY(-50%);
-            width: 48px;
-            height: 72px;
-            background-color: rgba(55, 55, 55, 0.3) !important;
-            z-index: 5;
-            cursor: pointer;
-            background: url(/img/icon-arrow-left.png) no-repeat center;
-          }
-
-          .swiper-next {
-            left: unset;
-            right: 0;
-            background: url(/img/icon-arrow-right.png) no-repeat center;
-          }
-
-          img {
-            width: 100%;
-            height: 540px;
-          }
-        }
-
-        .section {
-          width: 480px;
+        .about-swiper {
           height: 540px;
-          background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
-          background-color: #f3920d;
-          background-repeat: no-repeat;
-          background-position: 48px 48px, 341px 410px;
 
-          .item {
-            width: 390px;
-            margin: 0 auto;
-            margin-top: 73px;
-            display: none;
+          .swiper {
+            width: 720px;
+            height: 100%;
+            position: relative;
 
-            .num {
-              font-size: 32px;
-              color: #fff;
-              text-align: center;
+            .swiper-prev,
+            .swiper-next {
+              position: absolute;
+              left: 0;
+              top: 50%;
+              -webkit-transform: translateY(-50%);
+              transform: translateY(-50%);
+              width: 48px;
+              height: 72px;
+              background-color: rgba(55, 55, 55, 0.3) !important;
+              z-index: 5;
+              cursor: pointer;
+              background: url(/img/icon-arrow-left.png) no-repeat center;
             }
 
-            .line {
-              width: 1px;
-              height: 24px;
-              margin: 25px auto 40px;
-              background: #fff;
+            .swiper-next {
+              left: unset;
+              right: 0;
+              background: url(/img/icon-arrow-right.png) no-repeat center;
             }
 
-            .desc {
-              font-size: 16px;
-              color: #fff;
-              line-height: 40px;
+            img {
+              width: 100%;
+              height: 540px;
             }
           }
-        }
-      }
-    }
-
-    .therapy {
-      background: url(/img/about-bg.png) no-repeat top center;
-      padding-top: 80px;
-      .content {
-        margin-top: 80px;
-        height: 540px;
-        background-color: #fff;
-        .item {
-          float: left;
-          width: 180px;
-          height: 100%;
-          position: relative;
-          overflow: hidden;
 
-          &.hover {
+          .section {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
             width: 480px;
-            .cover {
-              opacity: 0;
-            }
-            .active {
-              opacity: 1;
-            }
-          }
+            height: 540px;
+            background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
+            background-color: #f3920d;
+            background-repeat: no-repeat;
+            background-position: 36px 36px, 353px 422px;
+            color: #fff;
 
-          &:first-child {
-            .cover {
-              border-left: 0;
+            .title {
+              font-size: 25px;
+              font-weight: bold;
+              padding: 0 24px;
+              width: 100%;
+              text-align: left;
+              -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+            }
+
+            .description {
+              font-size: 24px;
+              font-weight: lighter;
+              line-height: 44px;
+              padding: 0 24px;
+              text-align: justify;
+              word-break: break-all;
+              margin-top: 12px;
             }
           }
+        }
+        .more-content {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          margin-top: 24px;
 
-          .cover,
-          .active {
-            -webkit-transition: opacity 0.4s;
-            transition: opacity 0.4s;
+          img {
+            display: block;
+            width: 233px;
+            height: 160px;
           }
+        }
+      }
+    }
 
-          .cover {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            -webkit-transform: translateX(-50%);
-            transform: translateX(-50%);
-            width: 100%;
-            height: 100%;
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-            border-left: 1px solid rgba(243, 146, 13, 0.2);
-            background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(243, 146, 13, 0.3)));
-            background: linear-gradient(180deg, transparent 50%, rgba(243, 146, 13, 0.3) 100%);
-            overflow: hidden;
-            opacity: 1;
-
-            .tip {
-              font-size: 16px;
-              text-align: center;
-              margin-top: 57px;
-              margin-bottom: 40px;
-              font-weight: bold;
-            }
-
-            .line {
-              width: 24px;
-              height: 2px;
-              background: #f3920d;
-              margin: 0 auto;
-            }
+    .chairman {
+      .cover {
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
+        }
+      }
+      .info {
+        padding-top: 40px;
+        margin-left: 50px;
+        .name {
+          font-size: 50px;
+          color: #f3920d;
+        }
+        .name-en {
+          font-size: 34px;
+          color: #000000;
+          font-weight: lighter;
+          margin-top: 37px;
 
-            img {
-              position: absolute;
-              width: 128px;
-              height: 128px;
-              bottom: 44px;
-              left: 50%;
-              -webkit-transform: translateX(-50%);
-              transform: translateX(-50%);
-            }
+          span {
+            font-size: 38px;
+            color: #f3920d;
+            font-weight: normal;
           }
-
-          .active {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            -webkit-transform: translateX(-50%);
-            transform: translateX(-50%);
-            opacity: 0;
-            width: 480px;
-            height: 100%;
-            text-align: center;
-            color: #fff;
-
-            img {
-              width: 100%;
-              height: 100%;
-            }
-
-            .info {
-              position: absolute;
-              left: 0;
-              top: 0;
-              width: 100%;
-              height: 100%;
-              display: -webkit-box;
-              display: -ms-flexbox;
-              display: flex;
-              -webkit-box-orient: vertical;
-              -webkit-box-direction: normal;
-              -ms-flex-direction: column;
-              flex-direction: column;
-              -webkit-box-pack: center;
-              -ms-flex-pack: center;
-              justify-content: center;
-              -webkit-box-align: center;
-              -ms-flex-align: center;
-              align-items: center;
-              .tip {
-                font-size: 24px;
-                margin-bottom: 10px;
-              }
-              .subtip {
-                font-size: 16px;
-                margin-bottom: 60px;
-              }
-              .section {
-                width: 160px;
-                margin: 0 auto;
-                border: 1px solid #fff;
-                padding: 36px 0;
-                dl {
-                  padding: 0;
-                  dt {
-                    margin-bottom: 24px;
-                  }
-                  dd {
-                    margin: 0;
-                    margin-top: 10px;
-                  }
-                }
-              }
-            }
+        }
+        .tip {
+          font-size: 25px;
+          color: #000;
+          font-weight: lighter;
+          margin-top: 19px;
+          span {
+            margin: 0 16px;
           }
         }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #f3920d;
+          margin: 25px 0 37px;
+        }
+        .description {
+          font-size: 20px;
+          color: #000;
+          font-weight: lighter;
+        }
+      }
+    }
+
+    .word {
+      .content {
+        img {
+          display: block;
+          width: 100%;
+        }
       }
     }
 
-    .application {
+    .brand-activity {
       .content {
         .item {
           position: relative;
           float: left;
+          height: 340px;
           width: 390px;
-          height: 390px;
           margin-right: 15px;
-          margin-top: 15px;
+          margin-bottom: 15px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
           overflow: hidden;
 
-          img {
-            display: block;
+          .cover-bg {
             width: 100%;
             height: 100%;
+            opacity: 1;
             -webkit-transition: all 0.4s;
             transition: all 0.4s;
+            background: #f3920d;
           }
 
-          &:nth-child(-n + 3) {
-            margin-top: 0;
-          }
-          &:nth-child(5),
-          &:nth-child(6) {
-            width: 795px;
-          }
-
-          &:nth-child(3),
-          &:nth-child(5),
-          &:nth-child(7) {
-            margin-right: 0;
-          }
-
-          .active {
-            opacity: 0;
-            position: absolute;
+          img {
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.39);
-            z-index: 1;
-            top: 0;
-            left: 0;
+            opacity: 1;
             -webkit-transition: all 0.4s;
             transition: all 0.4s;
+          }
 
-            display: -webkit-box;
-
-            display: -ms-flexbox;
+          &.no-mb {
+            margin-bottom: 0;
+          }
 
-            display: flex;
-            -webkit-box-pack: center;
-            -ms-flex-pack: center;
-            justify-content: center;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
+          &.no-mr {
+            margin-right: 0;
+          }
 
-            .info {
-              .num {
-                font-size: 50px;
-                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent));
-                background: linear-gradient(to bottom, #fff, transparent);
-                -webkit-background-clip: text;
-                color: transparent;
-                text-align: center;
-              }
-              .tip {
-                font-size: 24px;
-                color: #fff;
-                text-align: center;
-              }
-              .line {
-                width: 28px;
-                height: 2px;
-                background: #fff;
-                margin: 24px auto;
-              }
-              .link {
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: flex;
-                -webkit-box-pack: center;
-                -ms-flex-pack: center;
-                justify-content: center;
-                -webkit-box-align: center;
-                -ms-flex-align: center;
-                align-items: center;
-                width: 160px;
-                height: 48px;
-                border: 1px solid #fff;
-                font-size: 16px;
-                color: #fff;
-                margin-top: 52px;
-                cursor: pointer;
-              }
-            }
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 795px;
           }
 
           &:hover {
-            .active {
-              opacity: 1;
-            }
-
             img {
-              -webkit-transform: scale(1.06);
-              transform: scale(1.06);
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
             }
           }
-        }
-      }
-    }
 
-    .distribution {
-      .content {
-        img {
-          display: block;
-          width: 100%;
-        }
-
-        .section {
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: flex;
-          -webkit-box-pack: justify;
-          -ms-flex-pack: justify;
-          justify-content: space-between;
-          margin-top: 80px;
-
-          .line {
-            width: 1px;
-            height: 12px;
-            background: #b2b2b2;
-            -webkit-transform: translateY(52px);
-            transform: translateY(52px);
-          }
-          .item {
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-pack: center;
-            -ms-flex-pack: center;
-            justify-content: center;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-
-            .row:first-child {
-              padding-left: 36px;
-              background: url(/img/icon-star.png) no-repeat left center;
-              line-height: 37px;
-              font-size: 28px;
-            }
-
-            .row.company {
-              background-image: url(/img/icon-company.png);
-            }
-
-            .row.doctor {
-              background-image: url(/img/icon-doctor.png);
-            }
-
-            .row.heart {
-              background-image: url(/img/icon-heart.png);
-            }
+          .cover {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            display: inline-block;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 19px 14px;
 
-            .row:last-child {
-              font-size: 14px;
-              color: #999;
-              margin-top: 12px;
+            .title {
+              color: #fff;
+              font-size: 24px;
+              font-weight: lighter;
+              line-height: 1.5;
             }
           }
         }
       }
     }
 
-    .contact {
+    .honor {
       .content {
-        .cover {
-          width: 626px;
-          height: 418px;
+        position: relative;
+
+        .swiper-container {
+          width: 1070px;
+          margin: 0 auto;
+
           img {
             display: block;
             width: 100%;
-            height: 100%;
           }
         }
 
-        .form-container {
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-          textarea {
-            display: block;
-            width: 526px;
-            height: 344px;
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-            padding: 12px;
-            line-height: 26px;
-            font-size: 16px;
-            border-color: #dedede;
-          }
+        .swiper-prev,
+        .swiper-next {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+          width: 48px;
+          height: 72px;
+          background-color: rgba(55, 55, 55, 0.3) !important;
+          z-index: 5;
+          cursor: pointer;
+          background: url(/img/icon-arrow-left.png) no-repeat center;
+        }
 
-          .submit {
-            font-size: 16px;
-            color: #fff;
-            height: 48px;
-            background: #f3920d;
-            text-align: center;
-            line-height: 48px;
-            margin-top: 26px;
-            cursor: pointer;
-            -webkit-transition: all 0.4s;
-            transition: all 0.4s;
+        .swiper-next {
+          left: unset;
+          right: 0;
+          background: url(/img/icon-arrow-right.png) no-repeat center;
+        }
+      }
+    }
 
-            &:hover {
-              background: #e78d0d;
-            }
-          }
+    .device {
+      .swiper-container {
+        img {
+          display: block;
+          width: 100%;
         }
       }
     }
@@ -502,396 +319,292 @@
 @media screen and(max-width:768px) {
   .advertising {
     width: 100%;
-    height: 5.45rem;
+    height: 5.9488rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #f2f2f2;
     overflow: hidden;
-    background: url(/img/brand-ross-ad.jpg) no-repeat center;
-    background-size: cover;
-    background-size: auto 5.45rem;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
+    background-size: 7.5rem;
 
     .video-container {
       position: relative;
       width: 6.86rem;
-      height: 3.26rem;
+      height: 3.8588rem;
       margin: 0 auto;
-      margin-top: 2.8rem;
+      margin-top: 2.09rem;
 
       .play {
         position: absolute;
-        width: 64px;
-        height: 64px;
+        width: 0.8rem;
+        height: 0.8rem;
         border-radius: 50%;
         z-index: 2;
-        bottom: 155px;
+        top: 50%;
         left: 50%;
-        -webkit-transform: translateX(-50%);
-        transform: translateX(-50%);
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
         cursor: pointer;
+        background: url(/img/ross-video-play.png) no-repeat center;
+        background-size: 0.8rem;
       }
 
       video {
         display: block;
-        width: 6.86rem;
-        height: 3.26rem;
+        width: 100%;
+        height: 100%;
       }
     }
   }
 
   .main {
-    .wrapper {
-      margin-top: 1.2rem;
-      .title {
-        font-size: 0.34rem;
-        text-align: center;
-      }
-
-      .content {
-        margin-top: 0.4rem;
-      }
-    }
-
     .about {
+      width: 6.86rem;
+      margin: 0 auto;
       .content {
-        .swiper {
-          display: none;
-        }
-        .section {
-          padding-bottom: 0.16rem;
-          float: unset !important;
-          
-          &::-webkit-scrollbar {
-            width: 2px;
-            height: 2px;
-            background-color: #f5f5f5;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            border-radius: 2px;
-            background-color: #cccecf;
-          }
-
-          .item {
-            display: inline-block !important;
-            width: 5.83rem; 
-            height: 8.32rem;
-            margin-left: 0.32rem;
-            background-color: #f3920d;
-            vertical-align: top;
-
-            &:last-child {
-              margin-right: 0.32rem;
-            }
+        .about-swiper {
+          .swiper {
+            width: 100%;
+            float: unset !important;
 
-            .cover {
-              width: 5.83rem;
-              height: 4.37rem;
+            .swiper-container {
+              width: 100%;
+              height: 5.14rem;
 
               img {
                 display: block;
-                width: 5.83rem;
-                height: 4.37rem;
+                width: 100%;
+                height: 100%;
               }
             }
+          }
 
-            .num {
-              font-size: 0.4rem;
-              color: #fff;
+          .section {
+            float: unset !important;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
+            background-color: #f3920d;
+            background-repeat: no-repeat;
+            background-size: 0.66rem;
+            background-position: 0.4rem 0.82rem, 5.86rem 2.8rem;
+            color: #fff;
+            padding: 0.4rem;
+
+            .title {
+              font-size: 0.32rem;
+              font-weight: bold;
+              width: 100%;
+              text-align: left;
+              -webkit-box-sizing: border-box;
+              box-sizing: border-box;
               text-align: center;
-              margin: 0.4rem 0 0.32rem;
             }
 
-            .desc {
+            .description {
               font-size: 0.24rem;
-              color: #fff;
-              line-height: 0.4rem;
-              padding: 0 0.4rem;
-              white-space: initial;
+              line-height: 0.46rem;
+              text-align: justify;
+              word-break: break-all;
+              margin-top: 0.4rem;
+              text-align: center;
             }
           }
         }
+        .more-content {
+          display: none;
+        }
       }
     }
 
-    .therapy {
-      // background: #f7f7f7 url(/img/about-bg.png) no-repeat top center;
-      background: #f7f7f7;
-      background-size: 7.5rem auto;
-      padding-top: 0.8rem;
+    .chairman {
+      width: 6.48rem;
+      margin: 0 auto;
       .content {
-        margin-top: 0.8rem;
-        padding-bottom: 0.63rem;
-
-        &::-webkit-scrollbar {
-          width: 2px;
-          height: 2px;
-          background-color: #f5f5f5;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          border-radius: 2px;
-          background-color: #cccecf;
-        }
-
-        .item {
-          display: inline-block;
-          width: 4.8rem;
-          height: 100%;
-          position: relative;
-          margin-left: 0.32rem;
-
-          &:last-child {
-            margin-right: 0.32rem;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        .cover {
+          float: unset !important;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
+            margin: 0 auto;
           }
-
-          .cover {
-            display: none;
+        }
+        .info {
+          float: unset !important;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          .name {
+            font-size: 0.3rem;
+            color: #272727;
+            font-weight: bold;
           }
+          .name-en {
+            font-size: 0.26rem;
+            color: #272727;
+            margin-top: 0.32rem;
 
-          .active {
-            width: 4.8rem;
-            height: 100%;
-
-            img {
-              width: 100%;
-              height: 100%;
+            span {
+              font-size: 0.3rem;
+              color: #f3920d;
             }
-
-            .info {
-              width: 100%;
-              height: 100%;
-              .tip {
-                font-size: 0.3rem;
-                margin-bottom: 0.12rem;
-                margin-top: 0.32rem;
-                font-weight: bold;
-              }
-              .subtip {
-                font-size: 0.24rem;
-                color: #505050;
-              }
-              .section {
-                margin-top: 0.4rem;
-                dl {
-                  padding: 0;
-                  margin: 0;
-                  dt {
-                    font-size: 0.24rem;
-                    font-weight: bold;
-                    margin-bottom: 0.24rem;
-                  }
-                  dd {
-                    font-size: 0.24rem;
-                    margin: 0;
-                    margin-top: 0.16rem;
-                    color: #505050;
-                  }
-                }
-              }
+          }
+          .tip {
+            font-size: 0.26rem;
+            color: #272727;
+            margin-top: 0.12rem;
+            span {
+              margin: 0 0.16rem;
             }
           }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #f3920d;
+            margin: 0.4rem 0;
+          }
+          .description {
+            font-size: 0.26rem;
+            color: #666;
+            line-height: 0.48rem;
+            text-align: center;
+            margin-bottom: 0.4rem;
+          }
         }
       }
     }
 
-    .application {
+    .word {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+
+    .brand-activity {
+      width: 6.86rem;
+      margin: 0 auto;
       .content {
-        padding-left: 0.32rem;
         .item {
           position: relative;
           float: left;
+          height: 1.94rem;
           width: 2.23rem;
-          height: 2.23rem;
           margin-right: 0.08rem;
-          margin-top: 0.08rem;
+          margin-bottom: 0.08rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
           overflow: hidden;
 
           img {
-            display: block;
             width: 100%;
             height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
           }
 
-          &:nth-child(-n + 3) {
-            margin-top: 0;
+          &.no-mb {
+            margin-bottom: 0;
           }
-          &:nth-child(5),
-          &:nth-child(6) {
-            width: 4.55rem;
+
+          &.no-mr {
+            margin-right: 0;
           }
 
-          &:nth-child(3),
-          &:nth-child(5),
+          &:nth-child(1),
           &:nth-child(7) {
-            margin-right: 0;
+            width: 4.54rem;
           }
 
-          .active {
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+          }
+
+          .cover {
             position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
             left: 0;
+            bottom: 0;
+            display: inline-block;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 0.08rem 0.1rem;
 
-            .info {
-              .num {
-                display: none;
-              }
-              .tip {
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                font-size: 0.24rem;
-                color: #fff;
-                text-align: center;
-                background: rgba(0, 0, 0, 0.39);
-                z-index: 1;
-                width: 100%;
-                text-align: center;
-                line-height: 0.48rem;
-              }
-              .link {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                z-index: 2;
-                opacity: 0;
-              }
+            .title {
+              color: #fff;
+              font-size: 0.22rem;
+              font-weight: lighter;
+              line-height: 1.5;
             }
           }
         }
       }
     }
 
-    .distribution {
-      .content {
+    .honor {
+      .scroll-box {
         img {
-          display: block;
-          width: 100%;
-        }
+          width: 1.96rem;
+          height: 2.83rem;
+          margin-right: 0.24rem;
 
-        .section {
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: flex;
-          -webkit-box-pack: justify;
-          -ms-flex-pack: justify;
-          justify-content: space-between;
-          margin-top: 0.6rem;
-          -ms-flex-wrap: wrap;
-          flex-wrap: wrap;
-          padding: 0 0.32rem;
-
-          .item {
-            width: 50%;
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-            -webkit-box-pack: center;
-            -ms-flex-pack: center;
-            justify-content: center;
-            -webkit-box-align: center;
-            -ms-flex-align: center;
-            align-items: center;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-
-            &:nth-child(1),
-            &:nth-child(3) {
-              padding-bottom: 0.35rem;
-              border-bottom: 0.01rem solid #dedede;
-            }
-
-            &:nth-child(1),
-            &:nth-child(5) {
-              border-right: 0.01rem solid #dedede;
-            }
-
-            &:nth-child(5),
-            &:nth-child(7) {
-              padding-top: 0.35rem;
-            }
-
-            .row:first-child {
-              padding-left: 0.48rem;
-              background: url(/img/icon-star.png) no-repeat left center;
-              background-size: 0.4rem;
-              line-height: 0.4rem;
-              font-size: 0.26rem;
-            }
-
-            .row.company {
-              background-image: url(/img/icon-company.png);
-            }
-
-            .row.doctor {
-              background-image: url(/img/icon-doctor.png);
-            }
-
-            .row.heart {
-              background-image: url(/img/icon-heart.png);
-            }
+          &:first-child {
+            margin-left: 0.32rem;
+          }
 
-            .row:last-child {
-              font-size: 0.2rem;
-              color: #999;
-              margin-top: 0.16rem;
-            }
+          &:last-child {
+            margin-right: 0.32rem;
           }
         }
       }
     }
 
-    .contact {
-      .content {
-        padding: 0 0.32rem;
-        .cover {
-          width: 100%;
-          height: 4.18rem;
-          float: unset !important;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
-        }
+    .device {
+      .scroll-box {
+        img {
+          width: 1.88rem;
+          height: 2.41rem;
+          margin-right: 0.24rem;
 
-        .form-container {
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-          float: unset !important;
-          textarea {
-            display: block;
-            width: 100%;
-            height: 2.4rem;
-            -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-            padding: 0.24rem;
-            line-height: 0.4rem;
-            font-size: 0.26rem;
-            border-color: #dedede;
-            margin-top: 0.24rem;
+          &:first-child {
+            margin-left: 0.32rem;
           }
 
-          .submit {
-            font-size: 0.3rem;
-            color: #fff;
-            height: 0.9rem;
-            background: #f3920d;
-            text-align: center;
-            line-height: 0.9rem;
-            margin-top: 0.4rem;
-
-            &:hover {
-              background: #e78d0d;
-            }
+          &:last-child {
+            margin-right: 0.32rem;
           }
         }
       }

css/brand.css

@@ -11,7 +11,6 @@
   .main .brand .cover {
     width: 880px;
     height: 420px;
-    background: pink;
   }
   .main .brand .content {
     position: absolute;
@@ -34,16 +33,15 @@
     flex-direction: column;
     width: 360px;
     height: 340px;
-    border: 3px solid #e8e8e8;
+    border: 3px solid #000000;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: #fff;
   }
   .main .brand .content .brand-logo {
     position: relative;
-    width: 174px;
-    height: 106px;
-    background: skyblue;
+    width: 346px;
+    height: 154px;
     overflow: hidden;
   }
   .main .brand .content .brand-logo img {
@@ -55,17 +53,18 @@
     transform: translate(-50%, -50%);
   }
   .main .brand .content .name {
-    font-size: 16px;
-    color: #505050;
+    font-size: 29px;
+    color: #000;
     margin: 24px 0 32px;
   }
   .main .brand .content .link {
+    display: block;
     width: 160px;
     height: 48px;
-    background: #f7f7f7;
+    background: #d2d2d2;
     opacity: 1;
     font-size: 16px;
-    color: #505050;
+    color: #000000;
     text-align: center;
     line-height: 48px;
     cursor: pointer;
@@ -73,7 +72,7 @@
     transition: all 0.4s;
   }
   .main .brand .content .link:hover {
-    background: #eee;
+    background: #ddd;
   }
 }
 @media screen and (max-width: 768px) {
@@ -99,14 +98,14 @@
     background: #fff;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    border: 1px solid #e8e8e8;
+    border: 0.03rem solid #000;
     border-top: 0;
     padding: 0.32rem 0.4rem;
   }
   .main .brand .content .brand-logo {
     position: relative;
-    width: 1.48rem;
-    height: 0.92rem;
+    width: 2.7rem;
+    height: 1rem;
     background: skyblue;
     overflow: hidden;
   }
@@ -124,15 +123,16 @@
     color: #505050;
   }
   .main .brand .content .link {
+    display: block;
     position: absolute;
     right: 0.4rem;
     bottom: 0.32rem;
     width: 1.8rem;
     height: 0.56rem;
-    background: #f7f7f7;
+    background: #d2d2d2;
     opacity: 1;
     font-size: 0.24rem;
-    color: #505050;
+    color: #000;
     text-align: center;
     line-height: 0.56rem;
   }

css/brand.scss

@@ -14,7 +14,6 @@
       .cover {
         width: 880px;
         height: 420px;
-        background: pink;
       }
 
       .content {
@@ -38,15 +37,14 @@
         flex-direction: column;
         width: 360px;
         height: 340px;
-        border: 3px solid #e8e8e8;
+        border: 3px solid #000000;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         background: #fff;
         .brand-logo {
           position: relative;
-          width: 174px;
-          height: 106px;
-          background: skyblue;
+          width: 346px;
+          height: 154px;
           overflow: hidden;
 
           img {
@@ -60,18 +58,19 @@
         }
 
         .name {
-          font-size: 16px;
-          color: #505050;
+          font-size: 29px;
+          color: #000;
           margin: 24px 0 32px;
         }
 
         .link {
+          display: block;
           width: 160px;
           height: 48px;
-          background: #f7f7f7;
+          background: #d2d2d2;
           opacity: 1;
           font-size: 16px;
-          color: #505050;
+          color: #000000;
           text-align: center;
           line-height: 48px;
           cursor: pointer;
@@ -79,7 +78,7 @@
           transition: all 0.4s;
 
           &:hover {
-            background: #eee;
+            background: #ddd;
           }
         }
       }
@@ -113,13 +112,13 @@
         background: #fff;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
-        border: 1px solid #e8e8e8;
+        border: 0.03rem solid #000;
         border-top: 0;
         padding: 0.32rem 0.4rem;
         .brand-logo {
           position: relative;
-          width: 1.48rem;
-          height: 0.92rem;
+          width: 2.7rem;
+          height: 1rem;
           background: skyblue;
           overflow: hidden;
 
@@ -140,15 +139,16 @@
         }
 
         .link {
+          display: block;
           position: absolute;
           right: 0.4rem;
           bottom: 0.32rem;
           width: 1.8rem;
           height: 0.56rem;
-          background: #f7f7f7;
+          background: #d2d2d2;
           opacity: 1;
           font-size: 0.24rem;
-          color: #505050;
+          color: #000;
           text-align: center;
           line-height: 0.56rem;
 

css/index.css

@@ -1,41 +1,6 @@
 @charset "UTF-8";
 /* scss中可以用mixin来扩展 */
 @media screen and (min-width: 768px) {
-  .section-title {
-    position: relative;
-    text-align: center;
-    height: 66px;
-  }
-  .section-title img {
-    display: block;
-    height: 50px;
-    margin: 0 auto;
-  }
-  .section-title h3 {
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    font-size: 34px;
-    font-weight: normal;
-  }
-
-  .banner {
-    width: 100%;
-    height: 700px;
-  }
-  .banner img {
-    display: block;
-    height: 100%;
-  }
-
-  .main .container {
-    margin-top: 120px;
-  }
-  .main .container .section-title {
-    margin-bottom: 80px;
-  }
   .main .container.our-brand .content .item {
     position: relative;
     width: 286px;
@@ -47,6 +12,20 @@
     width: 592px;
     height: 592px;
   }
+  .main .container.our-brand .content .item:first-child .active .title {
+    font-size: 52px;
+  }
+  .main .container.our-brand .content .item:first-child .active .subtitle {
+    font-size: 34px;
+    margin-top: 12px;
+  }
+  .main .container.our-brand .content .item:first-child .active .link {
+    width: 244px;
+    height: 72px;
+    margin-top: 150px;
+    font-size: 42px;
+    line-height: 72px;
+  }
   .main .container.our-brand .content .item img {
     display: block;
     width: 100%;
@@ -81,23 +60,33 @@
     transition: opacity 0.4s;
   }
   .main .container.our-brand .content .item .active .title {
-    font-size: 34px;
+    font-size: 25px;
+    color: #fff;
+  }
+  .main .container.our-brand .content .item .active .subtitle {
+    font-size: 20px;
     color: #fff;
+    margin-top: 8px;
+    font-weight: lighter;
   }
   .main .container.our-brand .content .item .active .line {
+    display: none;
     width: 40px;
     height: 1px;
     margin: 32px 0 60px;
     background-color: #fff;
   }
   .main .container.our-brand .content .item .active .link {
-    width: 160px;
-    height: 48px;
+    width: 142px;
+    height: 40px;
+    font-size: 24px;
+    margin-top: 60px;
     border: 1px solid #ffffff;
     text-align: center;
-    line-height: 48px;
+    line-height: 40px;
     color: #fff;
     cursor: pointer;
+    font-weight: lighter;
   }
   .main .container.brand-activity .content {
     display: -webkit-box;
@@ -159,13 +148,14 @@
   .main .container.brand-activity .content .item .active .title {
     margin-top: 206px;
     width: 232px;
-    font-size: 24px;
+    font-size: 29px;
     color: #fff;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
+    font-weight: lighter;
   }
   .main .container.brand-activity .content .item .active .line {
     width: 20px;
@@ -191,21 +181,22 @@
     position: absolute;
     width: 486px;
     height: 160px;
-    padding-top: 32px;
-    padding-left: 32px;
+    padding-top: 30px;
+    padding-left: 26px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     border-top-left-radius: 32px;
     right: 0;
     bottom: 0;
-    background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+    background: rgba(243, 146, 13, 0.8);
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
   }
   .main .container.brand-activity .content .item .hover-active .title {
-    font-size: 24px;
+    font-size: 40px;
     color: #fff;
     width: 300px;
+    font-weight: bold;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -213,21 +204,21 @@
     -webkit-box-orient: vertical;
   }
   .main .container.brand-activity .content .item .hover-active .line {
-    width: 20px;
-    height: 2px;
-    margin: 16px 0 22px;
+    width: 38px;
+    height: 4px;
+    margin: 16px 0;
     background-color: #fff;
   }
   .main .container.brand-activity .content .item .hover-active .description {
     text-align: justify;
     width: 300px;
-    font-size: 16px;
+    font-size: 20px;
     color: #fff;
     line-height: 1.5;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
   .main .container.brand-activity .content .item .hover-active::after {
@@ -253,6 +244,14 @@
     box-sizing: border-box;
     overflow: hidden;
   }
+  .main .container.company-values .content .item .cover-bg {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+    background: #f3920d;
+  }
   .main .container.company-values .content .item img {
     width: 100%;
     height: 100%;
@@ -277,19 +276,22 @@
     background: transparent;
   }
   .main .container.company-values .content .item:nth-child(2):hover, .main .container.company-values .content .item:nth-child(3):hover, .main .container.company-values .content .item:nth-child(7):hover {
-    border: 1px solid #0688d2;
+    border: 1px solid #f3920d;
   }
   .main .container.company-values .content .item:nth-child(2):hover img, .main .container.company-values .content .item:nth-child(3):hover img, .main .container.company-values .content .item:nth-child(7):hover img {
     opacity: 0;
   }
+  .main .container.company-values .content .item:nth-child(2):hover .cover-bg, .main .container.company-values .content .item:nth-child(3):hover .cover-bg, .main .container.company-values .content .item:nth-child(7):hover .cover-bg {
+    opacity: 0;
+  }
   .main .container.company-values .content .item:nth-child(2):hover .subtitle,
 .main .container.company-values .content .item:nth-child(2):hover .title, .main .container.company-values .content .item:nth-child(3):hover .subtitle,
 .main .container.company-values .content .item:nth-child(3):hover .title, .main .container.company-values .content .item:nth-child(7):hover .subtitle,
 .main .container.company-values .content .item:nth-child(7):hover .title {
-    color: #0688d2;
+    color: #f3920d;
   }
   .main .container.company-values .content .item:nth-child(2):hover .line::before, .main .container.company-values .content .item:nth-child(2):hover .line::after, .main .container.company-values .content .item:nth-child(3):hover .line::before, .main .container.company-values .content .item:nth-child(3):hover .line::after, .main .container.company-values .content .item:nth-child(7):hover .line::before, .main .container.company-values .content .item:nth-child(7):hover .line::after {
-    background-color: #0688d2;
+    background-color: #f3920d;
   }
   .main .container.company-values .content .item .cover {
     position: absolute;
@@ -346,31 +348,74 @@
   .main .container.company-values .content .item .cover .subtitle.en {
     text-transform: uppercase;
   }
-  .main .container.friendly_link .content {
-    width: 100%;
-    overflow: hidden;
+  .main .container.friendly_link {
+    /*
+    .content {
+      width: 100%;
+      overflow: hidden;
+      .row {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+
+        &:last-child {
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: reverse;
+          -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+          -webkit-animation: 20s rowup-right linear infinite normal;
+          animation: 20s rowup-right linear infinite normal;
+          margin-top: 10px;
+        }
+
+        &:first-child {
+          -webkit-animation: 20s rowup-left linear infinite normal;
+          animation: 20s rowup-left linear infinite normal;
+        }
+      }
+      .item {
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+        position: relative;
+        width: 232px;
+        height: 100px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border: 1px solid #d8d8d8;
+        overflow: hidden;
+        margin-right: 10px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        img {
+          display: block;
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+        }
+      }
+    }
+    */
   }
-  .main .container.friendly_link .content .row {
+  .main .container.friendly_link .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-  }
-  .main .container.friendly_link .content .row:last-child {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-    -webkit-animation: 20s rowup-right linear infinite normal;
-    animation: 20s rowup-right linear infinite normal;
-    margin-top: 10px;
-  }
-  .main .container.friendly_link .content .row:first-child {
-    -webkit-animation: 20s rowup-left linear infinite normal;
-    animation: 20s rowup-left linear infinite normal;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
   .main .container.friendly_link .content .item {
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
     position: relative;
     width: 232px;
     height: 100px;
@@ -379,8 +424,9 @@
     border: 1px solid #d8d8d8;
     overflow: hidden;
     margin-right: 10px;
+    margin-bottom: 10px;
   }
-  .main .container.friendly_link .content .item:last-child {
+  .main .container.friendly_link .content .item:nth-child(5n) {
     margin-right: 0;
   }
   .main .container.friendly_link .content .item img {
@@ -394,59 +440,22 @@
   }
 }
 @media screen and (max-width: 768px) {
-  .section-title {
-    position: relative;
-    text-align: center;
-    height: 0.7rem;
-  }
-  .section-title img {
-    display: block;
-    height: 0.5rem;
-    margin: 0 auto;
-  }
-  .section-title h3 {
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-    font-size: 0.34rem;
-    font-weight: normal;
-  }
-
-  .swiper-container {
-    width: 100%;
-    min-width: 7.5rem;
-    height: 2.74rem;
-  }
-  .swiper-container .swiper-pagination {
-    display: none;
-  }
-  .swiper-container img {
-    display: block;
-    height: 100%;
-  }
-
-  .main .container {
-    margin-top: 1.2rem;
-    margin-left: 0.32rem;
-    width: 6.86rem;
-  }
-  .main .container .section-title {
-    margin-bottom: 0.39rem;
+  .main .container.our-brand .content {
+    width: 10.72rem;
+    margin: 0 0.32rem;
   }
   .main .container.our-brand .content .item {
     position: relative;
-    width: 1.64rem;
-    height: 1.64rem;
+    width: 2.5rem;
+    height: 2.5rem;
     float: left;
     background-color: #ddd;
-    margin-left: 0.1rem;
-    margin-bottom: 0.1rem;
+    margin-left: 0.24rem;
+    margin-bottom: 0.24rem;
   }
   .main .container.our-brand .content .item:first-child {
-    width: 3.38rem;
-    height: 3.38rem;
+    width: 5.24rem;
+    height: 5.24rem;
     margin-left: 0;
   }
   .main .container.our-brand .content .item img {
@@ -466,13 +475,16 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    font-size: 0.22rem;
+    font-size: 0.26rem;
     color: #fff;
     width: 100%;
-    line-height: 0.4rem;
+    line-height: 0.64rem;
     text-align: center;
     background: rgba(0, 0, 0, 0.39);
   }
+  .main .container.our-brand .content .item .active .subtitle {
+    display: none;
+  }
   .main .container.our-brand .content .item .active .link {
     opacity: 0;
     display: block;
@@ -488,25 +500,15 @@
     margin-right: 0;
     width: auto;
   }
-  .main .container.brand-activity .content {
-    overflow-x: auto;
-    padding-bottom: 0.16rem;
-  }
-  .main .container.brand-activity .content::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
-    background-color: #f5f5f5;
-  }
-  .main .container.brand-activity .content::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background-color: #cccecf;
-  }
   .main .container.brand-activity .content .item {
     position: relative;
     width: 5.24rem;
     height: 4.91rem;
     overflow: hidden;
     display: inline-block;
+    margin-right: 0.24rem;
+  }
+  .main .container.brand-activity .content .item:first-child {
     margin-left: 0.32rem;
   }
   .main .container.brand-activity .content .item:last-child {
@@ -542,7 +544,7 @@
     border-top-left-radius: 0.32rem;
     right: 0;
     bottom: 0;
-    background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+    background: linear-gradient(166deg, #f3920d 25%, rgba(243, 146, 13, 0.8));
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
   }
@@ -585,6 +587,10 @@
     right: 0.24rem;
     bottom: 0.24rem;
   }
+  .main .container.company-values {
+    width: 6.86rem;
+    margin: 0 auto;
+  }
   .main .container.company-values .content .item {
     position: relative;
     float: left;
@@ -615,6 +621,14 @@
   .main .container.company-values .content .item:nth-child(2) .cover, .main .container.company-values .content .item:nth-child(3) .cover, .main .container.company-values .content .item:nth-child(7) .cover {
     background: transparent;
   }
+  .main .container.company-values .content .item .cover-bg {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+    background: #f3920d;
+  }
   .main .container.company-values .content .item .cover {
     position: absolute;
     left: 0;
@@ -670,44 +684,42 @@
   .main .container.company-values .content .item .cover .subtitle.en {
     text-transform: uppercase;
   }
+  .main .container.head_quarter {
+    width: 6.86rem;
+    margin: 0 auto;
+  }
   .main .container.head_quarter .content img {
     width: 100%;
   }
-  .main .container.friendly_link .content {
-    width: 100%;
-    overflow: hidden;
+  .main .container.friendly_link {
+    width: 6.86rem;
+    margin: 0 auto;
   }
-  .main .container.friendly_link .content .row {
+  .main .container.friendly_link .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-  }
-  .main .container.friendly_link .content .row:last-child {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-    -webkit-animation: 20s rowup-right linear infinite normal;
-    animation: 20s rowup-right linear infinite normal;
-    margin-top: 10px;
-  }
-  .main .container.friendly_link .content .row:first-child {
-    -webkit-animation: 20s rowup-left linear infinite normal;
-    animation: 20s rowup-left linear infinite normal;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
   .main .container.friendly_link .content .item {
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
     position: relative;
     width: 2.2rem;
-    height: 0.96rem;
+    height: 0.948rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    border: 1px solid #d8d8d8;
+    border: 0.01rem solid #d8d8d8;
     overflow: hidden;
-    margin-right: 10px;
+    margin-right: 0.13rem;
+    margin-bottom: 0.13rem;
   }
-  .main .container.friendly_link .content .item:last-child {
+  .main .container.friendly_link .content .item:nth-child(3n) {
     margin-right: 0;
   }
   .main .container.friendly_link .content .item img {

css/index.scss

@@ -8,44 +8,8 @@
 }
 
 @media screen and (min-width: 768px) {
-  .section-title {
-    position: relative;
-    text-align: center;
-    height: 66px;
-    img {
-      display: block;
-      height: 50px;
-      margin: 0 auto;
-    }
-    h3 {
-      position: absolute;
-      left: 50%;
-      bottom: 0;
-      -webkit-transform: translateX(-50%);
-      transform: translateX(-50%);
-      font-size: 34px;
-      font-weight: normal;
-    }
-  }
-
-  // 轮播图
-  .banner {
-    width: 100%;
-    height: 700px;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-
   .main {
     .container {
-      margin-top: 120px;
-      .section-title {
-        margin-bottom: 80px;
-      }
-
       &.our-brand {
         .content {
           .item {
@@ -58,6 +22,23 @@
             &:first-child {
               width: 592px;
               height: 592px;
+
+              .active {
+                .title {
+                  font-size: 52px;
+                }
+                .subtitle {
+                  font-size: 34px;
+                  margin-top: 12px;
+                }
+                .link {
+                  width: 244px;
+                  height: 72px;
+                  margin-top: 150px;
+                  font-size: 42px;
+                  line-height: 72px;
+                }
+              }
             }
 
             img {
@@ -98,23 +79,33 @@
               transition: opacity 0.4s;
 
               .title {
-                font-size: 34px;
+                font-size: 25px;
                 color: #fff;
               }
+              .subtitle {
+                font-size: 20px;
+                color: #fff;
+                margin-top: 8px;
+                font-weight: lighter;
+              }
               .line {
+                display: none;
                 width: 40px;
                 height: 1px;
                 margin: 32px 0 60px;
                 background-color: #fff;
               }
               .link {
-                width: 160px;
-                height: 48px;
+                width: 142px;
+                height: 40px;
+                font-size: 24px;
+                margin-top: 60px;
                 border: 1px solid #ffffff;
                 text-align: center;
-                line-height: 48px;
+                line-height: 40px;
                 color: #fff;
                 cursor: pointer;
+                font-weight: lighter;
               }
             }
           }
@@ -200,9 +191,10 @@
               .title {
                 margin-top: 206px;
                 width: 232px;
-                font-size: 24px;
+                font-size: 29px;
                 color: #fff;
                 @include ellipsis(1);
+                font-weight: lighter;
               }
               .line {
                 width: 20px;
@@ -231,35 +223,37 @@
               position: absolute;
               width: 486px;
               height: 160px;
-              padding-top: 32px;
-              padding-left: 32px;
+              padding-top: 30px;
+              padding-left: 26px;
               -webkit-box-sizing: border-box;
               box-sizing: border-box;
               border-top-left-radius: 32px;
               right: 0;
               bottom: 0;
-              background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+              // background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+              background: rgb(243, 146, 13, 0.8);
               -webkit-transition: opacity 0.4s;
               transition: opacity 0.4s;
               .title {
-                font-size: 24px;
+                font-size: 40px;
                 color: #fff;
                 width: 300px;
+                font-weight: bold;
                 @include ellipsis(1);
               }
               .line {
-                width: 20px;
-                height: 2px;
-                margin: 16px 0 22px;
+                width: 38px;
+                height: 4px;
+                margin: 16px 0;
                 background-color: #fff;
               }
               .description {
                 text-align: justify;
                 width: 300px;
-                font-size: 16px;
+                font-size: 20px;
                 color: #fff;
                 line-height: 1.5;
-                @include ellipsis(2);
+                @include ellipsis(1);
               }
 
               &::after {
@@ -292,6 +286,15 @@
             box-sizing: border-box;
             overflow: hidden;
 
+            .cover-bg {
+              width: 100%;
+              height: 100%;
+              opacity: 1;
+              -webkit-transition: all 0.4s;
+              transition: all 0.4s;
+              background: #f3920d;
+            }
+
             img {
               width: 100%;
               height: 100%;
@@ -327,20 +330,24 @@
               }
 
               &:hover {
-                border: 1px solid #0688d2;
+                border: 1px solid #f3920d;
                 img {
                   opacity: 0;
                 }
 
+                .cover-bg {
+                  opacity: 0;
+                }
+
                 .subtitle,
                 .title {
-                  color: #0688d2;
+                  color: #f3920d;
                 }
 
                 .line {
                   &::before,
                   &::after {
-                    background-color: #0688d2;
+                    background-color: #f3920d;
                   }
                 }
               }
@@ -411,10 +418,48 @@
         }
       }
 
-      &.head_quarter {
-      }
-
       &.friendly_link {
+        .content {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+
+          .item {
+            position: relative;
+            width: 232px;
+            height: 100px;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            border: 1px solid #d8d8d8;
+            overflow: hidden;
+            margin-right: 10px;
+            margin-bottom: 10px;
+
+            &:nth-child(5n) {
+              margin-right: 0;
+            }
+
+            img {
+              display: block;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 50%;
+              -webkit-transform: translateY(-50%);
+              transform: translateY(-50%);
+            }
+          }
+        }
+
+        /*
         .content {
           width: 100%;
           overflow: hidden;
@@ -465,71 +510,31 @@
             }
           }
         }
+        */
       }
     }
   }
 }
 
 @media screen and (max-width: 768px) {
-  .section-title {
-    position: relative;
-    text-align: center;
-    height: 0.7rem;
-    img {
-      display: block;
-      height: 0.5rem;
-      margin: 0 auto;
-    }
-    h3 {
-      position: absolute;
-      left: 50%;
-      bottom: 0;
-      -webkit-transform: translateX(-50%);
-      transform: translateX(-50%);
-      font-size: 0.34rem;
-      font-weight: normal;
-    }
-  }
-
-  // 轮播图
-  .swiper-container {
-    width: 100%;
-    min-width: 7.5rem;
-    height: 2.74rem;
-
-    .swiper-pagination{
-      display: none;
-    }
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-
   .main {
     .container {
-      margin-top: 1.2rem;
-      margin-left: 0.32rem;
-      width: 6.86rem;
-      .section-title {
-        margin-bottom: 0.39rem;
-      }
-
       &.our-brand {
         .content {
+          width: 10.72rem;
+          margin: 0 0.32rem;
           .item {
             position: relative;
-            width: 1.64rem;
-            height: 1.64rem;
+            width: 2.5rem;
+            height: 2.5rem;
             float: left;
             background-color: #ddd;
-            margin-left: 0.1rem;
-            margin-bottom: 0.1rem;
+            margin-left: 0.24rem;
+            margin-bottom: 0.24rem;
 
             &:first-child {
-              width: 3.38rem;
-              height: 3.38rem;
+              width: 5.24rem;
+              height: 5.24rem;
               margin-left: 0;
             }
 
@@ -551,13 +556,18 @@
                 position: absolute;
                 bottom: 0;
                 left: 0;
-                font-size: 0.22rem;
+                font-size: 0.26rem;
                 color: #fff;
                 width: 100%;
-                line-height: 0.4rem;
+                line-height: 0.64rem;
                 text-align: center;
                 background: rgba(0, 0, 0, 0.39);
               }
+
+              .subtitle {
+                display: none;
+              }
+
               .link {
                 opacity: 0;
                 display: block;
@@ -578,26 +588,17 @@
         margin-right: 0;
         width: auto;
         .content {
-          overflow-x: auto;
-          padding-bottom: 0.16rem;
-          &::-webkit-scrollbar {
-            width: 2px;
-            height: 2px;
-            background-color: #f5f5f5;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            border-radius: 2px;
-            background-color: #cccecf;
-          }
-
           .item {
             position: relative;
             width: 5.24rem;
             height: 4.91rem;
             overflow: hidden;
             display: inline-block;
-            margin-left: 0.32rem;
+            margin-right: 0.24rem;
+
+            &:first-child {
+              margin-left: 0.32rem;
+            }
 
             &:last-child {
               margin-right: 0.32rem;
@@ -650,7 +651,7 @@
               border-top-left-radius: 0.32rem;
               right: 0;
               bottom: 0;
-              background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
+              background: linear-gradient(166deg, #f3920d 25%, rgba(243, 146, 13, 0.8));
               -webkit-transition: opacity 0.4s;
               transition: opacity 0.4s;
               .title {
@@ -691,6 +692,8 @@
       }
 
       &.company-values {
+        width: 6.86rem;
+        margin: 0 auto;
         .content {
           .item {
             position: relative;
@@ -732,6 +735,15 @@
               }
             }
 
+            .cover-bg {
+              width: 100%;
+              height: 100%;
+              opacity: 1;
+              -webkit-transition: all 0.4s;
+              transition: all 0.4s;
+              background: #f3920d;
+            }
+
             .cover {
               position: absolute;
               left: 0;
@@ -798,6 +810,8 @@
       }
 
       &.head_quarter {
+        width: 6.86rem;
+        margin: 0 auto;
         .content {
           img {
             width: 100%;
@@ -806,42 +820,33 @@
       }
 
       &.friendly_link {
+        width: 6.86rem;
+        margin: 0 auto;
         .content {
-          width: 100%;
-          overflow: hidden;
-          .row {
-            display: -webkit-box;
-            display: -ms-flexbox;
-            display: flex;
-
-            &:last-child {
-              -webkit-box-orient: horizontal;
-              -webkit-box-direction: reverse;
-              -ms-flex-direction: row-reverse;
-              flex-direction: row-reverse;
-              -webkit-animation: 20s rowup-right linear infinite normal;
-              animation: 20s rowup-right linear infinite normal;
-              margin-top: 10px;
-            }
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+          -webkit-box-pack: start;
+          -ms-flex-pack: start;
+          justify-content: flex-start;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
 
-            &:first-child {
-              -webkit-animation: 20s rowup-left linear infinite normal;
-              animation: 20s rowup-left linear infinite normal;
-            }
-          }
           .item {
-            -ms-flex-negative: 0;
-            flex-shrink: 0;
             position: relative;
             width: 2.2rem;
-            height: 0.96rem;
+            height: 0.948rem;
             -webkit-box-sizing: border-box;
             box-sizing: border-box;
-            border: 1px solid #d8d8d8;
+            border: 0.01rem solid #d8d8d8;
             overflow: hidden;
-            margin-right: 10px;
+            margin-right: 0.13rem;
+            margin-bottom: 0.13rem;
 
-            &:last-child {
+            &:nth-child(3n) {
               margin-right: 0;
             }
 

css/product-binary-premium.css

@@ -0,0 +1,405 @@
+@media screen and (min-width: 768px) {
+  .main .about .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
+  }
+  .main .about .info {
+    width: 660px;
+    padding-top: 65px;
+  }
+  .main .about .info .name {
+    font-size: 50px;
+    color: #f3920d;
+    font-weight: bold;
+  }
+  .main .about .info .subname {
+    font-size: 30px;
+    margin-top: 15px;
+  }
+  .main .about .info .line {
+    width: 36px;
+    height: 7px;
+    background: #f3920d;
+    margin: 20px 0 50px;
+  }
+  .main .about .info .description {
+    font-size: 20px;
+    text-align: justify;
+    word-break: break-all;
+    font-weight: lighter;
+    line-height: 36px;
+  }
+  .main .therapy .section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    position: relative;
+    background: #eeeeee;
+    height: 400px;
+    margin-top: 44px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .main .therapy .section .cover {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+  }
+  .main .therapy .section .cover img {
+    display: block;
+    width: 450px;
+    height: 360px;
+  }
+  .main .therapy .section .info {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-left: 40px;
+  }
+  .main .therapy .section .info .name {
+    font-size: 36px;
+    font-weight: bold;
+    color: #f3920d;
+  }
+  .main .therapy .section .info .description {
+    font-size: 26px;
+    color: #434343;
+    line-height: 36px;
+    font-weight: lighter;
+    text-align: justify;
+    word-break: break-all;
+    padding-right: 20px;
+    margin-top: 36px;
+  }
+  .main .therapy .section:nth-child(2n-1) .link {
+    right: 40px;
+    bottom: 20px;
+  }
+  .main .therapy .section:nth-child(2n) .link {
+    left: 60px;
+    bottom: 20px;
+  }
+  .main .therapy .section .link {
+    position: absolute;
+    display: block;
+    width: 164px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding-right: 30px;
+    background: url("/img/binary-icon-link.png") no-repeat;
+    background-position: 144px center;
+    background-color: #000000;
+    font-size: 25px;
+    color: #f3920d;
+    cursor: pointer;
+  }
+  .main .application .content .item {
+    position: relative;
+    float: left;
+    height: 340px;
+    width: 390px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .main .application .content .item .cover-bg {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+    background: #f3920d;
+  }
+  .main .application .content .item img {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+  }
+  .main .application .content .item.no-mb {
+    margin-bottom: 0;
+  }
+  .main .application .content .item.no-mr {
+    margin-right: 0;
+  }
+  .main .application .content .item:nth-child(1), .main .application .content .item:nth-child(7) {
+    width: 795px;
+  }
+  .main .application .content .item:hover img {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  .main .application .content .item:hover .cover {
+    opacity: 1;
+  }
+  .main .application .content .item .cover {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.2);
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+  .main .application .content .item .cover .title {
+    color: #fff;
+    font-size: 38px;
+  }
+  .main .application .content .item .cover .subtitle {
+    font-size: 29px;
+    color: #fff;
+    font-weight: lighter;
+    margin-top: 10px;
+  }
+  .main .device .content {
+    position: relative;
+  }
+  .main .device .content .swiper-container {
+    width: 1100px;
+    margin: 0 auto;
+  }
+  .main .device .content .swiper-container img {
+    display: block;
+    width: 100%;
+  }
+  .main .device .content .swiper-prev,
+.main .device .content .swiper-next {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 48px;
+    height: 72px;
+    background-color: rgba(55, 55, 55, 0.6) !important;
+    z-index: 5;
+    cursor: pointer;
+    background: url(/img/icon-arrow-left.png) no-repeat center;
+  }
+  .main .device .content .swiper-next {
+    left: unset;
+    right: 0;
+    background: url(/img/icon-arrow-right.png) no-repeat center;
+  }
+}
+@media screen and (max-width: 768px) {
+  .main .about .content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  .main .about .content .cover {
+    float: unset !important;
+    margin-top: 0.4rem;
+  }
+  .main .about .content .cover img {
+    display: block;
+    width: 5.64rem;
+    height: 5.57rem;
+    margin: 0 auto;
+  }
+  .main .about .content .info {
+    float: unset !important;
+    width: 6.5rem;
+    text-align: center;
+  }
+  .main .about .content .info .name {
+    font-size: 0.34rem;
+    color: #f3920d;
+  }
+  .main .about .content .info .subname {
+    font-size: 0.26rem;
+    margin-top: 0.16rem;
+  }
+  .main .about .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #f3920d;
+    margin: 0.32rem auto;
+  }
+  .main .about .content .info .description {
+    font-size: 0.26rem;
+    text-align: justify;
+    word-break: break-all;
+    line-height: 0.48rem;
+    color: #333333;
+  }
+  .main .therapy .section {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 6.86rem;
+    margin: 0 auto;
+    background: #eeeeee;
+    margin-top: 0.32rem;
+    padding: 0.4rem;
+  }
+  .main .therapy .section:first-child {
+    margin-top: 0;
+  }
+  .main .therapy .section .cover {
+    width: 4.5rem;
+    height: 3.6rem;
+  }
+  .main .therapy .section .cover img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .main .therapy .section .info .name {
+    font-size: 0.3rem;
+    font-weight: bold;
+    color: #f3920d;
+    text-align: center;
+    margin: 0.4rem 0 0.32rem;
+  }
+  .main .therapy .section .info .description {
+    font-size: 0.26rem;
+    color: #333;
+    line-height: 0.48rem;
+    text-align: justify;
+    word-break: break-all;
+    text-align: center;
+  }
+  .main .therapy .section .link {
+    display: block;
+    width: 2.48rem;
+    height: 0.78rem;
+    line-height: 0.78rem;
+    text-align: center;
+    background-color: #000000;
+    font-size: 0.26rem;
+    color: #f3920d;
+    cursor: pointer;
+    margin-top: 0.48rem;
+  }
+  .main .application {
+    width: 6.86rem;
+    margin: 0 auto;
+  }
+  .main .application .content .item {
+    position: relative;
+    float: left;
+    height: 1.94rem;
+    width: 2.23rem;
+    margin-right: 0.08rem;
+    margin-bottom: 0.08rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  .main .application .content .item img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+  }
+  .main .application .content .item.no-mb {
+    margin-bottom: 0;
+  }
+  .main .application .content .item.no-mr {
+    margin-right: 0;
+  }
+  .main .application .content .item:nth-child(1), .main .application .content .item:nth-child(7) {
+    width: 4.54rem;
+  }
+  .main .application .content .item:hover img {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  .main .application .content .item .cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.2);
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+  }
+  .main .application .content .item .cover .title {
+    color: #fff;
+    font-size: 0.26rem;
+  }
+  .main .application .content .item .cover .subtitle {
+    font-size: 0.24rem;
+    color: #fff;
+    font-weight: lighter;
+    margin-top: 0.08rem;
+  }
+  .main .device .scroll-box img {
+    width: 1.77rem;
+    height: 2.27rem;
+    margin-right: 0.24rem;
+  }
+  .main .device .scroll-box img:first-child {
+    margin-left: 0.32rem;
+  }
+  .main .device .scroll-box img:last-child {
+    margin-right: 0.32rem;
+  }
+}

css/product-binary-premium.scss

@@ -0,0 +1,491 @@
+@media screen and (min-width: 768px) {
+  .main {
+    .about {
+      .cover {
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
+        }
+      }
+
+      .info {
+        width: 660px;
+        padding-top: 65px;
+
+        .name {
+          font-size: 50px;
+          color: #f3920d;
+          font-weight: bold;
+        }
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
+        }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #f3920d;
+          margin: 20px 0 50px;
+        }
+        .description {
+          font-size: 20px;
+          text-align: justify;
+          word-break: break-all;
+          font-weight: lighter;
+          line-height: 36px;
+        }
+      }
+    }
+
+    .therapy {
+      .section {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        position: relative;
+        background: #eeeeee;
+        height: 400px;
+        margin-top: 44px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        padding: 0 20px;
+
+        .cover {
+          -ms-flex-negative: 0;
+          flex-shrink: 0;
+          img {
+            display: block;
+            width: 450px;
+            height: 360px;
+          }
+        }
+
+        .info {
+          -ms-flex-negative: 0;
+          flex-shrink: 0;
+          -webkit-box-flex: 1;
+          -ms-flex: 1;
+          flex: 1;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin-left: 40px;
+
+          .name {
+            font-size: 36px;
+            font-weight: bold;
+            color: #f3920d;
+          }
+
+          .description {
+            font-size: 26px;
+            color: #434343;
+            line-height: 36px;
+            font-weight: lighter;
+            text-align: justify;
+            word-break: break-all;
+            padding-right: 20px;
+            margin-top: 36px;
+          }
+        }
+
+        &:nth-child(2n-1) {
+          .link {
+            right: 40px;
+            bottom: 20px;
+          }
+        }
+
+        &:nth-child(2n) {
+          .link {
+            left: 60px;
+            bottom: 20px;
+          }
+        }
+
+        .link {
+          position: absolute;
+          display: block;
+          width: 164px;
+          height: 50px;
+          line-height: 50px;
+          text-align: center;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          padding-right: 30px;
+          background: url('/img/binary-icon-link.png') no-repeat;
+          background-position: 144px center;
+          background-color: #000000;
+          font-size: 25px;
+          color: #f3920d;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .application {
+      .content {
+        .item {
+          position: relative;
+          float: left;
+          height: 340px;
+          width: 390px;
+          margin-right: 15px;
+          margin-bottom: 15px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          .cover-bg {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+            background: #f3920d;
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+          }
+
+          &.no-mb {
+            margin-bottom: 0;
+          }
+
+          &.no-mr {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 795px;
+          }
+
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+
+            .cover {
+              opacity: 1;
+            }
+          }
+
+          .cover {
+            opacity: 0;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            background: rgba(0, 0, 0, 0.2);
+            -webkit-transition: opacity 0.4s;
+            transition: opacity 0.4s;
+
+            .title {
+              color: #fff;
+              font-size: 38px;
+            }
+
+            .subtitle {
+              font-size: 29px;
+              color: #fff;
+              font-weight: lighter;
+              margin-top: 10px;
+            }
+          }
+        }
+      }
+    }
+
+    .device {
+      .content {
+        position: relative;
+
+        .swiper-container {
+          width: 1100px;
+          margin: 0 auto;
+
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
+
+        .swiper-prev,
+        .swiper-next {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+          width: 48px;
+          height: 72px;
+          background-color: rgba(55, 55, 55, 0.6) !important;
+          z-index: 5;
+          cursor: pointer;
+          background: url(/img/icon-arrow-left.png) no-repeat center;
+        }
+
+        .swiper-next {
+          left: unset;
+          right: 0;
+          background: url(/img/icon-arrow-right.png) no-repeat center;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .main {
+    .about {
+      .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        .cover {
+          float: unset !important;
+          margin-top: 0.4rem;
+          img {
+            display: block;
+            width: 5.64rem;
+            height: 5.57rem;
+            margin: 0 auto;
+          }
+        }
+
+        .info {
+          float: unset !important;
+          width: 6.5rem;
+          text-align: center;
+
+          .name {
+            font-size: 0.34rem;
+            color: #f3920d;
+          }
+          .subname {
+            font-size: 0.26rem;
+            margin-top: 0.16rem;
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #f3920d;
+            margin: 0.32rem auto;
+          }
+          .description {
+            font-size: 0.26rem;
+            text-align: justify;
+            word-break: break-all;
+            // font-weight: lighter;
+            line-height: 0.48rem;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .therapy {
+      .section {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        width: 6.86rem;
+        margin: 0 auto;
+        background: #eeeeee;
+        margin-top: 0.32rem;
+        padding: 0.4rem;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        .cover {
+          width: 4.5rem;
+          height: 3.6rem;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .info {
+          .name {
+            font-size: 0.3rem;
+            font-weight: bold;
+            color: #f3920d;
+            text-align: center;
+            margin: 0.4rem 0 0.32rem;
+          }
+
+          .description {
+            font-size: 0.26rem;
+            color: #333;
+            line-height: 0.48rem;
+            text-align: justify;
+            word-break: break-all;
+            text-align: center;
+          }
+        }
+
+        .link {
+          display: block;
+          width: 2.48rem;
+          height: 0.78rem;
+          line-height: 0.78rem;
+          text-align: center;
+          background-color: #000000;
+          font-size: 0.26rem;
+          color: #f3920d;
+          cursor: pointer;
+          margin-top: 0.48rem;
+        }
+      }
+    }
+
+    .application {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
+        .item {
+          position: relative;
+          float: left;
+          height: 1.94rem;
+          width: 2.23rem;
+          margin-right: 0.08rem;
+          margin-bottom: 0.08rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+          }
+
+          &.no-mb {
+            margin-bottom: 0;
+          }
+
+          &.no-mr {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 4.54rem;
+          }
+
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+          }
+
+          .cover {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            background: rgba(0, 0, 0, 0.2);
+            -webkit-transition: opacity 0.4s;
+            transition: opacity 0.4s;
+
+            .title {
+              color: #fff;
+              font-size: 0.26rem;
+            }
+
+            .subtitle {
+              font-size: 0.24rem;
+              color: #fff;
+              font-weight: lighter;
+              margin-top: 0.08rem;
+            }
+          }
+        }
+      }
+    }
+
+    .device {
+      .scroll-box {
+        img {
+          width: 1.77rem;
+          height: 2.27rem;
+          margin-right: 0.24rem;
+
+          &:first-child {
+            margin-left: 0.32rem;
+          }
+
+          &:last-child {
+            margin-right: 0.32rem;
+          }
+        }
+      }
+    }
+  }
+}

css/product-intradermik.css

@@ -1,240 +1,299 @@
 @media screen and (min-width: 768px) {
-  .main {
-    margin-top: -80px;
+  .main .about .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
   }
-  .main .title {
-    font-size: 24px;
-    font-weight: bold;
+  .main .about .info {
+    width: 660px;
+    padding-top: 65px;
   }
-  .main .about {
-    margin-bottom: 180px;
+  .main .about .info .name {
+    font-size: 50px;
+    color: #5ba9ad;
+    font-weight: bold;
   }
-  .main .about .cover {
-    width: 614px;
-    height: 412px;
-    background-color: pink;
+  .main .about .info .subname {
+    font-size: 30px;
+    margin-top: 15px;
   }
-  .main .about .container {
-    position: relative;
+  .main .about .info .line {
+    width: 36px;
+    height: 7px;
+    background: #5ba9ad;
+    margin: 20px 0 30px;
   }
-  .main .about .content {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 518px;
+  .main .about .info .description {
+    text-align: justify;
+    word-break: break-all;
+    font-weight: lighter;
+    line-height: 36px;
   }
-  .main .about .content .title {
-    font-size: 34px;
-    text-transform: uppercase;
+  .main .about .info .description p {
+    margin-top: 24px;
+    font-size: 20px;
   }
-  .main .about .content .detail {
-    font-size: 14px;
-    line-height: 40px;
-    text-align: justify;
+  .main .about-device .content img {
+    display: block;
+    width: 100%;
   }
-  .main .about .content .tags {
-    margin-top: 36px;
+  .main .therapy .content .section {
+    background: #eeeeee;
+    padding: 24px 24px 24px 56px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+    margin-top: 20px;
+  }
+  .main .therapy .content .section:first-child {
+    margin-top: 0;
+  }
+  .main .therapy .content .section .info {
+    margin-right: 24px;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    text-align: justify;
+    word-break: break-all;
   }
-  .main .about .content .tags .tag {
-    padding: 8px 14px;
-    font-size: 16px;
-    color: #0688d2;
-    background: #eff9ff;
+  .main .therapy .content .section .info .cover img {
+    display: block;
+    width: 560px;
   }
-  .main .about .content .line {
-    margin: 32px 0;
-    width: 32px;
-    height: 2px;
-    background: #d8d8d8;
+  .main .therapy .content .section .info .title {
+    font-size: 36px;
+    color: #5ba9ad;
+    font-weight: bold;
   }
-  .main .service {
-    margin: 80px 0;
+  .main .therapy .content .section .info .subtitle {
+    font-size: 16px;
+    color: #434343;
+    font-weight: lighter;
+    text-transform: uppercase;
+    margin-top: 4px;
   }
-  .main .service .cover {
-    width: 640px;
-    height: 480px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  .main .therapy .content .section .info .desc {
+    font-size: 27px;
+    color: #434343;
+    line-height: 38px;
+    margin-top: 50px;
   }
-  .main .service.one .content {
-    background-image: url(/img/product-intradermik-service-bg-01.png);
+  .main .therapy .content .section .info .row {
+    margin-top: 68px;
   }
-  .main .service.two .content {
-    background-image: url(/img/product-intradermik-service-bg-02.png);
+  .main .therapy .content .section .info .row .label {
+    font-size: 29px;
+    color: #434343;
+    font-weight: bold;
   }
-  .main .service.three .content {
-    background-image: url(/img/product-intradermik-service-bg-03.png);
+  .main .therapy .content .section .info .row .text {
+    font-size: 25px;
+    line-height: 38px;
+    color: #434343;
+    margin-top: 10px;
   }
-  .main .service.four .content {
-    background-image: url(/img/product-intradermik-service-bg-04.png);
+  .main .therapy .content .section .info .row .item {
+    font-size: 22px;
+    color: #434343;
+    font-weight: lighter;
+    margin-top: 32px;
+    line-height: 1.5;
   }
-  .main .service .content {
-    width: 560px;
-    height: 480px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.39);
-    padding: 70px 60px 0;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 560px;
+  .main .therapy .content .section.therapy-2 .row {
+    margin-top: 130px;
   }
-  .main .service .content .title {
-    color: #fff;
-    margin-bottom: 20px;
+  .main .therapy .content .section.therapy-3 .row {
+    margin-top: 80px;
   }
-  .main .service .content .mb24 {
-    margin-bottom: 40px;
+  .main .therapy .content .section.therapy-3 .row .item {
+    line-height: 38px;
   }
-  .main .service .content .mb56 {
-    margin-bottom: 56px;
+  .main .therapy .content .section.therapy-3 .desc {
+    line-height: 42px;
   }
-  .main .service .content .lh40 {
-    line-height: 40px;
+  .main .therapy .content .section.therapy-4 .row {
+    margin-top: 50px;
   }
-  .main .service .content .lh28 {
-    line-height: 28px;
+  .main .therapy .content .section.therapy-4 .row .label {
+    margin-bottom: 16px;
   }
-  .main .service .content .subtitle {
-    font-size: 16px;
-    color: #fff;
+  .main .therapy .content .section.therapy-4 .row .item {
+    margin-top: 12px;
   }
-  .main .service .content .detail {
-    color: #fff;
-    font-size: 16px;
+  .main .device .content {
+    position: relative;
   }
-  .main .service .content .detail li {
-    margin-top: 32px;
+  .main .device .content .swiper-container {
+    width: 1100px;
+    margin: 0 auto;
   }
-  .main .service .content .detail .label {
-    margin-bottom: 16px;
+  .main .device .content .swiper-container img {
+    display: block;
+    width: 100%;
+  }
+  .main .device .content .swiper-prev,
+.main .device .content .swiper-next {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 48px;
+    height: 72px;
+    background-color: rgba(55, 55, 55, 0.6) !important;
+    z-index: 5;
+    cursor: pointer;
+    background: url(/img/icon-arrow-left.png) no-repeat center;
+  }
+  .main .device .content .swiper-next {
+    left: unset;
+    right: 0;
+    background: url(/img/icon-arrow-right.png) no-repeat center;
   }
 }
 @media screen and (max-width: 768px) {
-  .main .container {
+  .main .about .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
     -ms-flex-direction: column-reverse;
     flex-direction: column-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
-  .main .title {
-    font-size: 0.48rem;
-    font-weight: bold;
-  }
-  .main .about {
-    margin-top: 0.8rem;
-  }
-  .main .about .cover {
-    width: 6.14rem;
-    height: 4.12rem;
-    float: unset !important;
-    margin-top: 0.48rem;
+  .main .about .content .cover {
+    margin-top: 0.4rem;
   }
-  .main .about .cover img {
+  .main .about .content .cover img {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: 5.46rem;
+    height: 5.57rem;
   }
-  .main .about .container {
-    position: relative;
+  .main .about .content .info {
+    width: 6.5rem;
+    margin: 0 auto;
   }
-  .main .about .content {
-    width: 6.14rem;
-    float: unset !important;
+  .main .about .content .info .name {
+    font-size: 0.34rem;
+    color: #5ba9ad;
+    text-align: center;
+    font-weight: bold;
   }
-  .main .about .content .title {
-    font-size: 0.48rem;
-    text-transform: uppercase;
+  .main .about .content .info .subname {
+    font-size: 0.26rem;
+    margin-top: 0.16rem;
     text-align: center;
   }
-  .main .about .content .detail {
-    font-size: 0.24rem;
-    line-height: 0.4rem;
-    text-align: justify;
+  .main .about .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #5ba9ad;
+    margin: 0.32rem auto;
   }
-  .main .about .content .tags {
-    margin-top: 0.32rem;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+  .main .about .content .info .description {
+    text-align: justify;
+    word-break: break-all;
+    color: #333333;
+    text-align: center;
   }
-  .main .about .content .tags .tag {
-    padding: 0.08rem 0.41rem;
-    font-size: 0.24rem;
-    color: #3da5b8;
-    background: #e6fcff;
+  .main .about .content .info .description p {
+    font-size: 0.26rem;
+    line-height: 0.48rem;
   }
-  .main .about .content .line {
-    width: 0.4rem;
-    height: 0.03rem;
-    background: #d8d8d8;
-    margin: 0.32rem auto;
+  .main .about-device {
+    width: 6.86rem;
+    margin: 0 auto;
   }
-  .main .service {
-    margin: 1.2rem 0;
+  .main .about-device .content img {
+    display: block;
+    width: 100%;
   }
-  .main .service .cover {
-    width: 6.14rem;
-    height: 4.66rem;
+  .main .therapy .content .section {
+    width: 6.86rem;
+    margin: 0 auto;
+    background: #eeeeee;
+    padding: 0.4rem;
+    margin-top: 0.32rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    float: unset !important;
-    margin-top: 0.48rem;
   }
-  .main .service .cover img {
+  .main .therapy .content .section:first-child {
+    margin-top: 0;
+  }
+  .main .therapy .content .section .cover img {
     display: block;
     width: 100%;
-    height: 100%;
   }
-  .main .service .content {
-    width: 6.14rem;
-    float: unset !important;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-    background-position: center;
+  .main .therapy .content .section .info {
     text-align: center;
+    word-break: break-all;
   }
-  .main .service .content .title {
-    margin-bottom: 0.4rem;
+  .main .therapy .content .section .info .title {
+    font-size: 0.3rem;
+    color: #5ba9ad;
+    font-weight: bold;
+    margin-top: 0.4rem;
   }
-  .main .service .content .mb24 {
-    margin-bottom: 0.4rem;
+  .main .therapy .content .section .info .subtitle {
+    font-size: 0.24rem;
+    color: #333;
+    margin-top: 0.16rem;
   }
-  .main .service .content .mb56 {
-    margin-bottom: 0.56rem;
+  .main .therapy .content .section .info .desc {
+    font-size: 0.26rem;
+    color: #333;
+    line-height: 0.48rem;
+    margin-top: 0.32rem;
   }
-  .main .service .content .lh40 {
-    line-height: 0.4rem;
+  .main .therapy .content .section .info .row {
+    margin-top: 0.4rem;
   }
-  .main .service .content .lh28 {
-    line-height: 0.4rem;
+  .main .therapy .content .section .info .row .label {
+    font-size: 0.26rem;
+    color: #434343;
+    font-weight: bold;
   }
-  .main .service .content .subtitle {
+  .main .therapy .content .section .info .row .text {
     font-size: 0.26rem;
+    line-height: 0.48rem;
+    color: #434343;
   }
-  .main .service .content .detail {
+  .main .therapy .content .section .info .row .item {
     font-size: 0.26rem;
+    color: #333;
+    margin-top: 0.16rem;
+    line-height: 1.5;
   }
-  .main .service .content .detail li {
+  .main .therapy .content .section.therapy-2 .row {
     margin-top: 0.32rem;
   }
-  .main .service .content .detail .label {
-    margin-bottom: 0.16rem;
+  .main .therapy .content .section.therapy-3 .row {
+    margin-top: 0.4rem;
+  }
+  .main .therapy .content .section.therapy-4 .row {
+    margin-top: 0.48rem;
+  }
+  .main .device .scroll-box img {
+    width: 1.77rem;
+    height: 2.27rem;
+    margin-right: 0.24rem;
+  }
+  .main .device .scroll-box img:first-child {
+    margin-left: 0.32rem;
+  }
+  .main .device .scroll-box img:last-child {
+    margin-right: 0.32rem;
   }
 }

css/product-intradermik.scss

@@ -1,278 +1,374 @@
 @media screen and (min-width: 768px) {
   .main {
-    margin-top: -80px;
-    .title {
-      font-size: 24px;
-      font-weight: bold;
-    }
-
     .about {
-      margin-bottom: 180px;
       .cover {
-        width: 614px;
-        height: 412px;
-        background-color: pink;
-      }
-      .container {
-        position: relative;
-      }
-      .content {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        width: 518px;
-        .title {
-          font-size: 34px;
-          text-transform: uppercase;
-        }
-        .detail {
-          font-size: 14px;
-          line-height: 40px;
-          text-align: justify;
-        }
-        .tags {
-          margin-top: 36px;
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: flex;
-          .tag {
-            padding: 8px 14px;
-            font-size: 16px;
-            color: #0688d2;
-            background: #eff9ff;
-          }
-        }
-        .line {
-          margin: 32px 0;
-          width: 32px;
-          height: 2px;
-          background: #d8d8d8;
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
         }
       }
-    }
 
-    .service {
-      margin: 80px 0;
-
-      .cover {
-        width: 640px;
-        height: 480px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-      }
+      .info {
+        width: 660px;
+        padding-top: 65px;
 
-      &.one {
-        .content {
-          background-image: url(/img/product-intradermik-service-bg-01.png);
+        .name {
+          font-size: 50px;
+          color: #5ba9ad;
+          font-weight: bold;
         }
-      }
-      &.two {
-        .content {
-          background-image: url(/img/product-intradermik-service-bg-02.png);
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
         }
-      }
-      &.three {
-        .content {
-          background-image: url(/img/product-intradermik-service-bg-03.png);
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #5ba9ad;
+          margin: 20px 0 30px;
         }
-      }
-      &.four {
-        .content {
-          background-image: url(/img/product-intradermik-service-bg-04.png);
+        .description {
+          text-align: justify;
+          word-break: break-all;
+          font-weight: lighter;
+          line-height: 36px;
+          p {
+            margin-top: 24px;
+            font-size: 20px;
+          }
         }
       }
+    }
 
+    .about-device {
       .content {
-        width: 560px;
-        height: 480px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        background: rgba(0, 0, 0, 0.39);
-        padding: 70px 60px 0;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 560px;
-
-        .title {
-          color: #fff;
-          margin-bottom: 20px;
+        img {
+          display: block;
+          width: 100%;
         }
+      }
+    }
 
-        .mb24 {
-          margin-bottom: 40px;
-        }
+    .therapy {
+      .content {
+        .section {
+          background: #eeeeee;
+          padding: 24px 24px 24px 56px;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-orient: horizontal;
+          -webkit-box-direction: reverse;
+          -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+          margin-top: 20px;
 
-        .mb56 {
-          margin-bottom: 56px;
-        }
+          &:first-child {
+            margin-top: 0;
+          }
 
-        .lh40 {
-          line-height: 40px;
-        }
+          .info {
+            margin-right: 24px;
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            text-align: justify;
+            word-break: break-all;
 
-        .lh28 {
-          line-height: 28px;
-        }
+            .cover {
+              img {
+                display: block;
+                width: 560px;
+              }
+            }
 
-        .subtitle {
-          font-size: 16px;
-          color: #fff;
-        }
+            .title {
+              font-size: 36px;
+              color: #5ba9ad;
+              font-weight: bold;
+            }
 
-        .detail {
-          color: #fff;
-          font-size: 16px;
+            .subtitle {
+              font-size: 16px;
+              color: #434343;
+              font-weight: lighter;
+              text-transform: uppercase;
+              margin-top: 4px;
+            }
 
-          li {
-            margin-top: 32px;
+            .desc {
+              font-size: 27px;
+              color: #434343;
+              line-height: 38px;
+              margin-top: 50px;
+            }
+
+            .row {
+              margin-top: 68px;
+              .label {
+                font-size: 29px;
+                color: #434343;
+                font-weight: bold;
+              }
+              .text {
+                font-size: 25px;
+                line-height: 38px;
+                color: #434343;
+                margin-top: 10px;
+              }
+              .item {
+                font-size: 22px;
+                color: #434343;
+                font-weight: lighter;
+                margin-top: 32px;
+                line-height: 1.5;
+              }
+            }
           }
 
-          .label {
-            margin-bottom: 16px;
+          &.therapy-2 {
+            .row {
+              margin-top: 130px;
+            }
+          }
+          &.therapy-3 {
+            .row {
+              margin-top: 80px;
+              .item {
+                line-height: 38px;
+              }
+            }
+            .desc{
+              line-height: 42px;
+            }
+          }
+          &.therapy-4 {
+            .row {
+              margin-top: 50px;
+              .label {
+                margin-bottom: 16px;
+              }
+              .item {
+                margin-top: 12px;
+              }
+            }
           }
         }
       }
     }
-  }
-}
 
-@media screen and (max-width: 768px) {
-  .main {
-    .container {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    }
+    .device {
+      .content {
+        position: relative;
 
-    .title {
-      font-size: 0.48rem;
-      font-weight: bold;
-    }
+        .swiper-container {
+          width: 1100px;
+          margin: 0 auto;
 
-    .about {
-      margin-top: 0.8rem;
-      .cover {
-        width: 6.14rem;
-        height: 4.12rem;
-        float: unset !important;
-        margin-top: 0.48rem;
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
 
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
+        .swiper-prev,
+        .swiper-next {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+          width: 48px;
+          height: 72px;
+          background-color: rgba(55, 55, 55, 0.6) !important;
+          z-index: 5;
+          cursor: pointer;
+          background: url(/img/icon-arrow-left.png) no-repeat center;
+        }
+
+        .swiper-next {
+          left: unset;
+          right: 0;
+          background: url(/img/icon-arrow-right.png) no-repeat center;
         }
       }
-      .container {
-        position: relative;
-      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .main {
+    .about {
       .content {
-        width: 6.14rem;
-        float: unset !important;
-        .title {
-          font-size: 0.48rem;
-          text-transform: uppercase;
-          text-align: center;
-        }
-        .detail {
-          font-size: 0.24rem;
-          line-height: 0.4rem;
-          text-align: justify;
-        }
-        .tags {
-          margin-top: 0.32rem;
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: flex;
-          -webkit-box-pack: center;
-          -ms-flex-pack: center;
-          justify-content: center;
-          .tag {
-            padding: 0.08rem 0.41rem;
-            font-size: 0.24rem;
-            color: #3da5b8;
-            background: #e6fcff;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        .cover {
+          margin-top: 0.4rem;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
           }
         }
-        .line {
-          width: 0.4rem;
-          height: 0.03rem;
-          background: #d8d8d8;
-          margin: 0.32rem auto;
+
+        .info {
+          width: 6.5rem;
+          margin: 0 auto;
+          .name {
+            font-size: 0.34rem;
+            color: #5ba9ad;
+            text-align: center;
+            font-weight: bold;
+          }
+          .subname {
+            font-size: 0.26rem;
+            margin-top: 0.16rem;
+            text-align: center;
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #5ba9ad;
+            margin: 0.32rem auto;
+          }
+          .description {
+            text-align: justify;
+            word-break: break-all;
+            color: #333333;
+            text-align: center;
+            p {
+              font-size: 0.26rem;
+              line-height: 0.48rem;
+            }
+          }
         }
       }
     }
 
-    .service {
-      margin: 1.2rem 0;
-
-      .cover {
-        width: 6.14rem;
-        height: 4.66rem;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        float: unset !important;
-        margin-top: 0.48rem;
-
+    .about-device {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
         img {
           display: block;
           width: 100%;
-          height: 100%;
         }
       }
+    }
 
+    .therapy {
       .content {
-        width: 6.14rem;
-        float: unset !important;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        background-repeat: no-repeat;
-        background-position: center;
-        text-align: center;
-
-        .title {
-          margin-bottom: 0.4rem;
-        }
+        .section {
+          width: 6.86rem;
+          margin: 0 auto;
+          background: #eeeeee;
+          padding: 0.4rem;
+          margin-top: 0.32rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 
-        .mb24 {
-          margin-bottom: 0.4rem;
-        }
+          &:first-child {
+            margin-top: 0;
+          }
 
-        .mb56 {
-          margin-bottom: 0.56rem;
-        }
+          .cover {
+            img {
+              display: block;
+              width: 100%;
+            }
+          }
 
-        .lh40 {
-          line-height: 0.4rem;
-        }
+          .info {
+            text-align: center;
+            word-break: break-all;
 
-        .lh28 {
-          line-height: 0.4rem;
-        }
+            .title {
+              font-size: 0.3rem;
+              color: #5ba9ad;
+              font-weight: bold;
+              margin-top: 0.4rem;
+            }
+
+            .subtitle {
+              font-size: 0.24rem;
+              color: #333;
+              margin-top: 0.16rem;
+            }
+
+            .desc {
+              font-size: 0.26rem;
+              color: #333;
+              line-height: 0.48rem;
+              margin-top: 0.32rem;
+            }
+
+            .row {
+              margin-top: 0.4rem;
+              .label {
+                font-size: 0.26rem;
+                color: #434343;
+                font-weight: bold;
+              }
+              .text {
+                font-size: 0.26rem;
+                line-height: 0.48rem;
+                color: #434343;
+              }
+              .item {
+                font-size: 0.26rem;
+                color: #333;
+                margin-top: 0.16rem;
+                line-height: 1.5;
+              }
+            }
+          }
 
-        .subtitle {
-          font-size: 0.26rem;
+          &.therapy-2 {
+            .row {
+              margin-top: 0.32rem;
+            }
+          }
+          &.therapy-3 {
+            .row {
+              margin-top: 0.4rem;
+            }
+          }
+          &.therapy-4 {
+            .row {
+              margin-top: 0.48rem;
+            }
+          }
         }
+      }
+    }
 
-        .detail {
-          font-size: 0.26rem;
+    .device {
+      .scroll-box {
+        img {
+          width: 1.77rem;
+          height: 2.27rem;
+          margin-right: 0.24rem;
 
-          li {
-            margin-top: 0.32rem;
+          &:first-child {
+            margin-left: 0.32rem;
           }
 
-          .label {
-            margin-bottom: 0.16rem;
+          &:last-child {
+            margin-right: 0.32rem;
           }
         }
       }

css/product-kestos.css

@@ -1,174 +1,136 @@
 @media screen and (min-width: 768px) {
-  .main .service {
-    margin-top: 140px;
+  .main .about .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
   }
-  .main .service .container {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
+  .main .about .info {
+    width: 660px;
+    padding-top: 65px;
+  }
+  .main .about .info .name {
+    font-size: 50px;
+    color: #7d8bb0;
+    font-weight: bold;
   }
-  .main .service .item {
-    width: 558px;
+  .main .about .info .subname {
+    font-size: 30px;
+    margin-top: 15px;
   }
-  .main .service .cover {
-    width: 558px;
-    height: 418px;
+  .main .about .info .line {
+    width: 36px;
+    height: 7px;
+    background: #7d8bb0;
+    margin: 20px 0 30px;
   }
-  .main .service .cover img {
+  .main .about .info .description {
+    font-size: 20px;
+    text-align: justify;
+    word-break: break-all;
+    line-height: 36px;
+  }
+  .main .about .info .description p {
+    margin-top: 24px;
+  }
+  .main .therapy .content img {
     display: block;
     width: 100%;
-    height: 100%;
+    margin-top: 3px;
   }
-  .main .service .content .title {
-    font-size: 24px;
-    font-weight: bold;
-    margin: 40px 0 16px;
+  .main .therapy .content img:first-child {
+    margin-top: 0;
   }
-  .main .service .content .detail {
-    text-align: justify;
-    line-height: 32px;
-  }
-  .main .service .content .detail .mr40 {
-    margin-right: 40px;
-  }
-  .main .service .content .detail span {
-    color: #505050;
-    margin-right: 25px;
-  }
-  .main .service .content .detail span::before {
-    content: "";
-    display: inline-block;
-    vertical-align: -5px;
-    width: 20px;
-    height: 20px;
-    background: url(/img/icon-right.png) no-repeat center;
-    background-size: 20px;
-    margin-right: 8px;
-  }
-  .main .about {
-    height: 600px;
-    background: url(/img/product-kestos-bg-about.png) no-repeat center;
-    background-size: auto 600px;
-    padding-top: 128px;
-    text-align: center;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    margin-top: 140px;
-  }
-  .main .about .title {
-    font-size: 24px;
-    color: #fff;
-  }
-  .main .about .line {
-    width: 32px;
-    height: 2px;
-    background-color: #fff;
-    margin: 64px auto;
-  }
-  .main .about .description {
-    width: 804px;
-    font-size: 16px;
-    line-height: 48px;
-    margin: 0 auto;
-    color: #fff;
+  .main .program .content img {
+    display: block;
+    width: 100%;
   }
-
-  .footer {
-    margin-top: 0;
+  .main .device .content .swiper-container {
+    width: 100%;
+  }
+  .main .device .content .swiper-container img {
+    display: block;
+    width: 100%;
   }
 }
 @media screen and (max-width: 768px) {
-  .main .service .container {
+  .main .about .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
     -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
   }
-  .main .service .item {
-    width: 5.58rem;
+  .main .about .content .cover {
+    margin-top: 0.4rem;
   }
-  .main .service .cover {
-    width: 5.58rem;
-    height: 4.18rem;
-    margin-top: 1.2rem;
-  }
-  .main .service .cover img {
+  .main .about .content .cover img {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: 5.46rem;
+    height: 5.57rem;
   }
-  .main .service .content .title {
+  .main .about .content .info {
+    width: 6.5rem;
+    margin: 0 auto;
+  }
+  .main .about .content .info .name {
     font-size: 0.34rem;
+    color: #7d8bb0;
+    text-align: center;
     font-weight: bold;
-    margin: 0.32rem 0 0.16rem;
   }
-  .main .service .content .detail {
-    text-align: justify;
-    line-height: 0.48rem;
+  .main .about .content .info .subname {
     font-size: 0.26rem;
-  }
-  .main .service .content .detail .mr40 {
-    margin-right: 0.4rem;
-  }
-  .main .service .content .detail li {
-    margin-top: 0.24rem;
-  }
-  .main .service .content .detail span {
-    color: #505050;
-    margin-right: 0.25rem;
-    font-size: 0.24rem;
-  }
-  .main .service .content .detail span::before {
-    content: "";
-    display: inline-block;
-    vertical-align: -0.06rem;
-    width: 0.32rem;
-    height: 0.32rem;
-    background: url(/img/icon-right.png) no-repeat center;
-    background-size: 0.32rem;
-    margin-right: 0.08rem;
-  }
-  .main .about {
-    background: url(/img/product-kestos-bg-about.png) no-repeat center;
-    background-size: cover;
+    margin-top: 0.16rem;
     text-align: center;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    margin-top: 1.2rem;
-    padding: 0.24rem 0;
-  }
-  .main .about .title {
-    font-size: 0.26rem;
-    color: #fff;
   }
-  .main .about .line {
-    width: 0.32rem;
-    height: 0.02rem;
-    background-color: #fff;
-    margin: 0.16rem auto;
+  .main .about .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #7d8bb0;
+    margin: 0.32rem auto;
   }
-  .main .about .description {
-    width: 6.12rem;
-    font-size: 0.24rem;
+  .main .about .content .info .description {
+    text-align: justify;
+    word-break: break-all;
+    color: #333333;
+    text-align: center;
+    font-size: 0.26rem;
     line-height: 0.48rem;
+  }
+  .main .therapy {
+    width: 6.86rem;
     margin: 0 auto;
-    color: #fff;
-    text-align: center;
   }
-
-  .footer {
+  .main .therapy .content img {
+    display: block;
+    width: 100%;
+    margin-top: 0.32rem;
+  }
+  .main .therapy .content img:first-child {
     margin-top: 0;
   }
+  .main .program {
+    width: 6.86rem;
+    margin: 0 auto;
+  }
+  .main .program .content img {
+    display: block;
+    width: 100%;
+  }
+  .main .device .scroll-box img {
+    width: 2.74rem;
+    height: 2.53rem;
+    margin-right: 0.24rem;
+  }
+  .main .device .scroll-box img:first-child {
+    margin-left: 0.32rem;
+  }
+  .main .device .scroll-box img:last-child {
+    margin-right: 0.32rem;
+  }
 }

css/product-kestos.scss

@@ -1,200 +1,181 @@
 @media screen and (min-width: 768px) {
   .main {
-    .service {
-      margin-top: 140px;
-      .container {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-      }
-
-      .item {
-        width: 558px;
-      }
-
+    .about {
       .cover {
-        width: 558px;
-        height: 418px;
-
         img {
           display: block;
-          width: 100%;
-          height: 100%;
+          width: 470px;
+          height: 480px;
         }
       }
-      .content {
-        .title {
-          font-size: 24px;
+
+      .info {
+        width: 660px;
+        padding-top: 65px;
+
+        .name {
+          font-size: 50px;
+          color: #7d8bb0;
           font-weight: bold;
-          margin: 40px 0 16px;
         }
-        .detail {
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
+        }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #7d8bb0;
+          margin: 20px 0 30px;
+        }
+        .description {
+          font-size: 20px;
           text-align: justify;
-          line-height: 32px;
-
-          .mr40 {
-            margin-right: 40px;
+          word-break: break-all;
+          line-height: 36px;
+          p {
+            margin-top: 24px;
           }
+        }
+      }
+    }
 
-          span {
-            color: #505050;
-            margin-right: 25px;
+    .therapy {
+      .content {
+        img {
+          display: block;
+          width: 100%;
+          margin-top: 3px;
 
-            &::before {
-              content: '';
-              display: inline-block;
-              vertical-align: -5px;
-              width: 20px;
-              height: 20px;
-              background: url(/img/icon-right.png) no-repeat center;
-              background-size: 20px;
-              margin-right: 8px;
-            }
+          &:first-child {
+            margin-top: 0;
           }
         }
       }
     }
 
-    .about {
-      height: 600px;
-      background: url(/img/product-kestos-bg-about.png) no-repeat center;
-      background-size: auto 600px;
-      padding-top: 128px;
-      text-align: center;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      margin-top: 140px;
-      .title {
-        font-size: 24px;
-        color: #fff;
-      }
-      .line {
-        width: 32px;
-        height: 2px;
-        background-color: #fff;
-        margin: 64px auto;
-      }
-      .description {
-        width: 804px;
-        font-size: 16px;
-        line-height: 48px;
-        margin: 0 auto;
-        color: #fff;
+    .program {
+      .content {
+        img {
+          display: block;
+          width: 100%;
+        }
       }
     }
-  }
 
-  .footer {
-    margin-top: 0;
+    .device {
+      .content {
+        .swiper-container {
+          width: 100%;
+
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
+      }
+    }
   }
 }
 
 @media screen and (max-width: 768px) {
   .main {
-    .service {
-      .container {
+    .about {
+      .content {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
-        -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
         -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
-      }
+        .cover {
+          margin-top: 0.4rem;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
+          }
+        }
 
-      .item {
-        width: 5.58rem;
+        .info {
+          width: 6.5rem;
+          margin: 0 auto;
+          .name {
+            font-size: 0.34rem;
+            color: #7d8bb0;
+            text-align: center;
+            font-weight: bold;
+          }
+          .subname {
+            font-size: 0.26rem;
+            margin-top: 0.16rem;
+            text-align: center;
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #7d8bb0;
+            margin: 0.32rem auto;
+          }
+          .description {
+            text-align: justify;
+            word-break: break-all;
+            color: #333333;
+            text-align: center;
+            font-size: 0.26rem;
+            line-height: 0.48rem;
+          }
+        }
       }
+    }
 
-      .cover {
-        width: 5.58rem;
-        height: 4.18rem;
-        margin-top: 1.2rem;
-
+    .therapy {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
         img {
           display: block;
           width: 100%;
-          height: 100%;
+          margin-top: 0.32rem;
+
+          &:first-child {
+            margin-top: 0;
+          }
         }
       }
+    }
+
+    .program {
+      width: 6.86rem;
+      margin: 0 auto;
       .content {
-        .title {
-          font-size: 0.34rem;
-          font-weight: bold;
-          margin: 0.32rem 0 0.16rem;
+        img {
+          display: block;
+          width: 100%;
         }
-        .detail {
-          text-align: justify;
-          line-height: 0.48rem;
-          font-size: 0.26rem;
+      }
+    }
 
-          .mr40 {
-            margin-right: 0.4rem;
-          }
+    .device {
+      .scroll-box {
+        img {
+          width: 2.74rem;
+          height: 2.53rem;
+          margin-right: 0.24rem;
 
-          li {
-            margin-top: 0.24rem;
+          &:first-child {
+            margin-left: 0.32rem;
           }
 
-          span {
-            color: #505050;
-            margin-right: 0.25rem;
-            font-size: 0.24rem;
-
-            &::before {
-              content: '';
-              display: inline-block;
-              vertical-align: -0.06rem;
-              width: 0.32rem;
-              height: 0.32rem;
-              background: url(/img/icon-right.png) no-repeat center;
-              background-size: 0.32rem;
-              margin-right: 0.08rem;
-            }
+          &:last-child {
+            margin-right: 0.32rem;
           }
         }
       }
     }
-
-    .about {
-      background: url(/img/product-kestos-bg-about.png) no-repeat center;
-      background-size: cover;
-      text-align: center;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      margin-top: 1.2rem;
-      padding: 0.24rem 0;
-      .title {
-        font-size: 0.26rem;
-        color: #fff;
-      }
-      .line {
-        width: 0.32rem;
-        height: 0.02rem;
-        background-color: #fff;
-        margin: 0.16rem auto;
-      }
-      .description {
-        width: 6.12rem;
-        font-size: 0.24rem;
-        line-height: 0.48rem;
-        margin: 0 auto;
-        color: #fff;
-        text-align: center;
-      }
-    }
-  }
-
-  .footer {
-    margin-top: 0;
   }
 }

css/product-mesobiolift.css

@@ -1,105 +1,147 @@
 @media screen and (min-width: 768px) {
-  .main .about {
-    margin-top: 100px;
+  .main .about .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
   }
-  .main .about .container {
-    position: relative;
+  .main .about .info {
+    width: 660px;
+    padding-top: 65px;
   }
-  .main .about .cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 680px;
-    height: 452px;
+  .main .about .info .name {
+    font-size: 50px;
+    color: #5daf32;
+    font-weight: bold;
   }
-  .main .about .content {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  .main .about .info .subname {
+    font-size: 30px;
+    margin-top: 15px;
   }
-  .main .about .content .title {
-    font-size: 24px;
-    font-weight: bold;
-    padding: 10px 0 20px;
-    text-align: center;
+  .main .about .info .line {
+    width: 36px;
+    height: 7px;
+    background: #5daf32;
+    margin: 20px 0 30px;
   }
-  .main .about .content .subtitle {
-    font-size: 16px;
-    text-align: center;
+  .main .about .info .description {
+    font-size: 20px;
+    text-align: justify;
+    word-break: break-all;
+    line-height: 36px;
   }
-  .main .about .content .title,
-.main .about .content .subtitle,
-.main .about .content .section {
-    padding-left: 735px;
-  }
-  .main .about .content .section {
-    height: 427px;
-    padding-left: 735px;
-    padding-top: 52px;
-    padding-right: 40px;
-    margin-top: 53px;
-    background: url(/img/product-mesobiolift-about-bg.png) no-repeat;
-    background-position: 20px 26px;
-    background-color: #f7f7f7;
-  }
-  .main .about .content .section .description {
-    line-height: 32px;
-  }
-  .main .about .content .section ul li {
-    line-height: 40px;
+  .main .about .info .tags {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-top: 40px;
   }
-  .main .service {
-    margin-top: 180px;
+  .main .technology .content .section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 10px 30px;
+    background: #eee;
+    margin-top: 40px;
   }
-  .main .service.one .content {
-    background-image: url(/img/service-title-bg-one.png);
+  .main .technology .content .section:first-child {
+    margin-top: 0;
   }
-  .main .service.one .cover {
-    height: 578px;
+  .main .technology .content .section .cover {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
   }
-  .main .service.two .content {
-    background-image: url(/img/service-title-bg-two.png);
+  .main .technology .content .section .cover img {
+    display: block;
+    width: 374px;
   }
-  .main .service.two .cover {
-    height: 700px;
+  .main .technology .content .section:nth-child(2n-1) .info {
+    margin-left: 40px;
   }
-  .main .service .cover {
-    width: 567px;
-    background-color: pink;
+  .main .technology .content .section:nth-child(2n) .info {
+    margin-right: 40px;
   }
-  .main .service .content {
-    width: 560px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding-top: 113px;
-    background-repeat: no-repeat;
-    background-position: left top;
+  .main .technology .content .section .info {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
   }
-  .main .service .content .title {
-    font-size: 24px;
+  .main .technology .content .section .info .title {
+    font-size: 34px;
+    color: #5daf33;
     font-weight: bold;
   }
-  .main .service .content .line {
-    height: 3px;
-    width: 32px;
-    background-color: #f7f7f7;
-    margin: 32px 0;
-  }
-  .main .service .content .description {
+  .main .technology .content .section .info .subtitle {
     font-size: 16px;
+    color: #434343;
+    font-weight: lighter;
+    margin-top: 12px;
+  }
+  .main .technology .content .section .info .description {
+    font-size: 27px;
+    color: #434343;
+    margin-top: 24px;
     line-height: 40px;
+    text-align: justify;
+    word-break: break-all;
   }
-  .main .service .content .detail {
-    margin-top: 32px;
+  .main .care .content .section {
+    float: left;
+    width: 390px;
+    height: 340px;
+    position: relative;
+    margin-right: 15px;
+    margin-top: 15px;
+    background: #eee;
+    overflow: hidden;
   }
-  .main .service .content .detail li {
-    line-height: 40px;
+  .main .care .content .section:nth-child(2), .main .care .content .section:nth-child(5), .main .care .content .section:nth-child(8) {
+    margin-right: 0;
   }
-  .main .service .content .detail .text {
-    color: #999;
+  .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(2) {
+    margin-top: 0;
   }
-}
-@media screen and (max-width: 768px) {
-  .main .container {
+  .main .care .content .section:first-child {
+    width: 795px;
+  }
+  .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(6) {
+    background: #5daf32;
+  }
+  .main .care .content .section:hover img {
+    -webkit-transform: scale(1.2);
+    transform: scale(1.2);
+  }
+  .main .care .content .section .cover {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .main .care .content .section .cover img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    -webkit-transition: all 0.4s;
+    transition: all 0.4s;
+  }
+  .main .care .content .section .info {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -110,103 +152,231 @@
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    color: #fff;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 32px;
+    line-height: 1.5;
+  }
+  .main .care .content .section .info .title {
+    font-size: 28px;
+    font-weight: bold;
+  }
+  .main .care .content .section .info .title.big {
+    font-size: 41px;
+  }
+  .main .care .content .section .info .subtitle {
+    font-size: 24px;
+    margin-top: 8px;
+  }
+  .main .care .content .section .info .description {
+    font-size: 20px;
+    font-weight: lighter;
+    margin-top: 20px;
+  }
+  .main .device .content .swiper-container {
+    width: 100%;
+  }
+  .main .device .content .swiper-container img {
+    display: block;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .main .about .content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
     -ms-flex-direction: column-reverse;
     flex-direction: column-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
-  .main .about {
-    margin-top: 1.2rem;
-  }
-  .main .about .cover {
-    width: 6.14rem;
-    height: 4.08rem;
+  .main .about .content .cover {
     margin-top: 0.4rem;
   }
-  .main .about .cover img {
+  .main .about .content .cover img {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: 5.46rem;
+    height: 5.57rem;
   }
-  .main .about .content {
+  .main .about .content .tags {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    margin-top: 0.16rem;
+  }
+  .main .about .content .tags img {
+    display: block;
+    width: 1.76rem;
+    height: 1.12rem;
+    margin: 0 0.06rem;
+  }
+  .main .about .content .info {
+    width: 6.5rem;
+    margin: 0 auto;
+  }
+  .main .about .content .info .name {
+    font-size: 0.34rem;
+    color: #5daf32;
+    text-align: center;
+    font-weight: bold;
+  }
+  .main .about .content .info .subname {
+    font-size: 0.26rem;
+    margin-top: 0.16rem;
+    text-align: center;
+  }
+  .main .about .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #5daf32;
+    margin: 0.32rem auto;
+  }
+  .main .about .content .info .description {
+    text-align: justify;
+    word-break: break-all;
+    color: #333333;
+    text-align: center;
+    font-size: 0.26rem;
+    line-height: 0.48rem;
+  }
+  .main .technology .content .section {
+    width: 6.86rem;
+    margin: 0 auto;
+    padding: 0.4rem 0.7rem;
+    background: #eee;
+    margin-top: 0.32rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    width: 5.82rem;
-    text-align: center;
   }
-  .main .about .content .title {
+  .main .technology .content .section:first-child {
+    margin-top: 0;
+  }
+  .main .technology .content .section .cover img {
+    display: block;
+    width: 3.74rem;
+    margin: 0 auto;
+  }
+  .main .technology .content .section .info .title {
     font-size: 0.3rem;
+    color: #5daf33;
     font-weight: bold;
     text-align: center;
+    margin-top: 0.26rem;
   }
-  .main .about .content .subtitle {
-    font-size: 0.26rem;
+  .main .technology .content .section .info .subtitle {
+    font-size: 0.24rem;
+    color: #333;
+    margin-top: 0.16rem;
     text-align: center;
-    color: #999;
-    margin: 0.16rem 0 0.4rem;
   }
-  .main .about .content .section .description {
-    line-height: 0.4rem;
+  .main .technology .content .section .info .description {
     font-size: 0.26rem;
+    color: #333;
+    margin-top: 0.4rem;
+    line-height: 0.48rem;
+    text-align: justify;
+    word-break: break-all;
+    text-align: center;
   }
-  .main .about .content .section ul {
-    margin-top: 0.24rem;
+  .main .care .content {
+    width: 6.86rem;
+    margin: 0 auto;
   }
-  .main .about .content .section ul li {
-    line-height: 0.48rem;
-    font-size: 0.26rem;
+  .main .care .content .section {
+    float: left;
+    width: 3.34rem;
+    height: 3.4rem;
+    position: relative;
+    margin-right: 0.18rem;
+    margin-top: 0.18rem;
+    background: #eee;
   }
-  .main .service {
-    margin-top: 1.2rem;
+  .main .care .content .section:first-child {
+    width: 6.86rem;
+    margin-top: 0;
+    margin-right: 0;
   }
-  .main .service.one .content {
-    background-image: url(/img/service-title-bg-one.png);
+  .main .care .content .section:nth-child(3), .main .care .content .section:nth-child(5), .main .care .content .section:nth-child(7), .main .care .content .section:nth-child(9) {
+    margin-right: 0;
   }
-  .main .service.two .content {
-    background-image: url(/img/service-title-bg-two.png);
+  .main .care .content .section:nth-child(1), .main .care .content .section:nth-child(6) {
+    background: #5daf32;
   }
-  .main .service .cover {
-    width: 5.68rem;
-    margin-top: 0.32rem;
+  .main .care .content .section .cover {
+    position: absolute;
+    width: 100%;
+    height: 100%;
   }
-  .main .service .cover img {
+  .main .care .content .section .cover img {
     display: block;
     width: 100%;
+    height: 100%;
   }
-  .main .service .content {
+  .main .care .content .section .info {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    color: #fff;
+    text-align: center;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    background-repeat: no-repeat;
-    background-position: center top;
-    background-size: 2rem;
-    text-align: center;
-    width: 6rem;
+    padding: 0 0.32rem;
+    line-height: 1.5;
   }
-  .main .service .content .title {
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    margin-top: 0.85rem;
+  .main .care .content .section .info .title {
+    font-size: 0.32rem;
   }
-  .main .service .content .line {
-    height: 0.03rem;
-    width: 0.4rem;
-    background-color: #f7f7f7;
-    margin: 0.4rem auto 0.32rem;
+  .main .care .content .section .info .title.big {
+    font-size: 0.32rem;
   }
-  .main .service .content .description {
-    font-size: 0.26rem;
-    line-height: 0.4rem;
+  .main .care .content .section .info .subtitle {
+    font-size: 0.24rem;
+    margin-top: 0.24rem;
   }
-  .main .service .content .detail {
-    margin-top: 0.32rem;
+  .main .care .content .section .info .description {
     font-size: 0.24rem;
+    font-weight: lighter;
+    margin-top: 0.24rem;
   }
-  .main .service .content .detail li {
-    line-height: 0.48rem;
-    font-size: 0.26rem;
+  .main .device .scroll-box img {
+    width: 3.16rem;
+    height: 3.06rem;
+    margin-right: 0.24rem;
   }
-  .main .service .content .detail .text {
-    color: #999;
-    font-size: 0.26rem;
+  .main .device .scroll-box img:first-child {
+    margin-left: 0.32rem;
+  }
+  .main .device .scroll-box img:last-child {
+    margin-right: 0.32rem;
   }
 }

css/product-mesobiolift.scss

@@ -1,118 +1,236 @@
 @media screen and (min-width: 768px) {
   .main {
     .about {
-      margin-top: 100px;
-
-      .container {
-        position: relative;
-      }
       .cover {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 680px;
-        height: 452px;
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
+        }
       }
 
-      .content {
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
+      .info {
+        width: 660px;
+        padding-top: 65px;
 
-        .title {
-          font-size: 24px;
+        .name {
+          font-size: 50px;
+          color: #5daf32;
           font-weight: bold;
-          padding: 10px 0 20px;
-          text-align: center;
         }
-
-        .subtitle {
-          font-size: 16px;
-          text-align: center;
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
+        }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #5daf32;
+          margin: 20px 0 30px;
+        }
+        .description {
+          font-size: 20px;
+          text-align: justify;
+          word-break: break-all;
+          line-height: 36px;
         }
 
-        .title,
-        .subtitle,
-        .section {
-          padding-left: 735px;
+        .tags {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          margin-top: 40px;
         }
+      }
+    }
+
+    .technology {
+      .content {
         .section {
-          height: 427px;
-          padding-left: 735px;
-          padding-top: 52px;
-          padding-right: 40px;
-          margin-top: 53px;
-          background: url(/img/product-mesobiolift-about-bg.png) no-repeat;
-          background-position: 20px 26px;
-          background-color: #f7f7f7;
-          .description {
-            line-height: 32px;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          padding: 10px 30px;
+          background: #eee;
+          margin-top: 40px;
+
+          &:first-child {
+            margin-top: 0;
           }
-          ul {
-            li {
+
+          .cover {
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            img {
+              display: block;
+              width: 374px;
+            }
+          }
+
+          &:nth-child(2n-1) {
+            .info {
+              margin-left: 40px;
+            }
+          }
+
+          &:nth-child(2n) {
+            .info {
+              margin-right: 40px;
+            }
+          }
+
+          .info {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+
+            .title {
+              font-size: 34px;
+              color: #5daf33;
+              font-weight: bold;
+            }
+            .subtitle {
+              font-size: 16px;
+              color: #434343;
+              font-weight: lighter;
+              margin-top: 12px;
+            }
+            .description {
+              font-size: 27px;
+              color: #434343;
+              margin-top: 24px;
               line-height: 40px;
+              text-align: justify;
+              word-break: break-all;
             }
           }
         }
       }
     }
 
-    .service {
-      margin-top: 180px;
+    .care {
+      .content {
+        .section {
+          float: left;
+          width: 390px;
+          height: 340px;
+          position: relative;
+          margin-right: 15px;
+          margin-top: 15px;
+          background: #eee;
+          overflow: hidden;
 
-      &.one {
-        .content {
-          background-image: url(/img/service-title-bg-one.png);
-        }
+          &:nth-child(2),
+          &:nth-child(5),
+          &:nth-child(8) {
+            margin-right: 0;
+          }
 
-        .cover {
-          height: 578px;
-        }
-      }
-      &.two {
-        .content {
-          background-image: url(/img/service-title-bg-two.png);
-        }
+          &:nth-child(1),
+          &:nth-child(2) {
+            margin-top: 0;
+          }
 
-        .cover {
-          height: 700px;
-        }
-      }
+          &:first-child {
+            width: 795px;
+          }
 
-      .cover {
-        width: 567px;
-        background-color: pink;
+          &:nth-child(1),
+          &:nth-child(6) {
+            background: #5daf32;
+          }
+
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+          }
+
+          .cover {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+              -webkit-transition: all 0.4s;
+              transition: all 0.4s;
+            }
+          }
+
+          .info {
+            position: absolute;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            color: #fff;
+            text-align: center;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            padding: 0 32px;
+            line-height: 1.5;
+
+            .title {
+              font-size: 28px;
+              font-weight: bold;
+
+              &.big {
+                font-size: 41px;
+              }
+            }
+            .subtitle {
+              font-size: 24px;
+              margin-top: 8px;
+            }
+            .description {
+              font-size: 20px;
+              font-weight: lighter;
+              margin-top: 20px;
+            }
+          }
+        }
       }
+    }
 
+    .device {
       .content {
-        width: 560px;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        padding-top: 113px;
-
-        background-repeat: no-repeat;
-        background-position: left top;
-        .title {
-          font-size: 24px;
-          font-weight: bold;
-        }
-        .line {
-          height: 3px;
-          width: 32px;
-          background-color: #f7f7f7;
-          margin: 32px 0;
-        }
-        .description {
-          font-size: 16px;
-          line-height: 40px;
-        }
-        .detail {
-          margin-top: 32px;
-          li {
-            line-height: 40px;
-          }
+        .swiper-container {
+          width: 100%;
 
-          .text {
-            color: #999;
+          img {
+            display: block;
+            width: 100%;
           }
         }
       }
@@ -122,129 +240,232 @@
 
 @media screen and (max-width: 768px) {
   .main {
-    .container {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      -webkit-box-align: center;
-      -ms-flex-align: center;
-      align-items: center;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    }
     .about {
-      margin-top: 1.2rem;
-      .cover {
-        width: 6.14rem;
-        height: 4.08rem;
-        margin-top: 0.4rem;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
+      .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        .cover {
+          margin-top: 0.4rem;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
+          }
         }
-      }
 
-      .content {
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        width: 5.82rem;
-        text-align: center;
+        .tags {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          margin-top: 0.16rem;
 
-        .title {
-          font-size: 0.3rem;
-          font-weight: bold;
-          text-align: center;
+          img {
+            display: block;
+            width: 1.76rem;
+            height: 1.12rem;
+            margin: 0 0.06rem;
+          }
         }
 
-        .subtitle {
-          font-size: 0.26rem;
-          text-align: center;
-          color: #999;
-          margin: 0.16rem 0 0.4rem;
+        .info {
+          width: 6.5rem;
+          margin: 0 auto;
+          .name {
+            font-size: 0.34rem;
+            color: #5daf32;
+            text-align: center;
+            font-weight: bold;
+          }
+          .subname {
+            font-size: 0.26rem;
+            margin-top: 0.16rem;
+            text-align: center;
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #5daf32;
+            margin: 0.32rem auto;
+          }
+          .description {
+            text-align: justify;
+            word-break: break-all;
+            color: #333333;
+            text-align: center;
+            font-size: 0.26rem;
+            line-height: 0.48rem;
+          }
         }
+      }
+    }
 
+    .technology {
+      .content {
         .section {
-          .description {
-            line-height: 0.4rem;
-            font-size: 0.26rem;
+          width: 6.86rem;
+          margin: 0 auto;
+          padding: 0.4rem 0.7rem;
+          background: #eee;
+          margin-top: 0.32rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+
+          &:first-child {
+            margin-top: 0;
           }
-          ul {
-            margin-top: 0.24rem;
-            li {
-              line-height: 0.48rem;
+
+          .cover {
+            img {
+              display: block;
+              width: 3.74rem;
+              margin: 0 auto;
+            }
+          }
+
+          .info {
+            .title {
+              font-size: 0.3rem;
+              color: #5daf33;
+              font-weight: bold;
+              text-align: center;
+              margin-top: 0.26rem;
+            }
+            .subtitle {
+              font-size: 0.24rem;
+              color: #333;
+              margin-top: 0.16rem;
+              text-align: center;
+            }
+            .description {
               font-size: 0.26rem;
+              color: #333;
+              margin-top: 0.4rem;
+              line-height: 0.48rem;
+              text-align: justify;
+              word-break: break-all;
+              text-align: center;
             }
           }
         }
       }
     }
 
-    .service {
-      margin-top: 1.2rem;
+    .care {
+      .content {
+        width: 6.86rem;
+        margin: 0 auto;
+        .section {
+          float: left;
+          width: 3.34rem;
+          height: 3.4rem;
+          position: relative;
+          margin-right: 0.18rem;
+          margin-top: 0.18rem;
+          background: #eee;
 
-      &.one {
-        .content {
-          background-image: url(/img/service-title-bg-one.png);
-        }
-      }
-      &.two {
-        .content {
-          background-image: url(/img/service-title-bg-two.png);
+          &:first-child {
+            width: 6.86rem;
+            margin-top: 0;
+            margin-right: 0;
+          }
+
+          &:nth-child(3),
+          &:nth-child(5),
+          &:nth-child(7),
+          &:nth-child(9) {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(6) {
+            background: #5daf32;
+          }
+
+          .cover {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .info {
+            position: absolute;
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.3);
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            color: #fff;
+            text-align: center;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            padding: 0 0.32rem;
+            line-height: 1.5;
+
+            .title {
+              font-size: 0.32rem;
+              &.big {
+                font-size: 0.32rem;
+              }
+            }
+            .subtitle {
+              font-size: 0.24rem;
+              margin-top: 0.24rem;
+            }
+            .description {
+              font-size: 0.24rem;
+              font-weight: lighter;
+              margin-top: 0.24rem;
+            }
+          }
         }
       }
+    }
 
-      .cover {
-        width: 5.68rem;
-        margin-top: 0.32rem;
+    .device {
+      .scroll-box {
         img {
-          display: block;
-          width: 100%;
-        }
-      }
+          width: 3.16rem;
+          height: 3.06rem;
+          margin-right: 0.24rem;
 
-      .content {
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-
-        background-repeat: no-repeat;
-        background-position: center top;
-        background-size: 2rem;
-        text-align: center;
-        width: 6rem;
-        .title {
-          font-size: 24px;
-          font-weight: bold;
-          text-align: center;
-          margin-top: 0.85rem;
-        }
-        .line {
-          height: 0.03rem;
-          width: 0.4rem;
-          background-color: #f7f7f7;
-          margin: 0.4rem auto 0.32rem;
-        }
-        .description {
-          font-size: 0.26rem;
-          line-height: 0.4rem;
-        }
-        .detail {
-          margin-top: 0.32rem;
-          font-size: 0.24rem;
-          li {
-            line-height: 0.48rem;
-            font-size: 0.26rem;
+          &:first-child {
+            margin-left: 0.32rem;
           }
 
-          .text {
-            color: #999;
-            font-size: 0.26rem;
+          &:last-child {
+            margin-right: 0.32rem;
           }
         }
       }

css/product-rollaction.css

@@ -1,299 +1,252 @@
 @media screen and (min-width: 768px) {
-  .main .about {
-    margin-top: 100px;
-  }
-  .main .about .container {
-    height: 592px;
-    position: relative;
-  }
-  .main .about .item {
-    position: absolute;
-    width: 286px;
-    height: 286px;
-    background-color: pink;
-  }
-  .main .about .item:nth-child(3) {
-    position: relative;
-    width: 592px;
-    height: 592px;
-    margin: 0 auto;
+  .main .about .cover img {
+    display: block;
+    width: 470px;
+    height: 480px;
   }
-  .main .about .item:nth-child(1), .main .about .item:nth-child(2) {
-    left: 0;
+  .main .about .info {
+    width: 660px;
+    padding-top: 65px;
   }
-  .main .about .item:nth-child(1), .main .about .item:nth-child(4) {
-    top: 0;
+  .main .about .info .name {
+    font-size: 50px;
+    color: #b62d1a;
+    font-weight: bold;
   }
-  .main .about .item:nth-child(4), .main .about .item:nth-child(5) {
-    right: 0;
+  .main .about .info .subname {
+    font-size: 30px;
+    margin-top: 15px;
   }
-  .main .about .item:nth-child(2), .main .about .item:nth-child(5) {
-    bottom: 0;
+  .main .about .info .line {
+    width: 36px;
+    height: 7px;
+    background: #b62d1a;
+    margin: 20px 0 30px;
   }
-  .main .about .item .cover {
-    width: 100%;
-    height: 100%;
+  .main .about .info .description {
+    text-align: justify;
+    word-break: break-all;
+    line-height: 36px;
   }
-  .main .about .item .cover img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  .main .about .item:hover .active {
-    opacity: 1;
-  }
-  .main .about .item .active {
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    text-align: center;
+  .main .about .info .description p {
+    margin-top: 24px;
+    font-size: 20px;
+  }
+  .main .difference .content .section {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-  }
-  .main .about .item .active .title {
-    font-size: 24px;
-    color: #fff;
-  }
-  .main .about .item .active .line {
-    width: 32px;
-    height: 2px;
-    background-color: #ffffff;
-    margin: 40px auto;
-  }
-  .main .about .item .active .detail {
-    font-size: 16px;
-    color: #fff;
-    line-height: 40px;
-    padding: 0 70px;
-  }
-  .main .service {
-    margin-top: 140px;
-  }
-  .main .service .cover {
-    width: 568px;
-    height: 568px;
-    background: pink;
-  }
-  .main .service .cover img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  .main .service.one .content {
-    padding-top: 113px;
-    background-image: url(/img/service-title-bg-one.png);
-  }
-  .main .service.two {
-    background: #f7f7f7;
-    margin-top: 319px;
-  }
-  .main .service.two .container {
-    position: relative;
-  }
-  .main .service.two .container .cover {
-    position: absolute;
-    bottom: 76px;
-    left: 0;
-  }
-  .main .service.two .container .content {
-    padding-top: 173px;
-    height: 456px;
-    background-image: url(/img/service-title-bg-two.png);
-    background-position: left 60px;
-  }
-  .main .service.three .content {
-    padding-top: 113px;
-    background-image: url(/img/service-title-bg-three.png);
-  }
-  .main .service .content {
-    width: 560px;
-    text-align: justify;
-    background-repeat: no-repeat;
+    background-color: #eeeeee;
+    padding: 20px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    margin-top: 44px;
   }
-  .main .service .content .title {
-    font-size: 24px;
-    font-weight: bold;
-  }
-  .main .service .content .line {
-    width: 32px;
-    height: 3px;
-    background-color: #e8e8e8;
-    margin: 32px 0;
-  }
-  .main .service .content .text {
-    color: #999;
-  }
-  .main .service .content .lh40 {
-    line-height: 40px;
-  }
-}
-@media screen and (max-width: 768px) {
-  .main .about {
-    margin-top: 1.2rem;
-  }
-  .main .about .container {
-    width: 6.84rem;
-    margin: 0 auto;
-    height: 3.36rem;
-    position: relative;
-  }
-  .main .about .item {
-    position: absolute;
-    width: 1.64rem;
-    height: 1.64rem;
-  }
-  .main .about .item:nth-child(3) {
-    position: relative;
-    width: 3.36rem;
-    height: 3.36rem;
-    margin: 0 auto;
+  .main .difference .content .section:first-child {
+    margin-top: 0;
   }
-  .main .about .item:nth-child(1), .main .about .item:nth-child(2) {
-    left: 0;
+  .main .difference .content .section .cover {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
   }
-  .main .about .item:nth-child(1), .main .about .item:nth-child(4) {
-    top: 0;
-  }
-  .main .about .item:nth-child(4), .main .about .item:nth-child(5) {
-    right: 0;
-  }
-  .main .about .item:nth-child(2), .main .about .item:nth-child(5) {
-    bottom: 0;
+  .main .difference .content .section .cover img {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 450px;
+  }
+  .main .difference .content .section:nth-child(2n-1) .info {
+    margin-left: 60px;
+    margin-right: 30px;
+  }
+  .main .difference .content .section:nth-child(2n) .info {
+    margin-right: 60px;
+    margin-left: 30px;
+  }
+  .main .difference .content .section .info {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+  }
+  .main .difference .content .section .info .title {
+    color: #b62d1a;
+    font-size: 37px;
+    font-weight: bold;
   }
-  .main .about .item .cover {
-    width: 100%;
-    height: 100%;
+  .main .difference .content .section .info .description {
+    font-size: 27px;
+    color: #434343;
+    line-height: 38px;
+    margin-top: 38px;
   }
-  .main .about .item .cover img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  .main .about .item .active {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    text-align: center;
+  .main .effect .content .section {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-top: 24px;
   }
-  .main .about .item .active .title {
-    font-size: 0.26rem;
-    color: #fff;
+  .main .effect .content .section:first-child {
+    margin-top: 0;
   }
-  .main .about .item .active .line {
-    width: 0.32rem;
-    height: 0.02rem;
-    background-color: #ffffff;
-    margin: 0.32rem auto;
+  .main .effect .content .section .cover {
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
   }
-  .main .about .item .active .detail {
-    font-size: 0.2rem;
-    color: #fff;
-    line-height: 0.4rem;
-    padding: 0 0.18rem;
+  .main .effect .content .section .cover img {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 388px;
+  }
+  .main .effect .content .section .info {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    margin: 0 60px;
+  }
+  .main .effect .content .section .info .title {
+    color: #b62d1a;
+    font-size: 34px;
+    font-weight: bold;
   }
-  .main .service {
-    margin-top: 1.2rem;
+  .main .effect .content .section .info .description {
+    font-size: 27px;
+    color: #434343;
+    line-height: 40px;
+    margin-top: 38px;
   }
-  .main .service .container {
+}
+@media screen and (max-width: 768px) {
+  .main .about .content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
     -ms-flex-direction: column-reverse;
     flex-direction: column-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
   }
-  .main .service .cover {
-    width: 5.68rem;
-    height: 5.68rem;
-    float: unset !important;
+  .main .about .content .cover {
     margin-top: 0.4rem;
   }
-  .main .service .cover img {
+  .main .about .content .cover img {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: 5.46rem;
+    height: 5.57rem;
   }
-  .main .service.one .content {
-    background-image: url(/img/service-title-bg-one.png);
+  .main .about .content .info {
+    width: 6.5rem;
+    margin: 0 auto;
   }
-  .main .service.two .content {
-    background-image: url(/img/service-title-bg-two.png);
+  .main .about .content .info .name {
+    font-size: 0.34rem;
+    color: #b62d1a;
+    text-align: center;
+    font-weight: bold;
   }
-  .main .service.three .content {
-    background-image: url(/img/service-title-bg-three.png);
+  .main .about .content .info .subname {
+    font-size: 0.26rem;
+    margin-top: 0.16rem;
+    text-align: center;
+  }
+  .main .about .content .info .line {
+    width: 0.4rem;
+    height: 0.06rem;
+    background: #b62d1a;
+    margin: 0.32rem auto;
   }
-  .main .service .content {
-    width: 5.68rem;
-    float: unset !important;
+  .main .about .content .info .description {
     text-align: justify;
-    background-repeat: no-repeat;
-    background-position: center top;
-    background-size: auto 1.33rem;
-    padding-top: 1.1rem;
+    word-break: break-all;
+    color: #333333;
+    text-align: center;
+  }
+  .main .about .content .info .description p {
+    font-size: 0.26rem;
+    line-height: 0.48rem;
+  }
+  .main .difference .content .section {
+    width: 6.86rem;
+    background-color: #eeeeee;
+    padding: 0.4rem 0.7rem;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    text-align: center;
+    margin: 0 auto;
+    margin-top: 0.32rem;
   }
-  .main .service .content .title {
-    font-size: 0.34rem;
-    font-weight: bold;
+  .main .difference .content .section:first-child {
+    margin-top: 0;
   }
-  .main .service .content .line {
-    width: 0.4rem;
-    height: 0.03rem;
-    background-color: #e8e8e8;
-    margin: 0.32rem auto;
+  .main .difference .content .section .cover img {
+    display: block;
+    width: 4.5rem;
+    margin: 0 auto;
+  }
+  .main .difference .content .section .info .title {
+    color: #b62d1a;
+    font-size: 0.3rem;
+    font-weight: bold;
+    margin: 0.4rem 0 0.32rem;
+    text-align: center;
   }
-  .main .service .content .text {
-    color: #999;
+  .main .difference .content .section .info .description {
     font-size: 0.26rem;
+    color: #333;
+    line-height: 0.48rem;
+    text-align: center;
+  }
+  .main .effect .content .section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 5.98rem;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 0.8rem;
   }
-  .main .service .content .lh40 {
-    line-height: 0.4rem;
+  .main .effect .content .section:first-child {
+    margin-top: 0;
+  }
+  .main .effect .content .section .cover img {
+    width: 3.88rem;
+  }
+  .main .effect .content .section .info .title {
+    color: #b62d1a;
+    font-size: 0.3rem;
+    font-weight: bold;
+    margin: 0.24rem 0 0.16rem;
   }
-  .main .service .content ul > li {
+  .main .effect .content .section .info .description {
     font-size: 0.26rem;
+    color: #333;
+    line-height: 0.48rem;
   }
 }

css/product-rollaction.scss

@@ -1,178 +1,168 @@
 @media screen and (min-width: 768px) {
   .main {
     .about {
-      margin-top: 100px;
-      .container {
-        height: 592px;
-        position: relative;
-      }
-      .item {
-        position: absolute;
-        width: 286px;
-        height: 286px;
-        background-color: pink;
-
-        &:nth-child(3) {
-          position: relative;
-          width: 592px;
-          height: 592px;
-          margin: 0 auto;
-        }
-
-        &:nth-child(1),
-        &:nth-child(2) {
-          left: 0;
-        }
-
-        &:nth-child(1),
-        &:nth-child(4) {
-          top: 0;
+      .cover {
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
         }
+      }
 
-        &:nth-child(4),
-        &:nth-child(5) {
-          right: 0;
-        }
+      .info {
+        width: 660px;
+        padding-top: 65px;
 
-        &:nth-child(2),
-        &:nth-child(5) {
-          bottom: 0;
+        .name {
+          font-size: 50px;
+          color: #b62d1a;
+          font-weight: bold;
         }
-
-        .cover {
-          width: 100%;
-          height: 100%;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
         }
-
-        &:hover {
-          .active {
-            opacity: 1;
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #b62d1a;
+          margin: 20px 0 30px;
+        }
+        .description {
+          text-align: justify;
+          word-break: break-all;
+          line-height: 36px;
+          p {
+            margin-top: 24px;
+            font-size: 20px;
           }
         }
+      }
+    }
 
-        .active {
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(0, 0, 0, 0.5);
-          text-align: center;
+    .difference {
+      .content {
+        .section {
           display: -webkit-box;
           display: -ms-flexbox;
           display: flex;
-          -webkit-box-pack: center;
-          -ms-flex-pack: center;
-          justify-content: center;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
           -webkit-box-align: center;
           -ms-flex-align: center;
           align-items: center;
-          -webkit-box-orient: vertical;
-          -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-          flex-direction: column;
-          -webkit-transition: all 0.4s;
-          transition: all 0.4s;
-          .title {
-            font-size: 24px;
-            color: #fff;
+          background-color: #eeeeee;
+          padding: 20px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin-top: 44px;
+
+          &:first-child {
+            margin-top: 0;
           }
-          .line {
-            width: 32px;
-            height: 2px;
-            background-color: #ffffff;
-            margin: 40px auto;
+
+          .cover {
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            img {
+              display: -webkit-box;
+              display: -ms-flexbox;
+              display: flex;
+              width: 450px;
+            }
           }
-          .detail {
-            font-size: 16px;
-            color: #fff;
-            line-height: 40px;
-            padding: 0 70px;
+
+          &:nth-child(2n-1) {
+            .info {
+              margin-left: 60px;
+              margin-right: 30px;
+            }
           }
-        }
-      }
-    }
 
-    .service {
-      margin-top: 140px;
+          &:nth-child(2n) {
+            .info {
+              margin-right: 60px;
+              margin-left: 30px;
+            }
+          }
 
-      .cover {
-        width: 568px;
-        height: 568px;
-        background: pink;
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
+          .info {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+
+            .title {
+              color: #b62d1a;
+              font-size: 37px;
+              font-weight: bold;
+            }
+            .description {
+              font-size: 27px;
+              color: #434343;
+              line-height: 38px;
+              margin-top: 38px;
+            }
+          }
         }
       }
+    }
 
-      &.one {
-        .content {
-          padding-top: 113px;
-          background-image: url(/img/service-title-bg-one.png);
-        }
-      }
+    .effect {
+      .content {
+        .section {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin-top: 24px;
 
-      &.two {
-        background: #f7f7f7;
-        margin-top: 319px;
+          &:first-child {
+            margin-top: 0;
+          }
 
-        .container {
-          position: relative;
           .cover {
-            position: absolute;
-            bottom: 76px;
-            left: 0;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            img {
+              display: -webkit-box;
+              display: -ms-flexbox;
+              display: flex;
+              width: 388px;
+            }
           }
 
-          .content {
-            padding-top: 173px;
-            height: 456px;
-            background-image: url(/img/service-title-bg-two.png);
-            background-position: left 60px;
+          .info {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            margin: 0 60px;
+
+            .title {
+              color: #b62d1a;
+              font-size: 34px;
+              font-weight: bold;
+            }
+            .description {
+              font-size: 27px;
+              color: #434343;
+              line-height: 40px;
+              margin-top: 38px;
+            }
           }
         }
       }
-
-      &.three {
-        .content {
-          padding-top: 113px;
-          background-image: url(/img/service-title-bg-three.png);
-        }
-      }
-
-      .content {
-        width: 560px;
-        text-align: justify;
-        background-repeat: no-repeat;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        .title {
-          font-size: 24px;
-          font-weight: bold;
-        }
-        .line {
-          width: 32px;
-          height: 3px;
-          background-color: #e8e8e8;
-          margin: 32px 0;
-        }
-
-        .text {
-          color: #999;
-        }
-
-        .lh40 {
-          line-height: 40px;
-        }
-      }
     }
   }
 }
@@ -180,179 +170,143 @@
 @media screen and (max-width: 768px) {
   .main {
     .about {
-      margin-top: 1.2rem;
-      .container {
-        width: 6.84rem;
-        margin: 0 auto;
-        height: 3.36rem;
-        position: relative;
-      }
-      .item {
-        position: absolute;
-        width: 1.64rem;
-        height: 1.64rem;
-
-        &:nth-child(3) {
-          position: relative;
-          width: 3.36rem;
-          height: 3.36rem;
-          margin: 0 auto;
-        }
-
-        &:nth-child(1),
-        &:nth-child(2) {
-          left: 0;
-        }
-
-        &:nth-child(1),
-        &:nth-child(4) {
-          top: 0;
-        }
-
-        &:nth-child(4),
-        &:nth-child(5) {
-          right: 0;
-        }
-
-        &:nth-child(2),
-        &:nth-child(5) {
-          bottom: 0;
-        }
-
+      .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
         .cover {
-          width: 100%;
-          height: 100%;
+          margin-top: 0.4rem;
           img {
             display: block;
-            width: 100%;
-            height: 100%;
+            width: 5.46rem;
+            height: 5.57rem;
           }
         }
 
-        .active {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(0, 0, 0, 0.5);
-          text-align: center;
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: flex;
-          -webkit-box-pack: center;
-          -ms-flex-pack: center;
-          justify-content: center;
-          -webkit-box-align: center;
-          -ms-flex-align: center;
-          align-items: center;
-          -webkit-box-orient: vertical;
-          -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-          flex-direction: column;
-          .title {
+        .info {
+          width: 6.5rem;
+          margin: 0 auto;
+          .name {
+            font-size: 0.34rem;
+            color: #b62d1a;
+            text-align: center;
+            font-weight: bold;
+          }
+          .subname {
             font-size: 0.26rem;
-            color: #fff;
+            margin-top: 0.16rem;
+            text-align: center;
           }
           .line {
-            width: 0.32rem;
-            height: 0.02rem;
-            background-color: #ffffff;
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #b62d1a;
             margin: 0.32rem auto;
           }
-          .detail {
-            font-size: 0.2rem;
-            color: #fff;
-            line-height: 0.4rem;
-            padding: 0 0.18rem;
+          .description {
+            text-align: justify;
+            word-break: break-all;
+            color: #333333;
+            text-align: center;
+            p {
+              font-size: 0.26rem;
+              line-height: 0.48rem;
+            }
           }
         }
       }
     }
 
-    .service {
-      margin-top: 1.2rem;
-
-      .container {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: reverse;
-        -ms-flex-direction: column-reverse;
-        flex-direction: column-reverse;
-      }
-
-      .cover {
-        width: 5.68rem;
-        height: 5.68rem;
-        float: unset !important;
-        margin-top: 0.4rem;
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-      }
+    .difference {
+      .content {
+        .section {
+          width: 6.86rem;
+          background-color: #eeeeee;
+          padding: 0.4rem 0.7rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin: 0 auto;
+          margin-top: 0.32rem;
 
-      &.one {
-        .content {
-          background-image: url(/img/service-title-bg-one.png);
-        }
-      }
+          &:first-child {
+            margin-top: 0;
+          }
 
-      &.two {
-        .content {
-          background-image: url(/img/service-title-bg-two.png);
-        }
-      }
+          .cover {
+            img {
+              display: block;
+              width: 4.5rem;
+              margin: 0 auto;
+            }
+          }
 
-      &.three {
-        .content {
-          background-image: url(/img/service-title-bg-three.png);
+          .info {
+            .title {
+              color: #b62d1a;
+              font-size: 0.3rem;
+              font-weight: bold;
+              margin: 0.4rem 0 0.32rem;
+              text-align: center;
+            }
+            .description {
+              font-size: 0.26rem;
+              color: #333;
+              line-height: 0.48rem;
+              text-align: center;
+            }
+          }
         }
       }
+    }
 
+    .effect {
       .content {
-        width: 5.68rem;
-        float: unset !important;
-        text-align: justify;
-        background-repeat: no-repeat;
-        background-position: center top;
-        background-size: auto 1.33rem;
-        padding-top: 1.1rem;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        text-align: center;
-
-        .title {
-          font-size: 0.34rem;
-          font-weight: bold;
-        }
-        .line {
-          width: 0.4rem;
-          height: 0.03rem;
-          background-color: #e8e8e8;
-          margin: 0.32rem auto;
-        }
+        .section {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: reverse;
+          -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          width: 5.98rem;
+          margin: 0 auto;
+          text-align: center;
+          margin-top: 0.8rem;
 
-        .text {
-          color: #999;
-          font-size: 0.26rem;
-        }
+          &:first-child {
+            margin-top: 0;
+          }
 
-        .lh40 {
-          line-height: 0.4rem;
-        }
+          .cover {
+            img {
+              width: 3.88rem;
+            }
+          }
 
-        ul > li {
-          font-size: 0.26rem;
+          .info {
+            .title {
+              color: #b62d1a;
+              font-size: 0.3rem;
+              font-weight: bold;
+              margin: 0.24rem 0 0.16rem;
+            }
+            .description {
+              font-size: 0.26rem;
+              color: #333;
+              line-height: 0.48rem;
+            }
+          }
         }
       }
     }