Начало Каталог Помощ
Вход
zhengjinyi
/
caimei-authentic-ross-static
2
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

移动端样式完成

yuwenjun1997 преди 2 години
родител
4826e6f1eb
ревизия
207769d756
променени са 67 файла, в които са добавени 14045 реда и са изтрити 7014 реда
Разделен изглед Покажи статистика за разликите
  1. 2 1
      .vscode/settings.json
  2. 71 46
      about.html
  3. 71 47
      appliance-1.html
  4. 71 47
      appliance-2.html
  5. 71 47
      appliance-3.html
  6. 71 47
      appliance-4.html
  7. 71 47
      appliance-5.html
  8. 71 47
      appliance-6.html
  9. 71 47
      appliance-7.html
  10. 69 44
      brand-detail.html
  11. 98 68
      brand-ross.html
  12. 69 44
      brand.html
  13. 69 44
      case.html
  14. 73 48
      contact-consult.html
  15. 73 48
      contact-join-form.html
  16. 69 45
      contact-join.html
  17. 69 44
      contact.html
  18. 79 55
      cooperative.html
  19. 645 329
      css/about.css
  20. 660 293
      css/about.scss
  21. 175 92
      css/appliance.css
  22. 158 74
      css/appliance.scss
  23. 619 281
      css/base.css
  24. 702 296
      css/base.scss
  25. 65 27
      css/brand-detail.css
  26. 70 26
      css/brand-detail.scss
  27. 757 424
      css/brand-ross.css
  28. 777 377
      css/brand-ross.scss
  29. 140 74
      css/brand.css
  30. 145 69
      css/brand.scss
  31. 107 56
      css/case.css
  32. 109 51
      css/case.scss
  33. 387 188
      css/contact-form.css
  34. 403 173
      css/contact-form.scss
  35. 458 232
      css/contact.css
  36. 481 216
      css/contact.scss
  37. 492 305
      css/cooperative.css
  38. 449 257
      css/cooperative.scss
  39. 711 385
      css/index.css
  40. 753 364
      css/index.scss
  41. 220 104
      css/news.css
  42. 221 93
      css/news.scss
  43. 247 105
      css/product-diactivplvs.css
  44. 251 91
      css/product-diactivplvs.scss
  45. 239 112
      css/product-intradermik.css
  46. 247 101
      css/product-intradermik.scss
  47. 171 77
      css/product-kestos.css
  48. 180 71
      css/product-kestos.scss
  49. 209 96
      css/product-mesobiolift.css
  50. 215 82
      css/product-mesobiolift.scss
  51. 297 144
      css/product-rollaction.css
  52. 307 123
      css/product-rollaction.scss
  53. BIN
      img/icon-menu-arrow-down.png
  54. BIN
      img/icon-menu-arrow-up.png
  55. BIN
      img/icon-menu-close.png
  56. BIN
      img/icon-menu.png
  57. BIN
      img/logo3.png
  58. 72 48
      index.html
  59. 68 0
      js/dist/main.dev.js
  60. 63 0
      js/main.js
  61. 69 44
      news-detail.html
  62. 70 45
      news.html
  63. 69 44
      product-diactivplvs.html
  64. 69 44
      product-intradermik.html
  65. 69 44
      product-kestos.html
  66. 122 97
      product-mesobiolift.html
  67. 69 44
      product-rollaction.html

+ 2 - 1
.vscode/settings.json
Целия файл 

@@ -1,4 +1,5 @@
 
 {
 
   "compile-hero.disable-compile-files-on-did-save-code": false,
 
-  "compile-hero.scss-output-directory": "./"
 
+  "compile-hero.scss-output-directory": "./",
 
+  "px-to-rem.px-per-rem": 100
 
 }

+ 71 - 46
about.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -68,10 +83,10 @@
 
           <div class="title">艾斯佰丽</div>
 
           <div class="description">
 
             艾斯佰丽主营来自西班牙备受美容养生界青睐的云智能体疗管理系统「BINARY PREMIUM」，是西班牙ROS'S BINARY
 
-            PREMIUM<br />
 
+            PREMIUM<br class="only-pc" />
 
             中国区总代理，拥有资深的健康专家团队，优质、专业的售后服务团队，为您提供全方位一站式体验和服务。
 
           </div>
 
-          <div class="content">
 
+          <div class="content scroll-box">
 
             <div class="item">
 
               <img src="/img/about-icon-01.png" alt="有成长" />
 
               <div class="tip">有成长</div>
 
@@ -234,8 +249,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -243,12 +266,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -259,7 +282,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -292,5 +315,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 71 - 47
appliance-1.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -144,8 +159,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -153,12 +176,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -169,7 +192,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -203,8 +226,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-2.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -156,8 +171,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -165,12 +188,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -181,7 +204,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -215,8 +238,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-3.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -137,8 +152,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -146,12 +169,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -162,7 +185,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -196,8 +219,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-4.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -140,8 +155,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -149,12 +172,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -165,7 +188,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -199,8 +222,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-5.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -143,8 +158,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -152,12 +175,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -168,7 +191,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -202,8 +225,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-6.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -136,8 +151,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -145,12 +168,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -161,7 +184,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -195,8 +218,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 71 - 47
appliance-7.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/appliance.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li class="active"><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -140,8 +155,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -149,12 +172,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -165,7 +188,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -199,8 +222,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 69 - 44
brand-detail.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <div class="container main">
 
@@ -79,8 +94,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -88,12 +111,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -104,7 +127,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -137,5 +160,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 98 - 68
brand-ross.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-ROSS介绍</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
-    <link rel="stylesheet" href="./libs/swiper/swiper.min.css" />
 
+    <link rel="stylesheet" href="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/brand-ross.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- 广告位 start-->
 
@@ -86,8 +101,11 @@
 
                 <div class="swiper-next"></div>
 
               </div>
 
             </div>
 
-            <div class="section fl">
 
+            <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">
 
@@ -96,6 +114,9 @@
 
                 </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>
 
@@ -110,7 +131,7 @@
 
       <div class="therapy wrapper">
 
         <div class="container">
 
           <div class="title">关于疗法</div>
 
-          <div class="content" id="therapy">
 
+          <div class="content scroll-box" id="therapy">
 
             <div class="item">
 
               <div class="cover">
 
                 <div class="tip">热透疗法</div>
 
@@ -238,7 +259,7 @@
 
                   <div class="num">01</div>
 
                   <div class="line"></div>
 
                   <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <a href="/appliance-1.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -246,10 +267,10 @@
 
               <img src="/img/brand-ross-app-02.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">01</div>
 
+                  <div class="num">02</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">减脂塑形</div>
 
+                  <a href="/appliance-2.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -257,10 +278,10 @@
 
               <img src="/img/brand-ross-app-03.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">02</div>
 
+                  <div class="num">03</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">肌肉抗衰</div>
 
+                  <a href="/appliance-3.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -268,10 +289,10 @@
 
               <img src="/img/brand-ross-app-04.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">03</div>
 
+                  <div class="num">04</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">运动损伤</div>
 
+                  <a href="/appliance-4.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -279,10 +300,10 @@
 
               <img src="/img/brand-ross-app-05.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">04</div>
 
+                  <div class="num">05</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">亚健康</div>
 
+                  <a href="/appliance-5.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -290,10 +311,10 @@
 
               <img src="/img/brand-ross-app-06.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">05</div>
 
+                  <div class="num">06</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">产后康复</div>
 
+                  <a href="/appliance-6.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -301,10 +322,10 @@
 
               <img src="/img/brand-ross-app-07.png" alt="" />
 
               <div class="active">
 
                 <div class="info">
 
-                  <div class="num">06</div>
 
+                  <div class="num">07</div>
 
                   <div class="line"></div>
 
-                  <div class="tip">美学缺陷</div>
 
-                  <div class="link">立即查看</div>
 
+                  <div class="tip">私密健康</div>
 
+                  <a href="/appliance-7.html" class="link">立即查看</a>
 
                 </div>
 
               </div>
 
             </div>
 
@@ -366,8 +387,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -375,12 +404,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -391,7 +420,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -425,8 +454,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       var mySwiper = new Swiper('#aboutSwiepr', {
 
         loop: true, // 循环模式选项

+ 69 - 44
brand.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -107,8 +122,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -116,12 +139,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -132,7 +155,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -165,5 +188,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 44
case.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li class="active"><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -110,8 +125,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="logo" /></div>
 
+          <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>
 
@@ -119,12 +142,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -135,7 +158,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -168,5 +191,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 73 - 48
contact-consult.html
Целия файл 

@@ -3,58 +3,73 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/contact.css" />
 
     <link rel="stylesheet" href="/css/contact-form.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li class="active">
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -121,9 +136,10 @@
 
               </div>
 
               <div class="form-item">
 
                 <div class="form-control select-group">
 
+                  <div class="form-label only-mobile">意向品牌：</div>
 
                   <div class="select">
 
                     <select>
 
-                      <option>意向品牌</option>
 
+                      <option>请选择意向品牌</option>
 
                     </select>
 
                   </div>
 
                 </div>
 
@@ -146,8 +162,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -155,12 +179,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -171,7 +195,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -205,8 +229,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.contact-join-cell').click(function () {

+ 73 - 48
contact-join-form.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -12,48 +12,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li class="active">
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -74,7 +89,7 @@
 
         </div>
 
         <div class="cover"><img src="/img/contact-img2.png" alt="" /></div>
 
 
-        <div class="content form">
 
+        <div class="content join-form form">
 
           <form method="post">
 
             <!-- 表单信息 -->
 
             <div class="form-title">
 
@@ -93,21 +108,21 @@
 
                 <input type="text" placeholder="" required />
 
               </div>
 
             </div>
 
-            <div class="form-item">
 
+            <div class="form-item inline">
 
               <div class="form-label"><em>*</em>性别：</div>
 
               <div class="form-control radio">
 
                 <label for="man"><input type="radio" name="sex" id="man" required checked />男</label>
 
                 <label for="woman"><input type="radio" name="sex" id="woman" required />女</label>
 
               </div>
 
             </div>
 
-            <div class="form-item">
 
+            <div class="form-item inline">
 
               <div class="form-label"><em>*</em>婚姻状况：</div>
 
               <div class="form-control radio">
 
                 <label for="unmarried"><input type="radio" name="married" id="unmarried" required checked />未婚</label>
 
                 <label for="married"><input type="radio" name="married" id="married" required />已婚</label>
 
               </div>
 
             </div>
 
-            <div class="form-item">
 
+            <div class="form-item inline">
 
               <div class="form-label"><em>*</em>上传照片：</div>
 
               <div class="form-control upload-image">
 
                 <input type="file" />
 
@@ -238,8 +253,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -247,12 +270,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -263,7 +286,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -296,5 +319,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 45
contact-join.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li class="active">
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -114,8 +129,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -123,12 +146,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -139,7 +162,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -173,7 +196,8 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         jobListCollapseStart()

+ 69 - 44
contact.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -13,48 +13,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li class="active">
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -98,8 +113,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -107,12 +130,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -123,7 +146,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -156,6 +179,8 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
 
     <script>
 
       window.onload = function () {

+ 79 - 55
cooperative.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/cooperative.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li class="active"><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -90,12 +105,12 @@
 
       <div class="cooperative-main">
 
         <div class="container" id="cooperative-main">
 
           <!-- 品牌实力 -->
 
-          <div class="cooperative-main-item select">
 
+          <div class="cooperative-main-item select clearfix">
 
             <div class="main-title">
 
               <img src="/img/cooperative_title01@2x.png" alt="" />
 
               <p>品牌实力</p>
 
             </div>
 
-            <div class="main-content">
 
+            <div class="main-content clearfix">
 
               <div class="main-content-item">
 
                 <div class="item first">
 
                   <img src="/img/cooperative_brand_1@2x.png" alt="" />
 
@@ -174,7 +189,7 @@
 
               <p>服务模式</p>
 
             </div>
 
             <div class="main-content">
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_1@2x.png" alt="" />
 
                 </div>
 
@@ -185,7 +200,7 @@
 
                   </p>
 
                 </div>
 
               </div>
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_2@2x.png" alt="" />
 
                 </div>
 
@@ -197,7 +212,7 @@
 
                   </p>
 
                 </div>
 
               </div>
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_3@2x.png" alt="" />
 
                 </div>
 
@@ -208,7 +223,7 @@
 
                   </p>
 
                 </div>
 
               </div>
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_4@2x.png" alt="" />
 
                 </div>
 
@@ -220,7 +235,7 @@
 
                   </p>
 
                 </div>
 
               </div>
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_5@2x.png" alt="" />
 
                 </div>
 
@@ -231,7 +246,7 @@
 
                   </p>
 
                 </div>
 
               </div>
 
-              <div class="main-content-mode">
 
+              <div class="main-content-mode clearfix">
 
                 <div class="mode-label">
 
                   <img src="/img/cooperative_mode_6@2x.png" alt="" />
 
                 </div>
 
@@ -253,8 +268,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -262,12 +285,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -278,7 +301,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -312,8 +335,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       $(function () {
 
         $('.cooperative-tab .tab-item').click(function () {

+ 645 - 329
css/about.css
Целия файл 

@@ -1,334 +1,650 @@
 
-.main .about {
 
-  padding: 120px 0;
 
-  background: #fff;
 
-}
 
-.main .about .title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-  margin-bottom: 32px;
 
-}
 
-.main .about .description {
 
-  font-size: 16px;
 
-  color: #505050;
 
-  text-align: center;
 
-  line-height: 32px;
 
-}
 
-.main .about .content {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: justify;
 
-  -ms-flex-pack: justify;
 
-  justify-content: space-between;
 
-  margin-top: 80px;
 
-}
 
-.main .about .content .item {
 
-  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;
 
-  width: 380px;
 
-  height: 387px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  border: 1px solid #e8e8e8;
 
-  padding: 40px 30px;
 
-}
 
-.main .about .content .item img {
 
-  display: block;
 
-  width: 72px;
 
-  height: 72px;
 
-  margin-top: 20px;
 
-}
 
-.main .about .content .item .tip {
 
-  font-size: 18px;
 
-  color: #505050;
 
-  font-weight: bold;
 
-  margin-top: 32px;
 
-}
 
-.main .about .content .item .desc {
 
-  margin-top: 32px;
 
-  font-size: 16px;
 
-  color: #505050;
 
-  line-height: 32px;
 
-  text-align: center;
 
-}
 
-.main .profile {
 
-  background: #f7f7f7;
 
-  padding: 60px 0;
 
-}
 
-.main .profile .cover {
 
-  width: 470px;
 
-  height: 479px;
 
-  overflow: hidden;
 
-  background-color: pink;
 
-}
 
-.main .profile .cover img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.main .profile .content {
 
-  width: 672px;
 
-  margin-left: 50px;
 
-}
 
-.main .profile .content .title {
 
-  font-size: 34px;
 
-}
 
-.main .profile .content .subtitle {
 
-  font-size: 34px;
 
-  color: #0688d2;
 
-  margin: 40px 0 16px;
 
-}
 
-.main .profile .content .subtitle span {
 
-  font-size: 24px;
 
-  color: #272727;
 
-  margin-left: 12px;
 
-}
 
-.main .profile .content .tags {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-align: center;
 
-  -ms-flex-align: center;
 
-  align-items: center;
 
-  font-size: 0;
 
-}
 
-.main .profile .content .tags span {
 
-  font-size: 16px;
 
-}
 
-.main .profile .content .tags i {
 
-  display: block;
 
-  height: 12px;
 
-  width: 1px;
 
-  background: #505050;
 
-  margin: 0 24px;
 
-}
 
-.main .profile .content .line {
 
-  width: 100%;
 
-  height: 1px;
 
-  background: #e8e8e8;
 
-  position: relative;
 
-  margin: 20px 0 40px;
 
-}
 
-.main .profile .content .line::before {
 
-  content: "";
 
-  display: block;
 
-  width: 24px;
 
-  height: 2px;
 
-  background: #0688d2;
 
-  position: absolute;
 
-  left: 0;
 
-  bottom: 0;
 
-}
 
-.main .profile .content .description {
 
-  font-size: 16px;
 
-  color: #999;
 
-  line-height: 32px;
 
-  text-align: justify;
 
-}
 
-.main .team {
 
-  padding: 120px 0;
 
-  background: #fff;
 
-}
 
-.main .team .title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-}
 
-.main .team .content {
 
-  margin-top: 80px;
 
-}
 
-.main .team .content .item {
 
-  width: 388px;
 
-  height: 340px;
 
-  float: left;
 
-  margin-right: 17px;
 
-  margin-top: 18px;
 
-  overflow: hidden;
 
-}
 
-.main .team .content .item:first-child {
 
-  position: relative;
 
-  background: #eff9ff;
 
-  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;
 
-}
 
-.main .team .content .item:first-child .cover {
 
-  width: 160px;
 
-}
 
-.main .team .content .item:first-child .cover .line {
 
-  width: 18px;
 
-  height: 3px;
 
-  background: #0688d2;
 
-  margin: 18px 0 24px;
 
-}
 
-.main .team .content .item:first-child .cover .tip {
 
-  font-size: 34px;
 
-}
 
-.main .team .content .item:first-child .cover .desc {
 
-  font-size: 16px;
 
-  color: #999;
 
-}
 
-.main .team .content .item:nth-child(-n+3) {
 
-  margin-top: 0;
 
-}
 
-.main .team .content .item:nth-child(3), .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(8), .main .team .content .item:nth-child(10) {
 
-  margin-right: 0;
 
-}
 
-.main .team .content .item:nth-child(5), .main .team .content .item:nth-child(9) {
 
-  width: 795px;
 
-}
 
-.main .team .content .item img {
 
-  display: block;
 
-  width: 100%;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .team .content .item:hover img {
 
-  -webkit-transform: scale(1.2);
 
-  transform: scale(1.2);
 
-}
 
-.main .development {
 
-  padding: 100px 0;
 
-  background: #f7f7f7;
 
-}
 
-.main .development .title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-}
 
-.main .development .content {
 
-  position: relative;
 
-  margin-top: 80px;
 
-  width: 2px;
 
-  margin: 0 auto;
 
-  background: #e8e8e8;
 
-}
 
-.main .development .content .item {
 
-  position: relative;
 
-  width: 2px;
 
-  margin-top: 60px;
 
-}
 
-.main .development .content .item::before {
 
-  content: "";
 
-  position: absolute;
 
-  width: 10px;
 
-  height: 10px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  border: 1px solid #999999;
 
-  background: #fff;
 
-  border-radius: 50%;
 
-  left: -4px;
 
-  z-index: 5;
 
-  top: 32px;
 
-}
 
-.main .development .content .item:last-child::before {
 
-  background: #0688d2;
 
-  border-color: #fff;
 
-}
 
-.main .development .content .item:last-child .time {
 
-  border: 1px solid #0688d2;
 
-  border-left: 0;
 
-  color: #0688d2;
 
-}
 
-.main .development .content .item:last-child .node {
 
-  background: #0688d2;
 
-}
 
-.main .development .content .item:last-child .node dt,
 
+@media screen and (min-width: 768px) {
 
+  .main .about {
 
+    padding: 120px 0;
 
+    background: #fff;
 
+  }
 
+  .main .about .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+    margin-bottom: 32px;
 
+  }
 
+  .main .about .description {
 
+    font-size: 16px;
 
+    color: #505050;
 
+    text-align: center;
 
+    line-height: 32px;
 
+  }
 
+  .main .about .content {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+    margin-top: 80px;
 
+  }
 
+  .main .about .content .item {
 
+    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;
 
+    width: 380px;
 
+    height: 387px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #e8e8e8;
 
+    padding: 40px 30px;
 
+  }
 
+  .main .about .content .item img {
 
+    display: block;
 
+    width: 72px;
 
+    height: 72px;
 
+    margin-top: 20px;
 
+  }
 
+  .main .about .content .item .tip {
 
+    font-size: 18px;
 
+    color: #505050;
 
+    font-weight: bold;
 
+    margin-top: 32px;
 
+  }
 
+  .main .about .content .item .desc {
 
+    margin-top: 32px;
 
+    font-size: 16px;
 
+    color: #505050;
 
+    line-height: 32px;
 
+    text-align: center;
 
+  }
 
+  .main .profile {
 
+    background: #f7f7f7;
 
+    padding: 60px 0;
 
+  }
 
+  .main .profile .cover {
 
+    width: 470px;
 
+    height: 479px;
 
+    overflow: hidden;
 
+    background-color: pink;
 
+  }
 
+  .main .profile .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .profile .content {
 
+    width: 672px;
 
+    margin-left: 50px;
 
+  }
 
+  .main .profile .content .title {
 
+    font-size: 34px;
 
+  }
 
+  .main .profile .content .subtitle {
 
+    font-size: 34px;
 
+    color: #0688d2;
 
+    margin: 40px 0 16px;
 
+  }
 
+  .main .profile .content .subtitle span {
 
+    font-size: 24px;
 
+    color: #272727;
 
+    margin-left: 12px;
 
+  }
 
+  .main .profile .content .tags {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    font-size: 0;
 
+  }
 
+  .main .profile .content .tags span {
 
+    font-size: 16px;
 
+  }
 
+  .main .profile .content .tags i {
 
+    display: block;
 
+    height: 12px;
 
+    width: 1px;
 
+    background: #505050;
 
+    margin: 0 24px;
 
+  }
 
+  .main .profile .content .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    background: #e8e8e8;
 
+    position: relative;
 
+    margin: 20px 0 40px;
 
+  }
 
+  .main .profile .content .line::before {
 
+    content: "";
 
+    display: block;
 
+    width: 24px;
 
+    height: 2px;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 0;
 
+    bottom: 0;
 
+  }
 
+  .main .profile .content .description {
 
+    font-size: 16px;
 
+    color: #999;
 
+    line-height: 32px;
 
+    text-align: justify;
 
+  }
 
+  .main .team {
 
+    padding: 120px 0;
 
+    background: #fff;
 
+  }
 
+  .main .team .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+  }
 
+  .main .team .content {
 
+    margin-top: 80px;
 
+  }
 
+  .main .team .content .item {
 
+    width: 388px;
 
+    height: 340px;
 
+    float: left;
 
+    margin-right: 17px;
 
+    margin-top: 18px;
 
+    overflow: hidden;
 
+  }
 
+  .main .team .content .item:first-child {
 
+    position: relative;
 
+    background: #eff9ff;
 
+    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;
 
+  }
 
+  .main .team .content .item:first-child .cover {
 
+    width: 160px;
 
+  }
 
+  .main .team .content .item:first-child .cover .line {
 
+    width: 18px;
 
+    height: 3px;
 
+    background: #0688d2;
 
+    margin: 18px 0 24px;
 
+  }
 
+  .main .team .content .item:first-child .cover .tip {
 
+    font-size: 34px;
 
+  }
 
+  .main .team .content .item:first-child .cover .desc {
 
+    font-size: 16px;
 
+    color: #999;
 
+  }
 
+  .main .team .content .item:nth-child(-n+3) {
 
+    margin-top: 0;
 
+  }
 
+  .main .team .content .item:nth-child(3), .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(8), .main .team .content .item:nth-child(10) {
 
+    margin-right: 0;
 
+  }
 
+  .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(9) {
 
+    width: 795px;
 
+  }
 
+  .main .team .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .team .content .item:hover img {
 
+    -webkit-transform: scale(1.2);
 
+    transform: scale(1.2);
 
+  }
 
+  .main .development {
 
+    padding: 100px 0;
 
+    background: #f7f7f7;
 
+  }
 
+  .main .development .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+  }
 
+  .main .development .content {
 
+    position: relative;
 
+    margin-top: 80px;
 
+    width: 2px;
 
+    margin: 0 auto;
 
+    background: #e8e8e8;
 
+  }
 
+  .main .development .content .item {
 
+    position: relative;
 
+    width: 2px;
 
+    margin-top: 60px;
 
+  }
 
+  .main .development .content .item::before {
 
+    content: "";
 
+    position: absolute;
 
+    width: 10px;
 
+    height: 10px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #999999;
 
+    background: #fff;
 
+    border-radius: 50%;
 
+    left: -4px;
 
+    z-index: 5;
 
+    top: 32px;
 
+  }
 
+  .main .development .content .item:last-child::before {
 
+    background: #0688d2;
 
+    border-color: #fff;
 
+  }
 
+  .main .development .content .item:last-child .time {
 
+    border: 1px solid #0688d2;
 
+    border-left: 0;
 
+    color: #0688d2;
 
+  }
 
+  .main .development .content .item:last-child .node {
 
+    background: #0688d2;
 
+  }
 
+  .main .development .content .item:last-child .node dt,
 
 .main .development .content .item:last-child .node .tip,
 
 .main .development .content .item:last-child .node .subtip {
 
-  color: #ffffff;
 
-}
 
-.main .development .content .item.with-time-left .time {
 
-  position: absolute;
 
-  left: -16px;
 
-  top: 0;
 
-  -webkit-transform: translateX(-100%);
 
-  transform: translateX(-100%);
 
-}
 
-.main .development .content .item.with-time-left .node {
 
-  padding-left: 44px;
 
-  margin-left: -16px;
 
-}
 
-.main .development .content .item.with-time-right .time {
 
-  position: absolute;
 
-  top: 0;
 
-  left: 16px;
 
-}
 
-.main .development .content .item.with-time-right .node {
 
-  position: relative;
 
-  -webkit-transform: translate(-100%);
 
-  transform: translate(-100%);
 
-  text-align: right;
 
-  padding-right: 44px;
 
-  right: -16px;
 
-}
 
-.main .development .content .item .time {
 
-  font-size: 34px;
 
-  color: #505050;
 
-  white-space: nowrap;
 
-  padding: 20px 24px;
 
-  height: 100%;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .development .content .item .time span {
 
-  font-size: 14px;
 
-  margin-left: 10px;
 
-}
 
-.main .development .content .item .node {
 
-  width: 526px;
 
-  margin: 0;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 20px 24px;
 
-}
 
-.main .development .content .item .node dd,
 
+    color: #ffffff;
 
+  }
 
+  .main .development .content .item.with-time-left .time {
 
+    position: absolute;
 
+    left: -16px;
 
+    top: 0;
 
+    -webkit-transform: translateX(-100%);
 
+    transform: translateX(-100%);
 
+  }
 
+  .main .development .content .item.with-time-left .node {
 
+    padding-left: 44px;
 
+    margin-left: -16px;
 
+  }
 
+  .main .development .content .item.with-time-right .time {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 16px;
 
+  }
 
+  .main .development .content .item.with-time-right .node {
 
+    position: relative;
 
+    -webkit-transform: translate(-100%);
 
+    transform: translate(-100%);
 
+    text-align: right;
 
+    padding-right: 44px;
 
+    right: -16px;
 
+  }
 
+  .main .development .content .item .time {
 
+    font-size: 34px;
 
+    color: #505050;
 
+    white-space: nowrap;
 
+    padding: 20px 24px;
 
+    height: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .development .content .item .time span {
 
+    font-size: 14px;
 
+    margin-left: 10px;
 
+  }
 
+  .main .development .content .item .node {
 
+    width: 526px;
 
+    margin: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 20px 24px;
 
+  }
 
+  .main .development .content .item .node dd,
 
 .main .development .content .item .node dt {
 
-  margin-left: 0;
 
-}
 
+    margin-left: 0;
 
+  }
 
+  .main .development .content .item .node dt {
 
+    font-size: 34px;
 
+    color: #505050;
 
+  }
 
+  .main .development .content .item .node dd {
 
+    font-size: 14px;
 
+    color: #505050;
 
+    margin-top: 24px;
 
+  }
 
+  .main .development .content .item .node dd .tip {
 
+    margin-bottom: 8px;
 
+  }
 
+  .main .honor {
 
+    padding: 120px 0;
 
+    padding-bottom: 0;
 
+    background: #fff;
 
+  }
 
+  .main .honor .title {
 
+    font-size: 32px;
 
+    text-align: center;
 
+  }
 
+  .main .honor .content {
 
+    margin-top: 80px;
 
+  }
 
+  .main .honor .content .item {
 
+    width: 288px;
 
+    height: 330px;
 
+    float: left;
 
+    margin-right: 15px;
 
+  }
 
+  .main .honor .content .item:nth-child(4n) {
 
+    margin-right: 0;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main .about {
 
+    padding: 1.2rem 0;
 
+    background: #fff;
 
+  }
 
+  .main .about .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+    margin-bottom: 0.4rem;
 
+  }
 
+  .main .about .description {
 
+    width: 6.24rem;
 
+    margin: 0 auto;
 
+    font-size: 0.26rem;
 
+    color: #505050;
 
+    text-align: center;
 
+    line-height: 0.48rem;
 
+    word-break: break-all;
 
+  }
 
+  .main .about .content {
 
+    margin-top: 0.4rem;
 
+    padding-bottom: 0.24rem;
 
+  }
 
+  .main .about .content::-webkit-scrollbar {
 
+    width: 2px;
 
+    height: 2px;
 
+    background-color: #f5f5f5;
 
+  }
 
+  .main .about .content::-webkit-scrollbar-thumb {
 
+    border-radius: 2px;
 
+    background-color: #cccecf;
 
+  }
 
+  .main .about .content .item {
 
+    display: inline-block;
 
+    width: 5.96rem;
 
+    height: 5.62rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #e8e8e8;
 
+    padding: 0 0.3rem 0.4rem;
 
+    margin-left: 0.32rem;
 
+    vertical-align: top;
 
+  }
 
+  .main .about .content .item:last-child {
 
+    margin-right: 0.32rem;
 
+  }
 
+  .main .about .content .item img {
 
+    display: block;
 
+    width: 1.4rem;
 
+    height: 1.4rem;
 
+    margin: 0.5rem auto 0;
 
+  }
 
+  .main .about .content .item .tip {
 
+    font-size: 0.3rem;
 
+    color: #505050;
 
+    font-weight: bold;
 
+    margin-top: 0.4rem;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .item .desc {
 
+    margin-top: 0.32rem;
 
+    font-size: 0.26rem;
 
+    color: #505050;
 
+    line-height: 0.48rem;
 
+    text-align: center;
 
+    white-space: initial;
 
+  }
 
+  .main .profile {
 
+    background: #f7f7f7;
 
+    padding: 0.8rem 0 6.98rem;
 
+    position: relative;
 
+  }
 
+  .main .profile .cover {
 
+    position: absolute;
 
+    width: 5.46rem;
 
+    height: 5.46rem;
 
+    overflow: hidden;
 
+    bottom: 0.7rem;
 
+    left: 50%;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+  }
 
+  .main .profile .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .profile .content {
 
+    width: 5.52rem;
 
+    margin-left: 50px;
 
+  }
 
+  .main .profile .content .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+  }
 
+  .main .profile .content .subtitle {
 
+    font-size: 0.34rem;
 
+    color: #0688d2;
 
+    text-align: center;
 
+    margin-top: 0.2rem;
 
+  }
 
+  .main .profile .content .subtitle span {
 
+    font-size: 0.24rem;
 
+    color: #272727;
 
+    margin-left: 12px;
 
+  }
 
+  .main .profile .content .tags {
 
+    font-size: 0;
 
+    text-align: center;
 
+  }
 
+  .main .profile .content .tags span {
 
+    display: block;
 
+    font-size: 0.26rem;
 
+    margin-top: 0.16rem;
 
+  }
 
+  .main .profile .content .tags i {
 
+    display: block;
 
+  }
 
+  .main .profile .content .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    background: #e8e8e8;
 
+    position: relative;
 
+    margin: 0.48rem 0;
 
+  }
 
+  .main .profile .content .description {
 
+    font-size: 0.24rem;
 
+    color: #999;
 
+    line-height: 0.48rem;
 
+    text-align: center;
 
+  }
 
+  .main .team {
 
+    padding: 1.2rem 0;
 
+    background: #fff;
 
+    padding-left: 0.32rem;
 
+  }
 
+  .main .team .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+  }
 
+  .main .team .content {
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .team .content .item {
 
+    width: 2.2rem;
 
+    height: 1.94rem;
 
+    float: left;
 
+    margin-right: 0.12rem;
 
+    margin-top: 0.12rem;
 
+    overflow: hidden;
 
+  }
 
+  .main .team .content .item:first-child {
 
+    position: relative;
 
+    background: #eff9ff;
 
+    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;
 
+  }
 
+  .main .team .content .item:first-child .cover {
 
+    width: 1.8rem;
 
+  }
 
+  .main .team .content .item:first-child .cover .line {
 
+    width: 0.16rem;
 
+    height: 0.03rem;
 
+    background: #0688d2;
 
+    margin: 0.24rem 0;
 
+  }
 
+  .main .team .content .item:first-child .cover .tip {
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .team .content .item:first-child .cover .desc {
 
+    font-size: 0.18rem;
 
+    color: #999;
 
+  }
 
+  .main .team .content .item:nth-child(-n+3) {
 
+    margin-top: 0;
 
+  }
 
+  .main .team .content .item:nth-child(3), .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(8), .main .team .content .item:nth-child(10) {
 
+    margin-right: 0;
 
+  }
 
+  .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(9) {
 
+    width: 4.52rem;
 
+  }
 
+  .main .team .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .development {
 
+    padding: 0.8rem 0;
 
+    background: #f7f7f7;
 
+  }
 
+  .main .development .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+  }
 
+  .main .development .content {
 
+    position: relative;
 
+    margin-top: 0.8rem;
 
+    width: 0.02rem;
 
+    margin: 0 auto;
 
+    background: #e8e8e8;
 
+  }
 
+  .main .development .content .item {
 
+    position: relative;
 
+    width: 2px;
 
+    margin-top: 0.6rem;
 
+  }
 
+  .main .development .content .item::before {
 
+    content: "";
 
+    position: absolute;
 
+    width: 0.12rem;
 
+    height: 0.12rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 0.01rem solid #999999;
 
+    background: #fff;
 
+    border-radius: 50%;
 
+    left: -0.04rem;
 
+    z-index: 5;
 
+  }
 
+  .main .development .content .item.with-time-left .time {
 
+    position: absolute;
 
+    top: 0;
 
+    -webkit-transform: translateX(-100%);
 
+    transform: translateX(-100%);
 
+    left: -0.3rem;
 
+  }
 
+  .main .development .content .item.with-time-left .node {
 
+    margin-left: 0.3rem;
 
+  }
 
+  .main .development .content .item.with-time-right .time {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0.3rem;
 
+  }
 
+  .main .development .content .item.with-time-right .node {
 
+    position: relative;
 
+    -webkit-transform: translate(-100%);
 
+    transform: translate(-100%);
 
+    text-align: right;
 
+    margin-left: -0.3rem;
 
+  }
 
+  .main .development .content .item .time {
 
+    font-size: 0.26rem;
 
+    color: #505050;
 
+    white-space: nowrap;
 
+    height: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .development .content .item .time span {
 
+    font-size: 0.2rem;
 
+    margin-left: 0.1rem;
 
+  }
 
+  .main .development .content .item .node {
 
+    width: 3rem;
 
+    margin: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .development .content .item .node dd,
 
 .main .development .content .item .node dt {
 
-  font-size: 34px;
 
-  color: #505050;
 
-}
 
-.main .development .content .item .node dd {
 
-  font-size: 14px;
 
-  color: #505050;
 
-  margin-top: 24px;
 
-}
 
-.main .development .content .item .node dd .tip {
 
-  margin-bottom: 8px;
 
-}
 
-.main .honor {
 
-  padding: 120px 0;
 
-  padding-bottom: 0;
 
-  background: #fff;
 
-}
 
-.main .honor .title {
 
-  font-size: 32px;
 
-  text-align: center;
 
-}
 
-.main .honor .content {
 
-  margin-top: 80px;
 
-}
 
-.main .honor .content .item {
 
-  width: 288px;
 
-  height: 330px;
 
-  float: left;
 
-  margin-right: 15px;
 
-}
 
-.main .honor .content .item:nth-child(4n) {
 
-  margin-right: 0;
 
+    margin-left: 0;
 
+  }
 
+  .main .development .content .item .node dt {
 
+    font-size: 0.26rem;
 
+    color: #505050;
 
+  }
 
+  .main .development .content .item .node dd {
 
+    font-size: 0.2rem;
 
+    color: #505050;
 
+    margin-top: 0.16rem;
 
+    line-height: 1.2;
 
+  }
 
+  .main .development .content .item .node dd .subtip {
 
+    margin-top: 0.04rem;
 
+  }
 
+  .main .honor {
 
+    padding: 1.2rem 0;
 
+    padding-bottom: 0;
 
+    background: #fff;
 
+    padding-left: 0.32rem;
 
+  }
 
+  .main .honor .title {
 
+    font-size: 32px;
 
+    text-align: center;
 
+  }
 
+  .main .honor .content {
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main .honor .content .item {
 
+    width: 2.2rem;
 
+    height: 3.52rem;
 
+    float: left;
 
+    margin-right: 0.13rem;
 
+    margin-bottom: 0.13rem;
 
+  }
 
+  .main .honor .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .honor .content .item:nth-child(3n) {
 
+    margin-right: 0;
 
+  }
 
 }

+ 660 - 293
css/about.scss
Целия файл 

@@ -1,391 +1,758 @@
 
-.main {
 
-  .about {
 
-    padding: 120px 0;
 
-    background: #fff;
 
-    .title {
 
-      font-size: 34px;
 
-      text-align: center;
 
-      margin-bottom: 32px;
 
-    }
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    .about {
 
+      padding: 120px 0;
 
+      background: #fff;
 
+      .title {
 
+        font-size: 34px;
 
+        text-align: center;
 
+        margin-bottom: 32px;
 
+      }
 
 
-    .description {
 
-      font-size: 16px;
 
-      color: #505050;
 
-      text-align: center;
 
-      line-height: 32px;
 
-    }
 
+      .description {
 
+        font-size: 16px;
 
+        color: #505050;
 
+        text-align: center;
 
+        line-height: 32px;
 
+      }
 
 
-    .content {
 
-      display: -webkit-box;
 
-      display: -ms-flexbox;
 
-      display: flex;
 
-      -webkit-box-pack: justify;
 
-      -ms-flex-pack: justify;
 
-      justify-content: space-between;
 
-      margin-top: 80px;
 
-      .item {
 
+      .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-align: center;
 
-        -ms-flex-align: center;
 
-        align-items: center;
 
-        width: 380px;
 
-        height: 387px;
 
-        -webkit-box-sizing: border-box;
 
-        box-sizing: border-box;
 
-        border: 1px solid #e8e8e8;
 
-        padding: 40px 30px;
 
+        -webkit-box-pack: justify;
 
+        -ms-flex-pack: justify;
 
+        justify-content: space-between;
 
+        margin-top: 80px;
 
+        .item {
 
+          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;
 
+          width: 380px;
 
+          height: 387px;
 
+          -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+          border: 1px solid #e8e8e8;
 
+          padding: 40px 30px;
 
 
+          img {
 
+            display: block;
 
+            width: 72px;
 
+            height: 72px;
 
+            margin-top: 20px;
 
+          }
 
+
 
+          .tip {
 
+            font-size: 18px;
 
+            color: #505050;
 
+            font-weight: bold;
 
+            margin-top: 32px;
 
+          }
 
+
 
+          .desc {
 
+            margin-top: 32px;
 
+            font-size: 16px;
 
+            color: #505050;
 
+            line-height: 32px;
 
+            text-align: center;
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .profile {
 
+      background: #f7f7f7;
 
+      padding: 60px 0;
 
+      .cover {
 
+        width: 470px;
 
+        height: 479px;
 
+        overflow: hidden;
 
+        background-color: pink;
 
         img {
 
           display: block;
 
-          width: 72px;
 
-          height: 72px;
 
-          margin-top: 20px;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
+      }
 
+      .content {
 
+        width: 672px;
 
+        margin-left: 50px;
 
+
 
+        .title {
 
+          font-size: 34px;
 
         }
 
+        .subtitle {
 
+          font-size: 34px;
 
+          color: #0688d2;
 
+          margin: 40px 0 16px;
 
 
-        .tip {
 
-          font-size: 18px;
 
-          color: #505050;
 
-          font-weight: bold;
 
-          margin-top: 32px;
 
+          span {
 
+            font-size: 24px;
 
+            color: #272727;
 
+            margin-left: 12px;
 
+          }
 
         }
 
+        .tags {
 
+          display: -webkit-box;
 
+          display: -ms-flexbox;
 
+          display: flex;
 
+          -webkit-box-align: center;
 
+          -ms-flex-align: center;
 
+          align-items: center;
 
+          font-size: 0;
 
+
 
+          span {
 
+            font-size: 16px;
 
+          }
 
 
-        .desc {
 
-          margin-top: 32px;
 
+          i {
 
+            display: block;
 
+            height: 12px;
 
+            width: 1px;
 
+            background: #505050;
 
+            margin: 0 24px;
 
+          }
 
+        }
 
+        .line {
 
+          width: 100%;
 
+          height: 1px;
 
+          background: #e8e8e8;
 
+          position: relative;
 
+          margin: 20px 0 40px;
 
+          &::before {
 
+            content: '';
 
+            display: block;
 
+            width: 24px;
 
+            height: 2px;
 
+            background: #0688d2;
 
+            position: absolute;
 
+            left: 0;
 
+            bottom: 0;
 
+          }
 
+        }
 
+        .description {
 
           font-size: 16px;
 
-          color: #505050;
 
+          color: #999;
 
           line-height: 32px;
 
-          text-align: center;
 
+          text-align: justify;
 
         }
 
       }
 
     }
 
-  }
 
 
-  .profile {
 
-    background: #f7f7f7;
 
-    padding: 60px 0;
 
-    .cover {
 
-      width: 470px;
 
-      height: 479px;
 
-      overflow: hidden;
 
-      background-color: pink;
 
-      img {
 
-        display: block;
 
-        width: 100%;
 
-        height: 100%;
 
-      }
 
-    }
 
-    .content {
 
-      width: 672px;
 
-      margin-left: 50px;
 
+    .team {
 
+      padding: 120px 0;
 
+      background: #fff;
 
 
       .title {
 
         font-size: 34px;
 
+        text-align: center;
 
       }
 
-      .subtitle {
 
-        font-size: 34px;
 
-        color: #0688d2;
 
-        margin: 40px 0 16px;
 
 
-        span {
 
-          font-size: 24px;
 
-          color: #272727;
 
-          margin-left: 12px;
 
-        }
 
-      }
 
-      .tags {
 
-        display: -webkit-box;
 
-        display: -ms-flexbox;
 
-        display: flex;
 
-        -webkit-box-align: center;
 
-        -ms-flex-align: center;
 
-        align-items: center;
 
-        font-size: 0;
 
+      .content {
 
+        margin-top: 80px;
 
 
-        span {
 
-          font-size: 16px;
 
-        }
 
+        .item {
 
+          width: 388px;
 
+          height: 340px;
 
+          float: left;
 
+          margin-right: 17px;
 
+          margin-top: 18px;
 
+          overflow: hidden;
 
 
-        i {
 
-          display: block;
 
-          height: 12px;
 
-          width: 1px;
 
-          background: #505050;
 
-          margin: 0 24px;
 
-        }
 
-      }
 
-      .line {
 
-        width: 100%;
 
-        height: 1px;
 
-        background: #e8e8e8;
 
-        position: relative;
 
-        margin: 20px 0 40px;
 
-        &::before {
 
-          content: '';
 
-          display: block;
 
-          width: 24px;
 
-          height: 2px;
 
-          background: #0688d2;
 
-          position: absolute;
 
-          left: 0;
 
-          bottom: 0;
 
+          &:first-child {
 
+            position: relative;
 
+            background: #eff9ff;
 
+            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;
 
+
 
+            .cover {
 
+              width: 160px;
 
+
 
+              .line {
 
+                width: 18px;
 
+                height: 3px;
 
+                background: #0688d2;
 
+                margin: 18px 0 24px;
 
+              }
 
+
 
+              .tip {
 
+                font-size: 34px;
 
+              }
 
+
 
+              .desc {
 
+                font-size: 16px;
 
+                color: #999;
 
+              }
 
+            }
 
+          }
 
+
 
+          &:nth-child(-n + 3) {
 
+            margin-top: 0;
 
+          }
 
+
 
+          &:nth-child(3),
 
+          &:nth-child(5),
 
+          &:nth-child(8),
 
+          &:nth-child(10) {
 
+            margin-right: 0;
 
+          }
 
+
 
+          &:nth-child(5),
 
+          &:nth-child(9) {
 
+            width: 795px;
 
+          }
 
+
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
+          }
 
+
 
+          &:hover {
 
+            img {
 
+              -webkit-transform: scale(1.2);
 
+              transform: scale(1.2);
 
+            }
 
+          }
 
         }
 
       }
 
-      .description {
 
-        font-size: 16px;
 
-        color: #999;
 
-        line-height: 32px;
 
-        text-align: justify;
 
-      }
 
     }
 
-  }
 
-
 
-  .team {
 
-    padding: 120px 0;
 
-    background: #fff;
 
 
-    .title {
 
-      font-size: 34px;
 
-      text-align: center;
 
-    }
 
+    .development {
 
+      padding: 100px 0;
 
+      background: #f7f7f7;
 
 
-    .content {
 
-      margin-top: 80px;
 
+      .title {
 
+        font-size: 34px;
 
+        text-align: center;
 
+      }
 
 
-      .item {
 
-        width: 388px;
 
-        height: 340px;
 
-        float: left;
 
-        margin-right: 17px;
 
-        margin-top: 18px;
 
-        overflow: hidden;
 
+      .content {
 
+        position: relative;
 
+        margin-top: 80px;
 
+        width: 2px;
 
+        margin: 0 auto;
 
+        background: #e8e8e8;
 
 
-        &:first-child {
 
+        .item {
 
           position: relative;
 
-          background: #eff9ff;
 
-          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: 2px;
 
+          margin-top: 60px;
 
 
-          .cover {
 
-            width: 160px;
 
+          &::before {
 
+            content: '';
 
+            position: absolute;
 
+            width: 10px;
 
+            height: 10px;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            border: 1px solid #999999;
 
+            background: #fff;
 
+            border-radius: 50%;
 
+            left: -4px;
 
+            z-index: 5;
 
+            top: 32px;
 
+          }
 
 
-            .line {
 
-              width: 18px;
 
-              height: 3px;
 
+          &:last-child {
 
+            &::before {
 
               background: #0688d2;
 
-              margin: 18px 0 24px;
 
+              border-color: #fff;
 
             }
 
+            .time {
 
+              border: 1px solid #0688d2;
 
+              border-left: 0;
 
 
-            .tip {
 
-              font-size: 34px;
 
+              color: #0688d2;
 
             }
 
 
-            .desc {
 
-              font-size: 16px;
 
-              color: #999;
 
+            .node {
 
+              background: #0688d2;
 
+
 
+              dt,
 
+              .tip,
 
+              .subtip {
 
+                color: #ffffff;
 
+              }
 
             }
 
           }
 
-        }
 
 
-        &:nth-child(-n + 3) {
 
-          margin-top: 0;
 
-        }
 
+          &.with-time-left {
 
+            .time {
 
+              position: absolute;
 
+              left: -16px;
 
+              top: 0;
 
+              -webkit-transform: translateX(-100%);
 
+              transform: translateX(-100%);
 
+            }
 
 
-        &:nth-child(3),
 
-        &:nth-child(5),
 
-        &:nth-child(8),
 
-        &:nth-child(10) {
 
-          margin-right: 0;
 
-        }
 
+            .node {
 
+              padding-left: 44px;
 
+              margin-left: -16px;
 
+            }
 
+          }
 
 
-        &:nth-child(5),
 
-        &:nth-child(9) {
 
-          width: 795px;
 
-        }
 
+          &.with-time-right {
 
+            .time {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 16px;
 
+            }
 
 
-        img {
 
-          display: block;
 
-          width: 100%;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
+            .node {
 
+              position: relative;
 
+              -webkit-transform: translate(-100%);
 
+              transform: translate(-100%);
 
+              text-align: right;
 
+              padding-right: 44px;
 
+              right: -16px;
 
+            }
 
+          }
 
+
 
+          .time {
 
+            font-size: 34px;
 
+            color: #505050;
 
+            white-space: nowrap;
 
+            padding: 20px 24px;
 
+            height: 100%;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+
 
+            span {
 
+              font-size: 14px;
 
+              margin-left: 10px;
 
+            }
 
+          }
 
+          .node {
 
+            width: 526px;
 
+            margin: 0;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 20px 24px;
 
+
 
+            dd,
 
+            dt {
 
+              margin-left: 0;
 
+            }
 
+
 
+            dt {
 
+              font-size: 34px;
 
+              color: #505050;
 
+            }
 
+            dd {
 
+              font-size: 14px;
 
+              color: #505050;
 
+              margin-top: 24px;
 
+
 
+              .tip {
 
+                margin-bottom: 8px;
 
+              }
 
+            }
 
+          }
 
         }
 
+      }
 
+    }
 
 
-        &:hover {
 
-          img {
 
-            -webkit-transform: scale(1.2);
 
-            transform: scale(1.2);
 
+    .honor {
 
+      padding: 120px 0;
 
+      padding-bottom: 0;
 
+      background: #fff;
 
+      .title {
 
+        font-size: 32px;
 
+        text-align: center;
 
+      }
 
+
 
+      .content {
 
+        margin-top: 80px;
 
+        .item {
 
+          width: 288px;
 
+          height: 330px;
 
+          float: left;
 
+          margin-right: 15px;
 
+
 
+          &:nth-child(4n) {
 
+            margin-right: 0;
 
           }
 
         }
 
       }
 
     }
 
   }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    .about {
 
+      padding: 1.2rem 0;
 
+      background: #fff;
 
+      .title {
 
+        font-size: 0.34rem;
 
+        text-align: center;
 
+        margin-bottom: 0.4rem;
 
+      }
 
+
 
+      .description {
 
+        width: 6.24rem;
 
+        margin: 0 auto;
 
+        font-size: 0.26rem;
 
+        color: #505050;
 
+        text-align: center;
 
+        line-height: 0.48rem;
 
+        word-break: break-all;
 
+      }
 
+
 
+      .content {
 
+        margin-top: 0.4rem;
 
+        padding-bottom: 0.24rem;
 
+        &::-webkit-scrollbar {
 
+          width: 2px;
 
+          height: 2px;
 
+          background-color: #f5f5f5;
 
+        }
 
+
 
+        &::-webkit-scrollbar-thumb {
 
+          border-radius: 2px;
 
+          background-color: #cccecf;
 
+        }
 
+        .item {
 
+          display: inline-block;
 
+          width: 5.96rem;
 
+          height: 5.62rem;
 
+          -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+          border: 1px solid #e8e8e8;
 
+          padding: 0 0.3rem 0.4rem;
 
+          margin-left: 0.32rem;
 
+          vertical-align: top;
 
+          &:last-child {
 
+            margin-right: 0.32rem;
 
+          }
 
 
-  .development {
 
-    padding: 100px 0;
 
-    background: #f7f7f7;
 
+          img {
 
+            display: block;
 
+            width: 1.4rem;
 
+            height: 1.4rem;
 
+            margin: 0.5rem auto 0;
 
+          }
 
+
 
+          .tip {
 
+            font-size: 0.3rem;
 
+            color: #505050;
 
+            font-weight: bold;
 
+            margin-top: 0.4rem;
 
+            text-align: center;
 
+          }
 
 
-    .title {
 
-      font-size: 34px;
 
-      text-align: center;
 
+          .desc {
 
+            margin-top: 0.32rem;
 
+            font-size: 0.26rem;
 
+            color: #505050;
 
+            line-height: 0.48rem;
 
+            text-align: center;
 
+            white-space: initial;
 
+          }
 
+        }
 
+      }
 
     }
 
 
-    .content {
 
+    .profile {
 
+      background: #f7f7f7;
 
+      padding: 0.8rem 0 6.98rem;
 
       position: relative;
 
-      margin-top: 80px;
 
-      width: 2px;
 
-      margin: 0 auto;
 
-      background: #e8e8e8;
 
+      .cover {
 
+        position: absolute;
 
+        width: 5.46rem;
 
+        height: 5.46rem;
 
+        overflow: hidden;
 
+        bottom: 0.7rem;
 
+        left: 50%;
 
+        -webkit-transform: translateX(-50%);
 
+        transform: translateX(-50%);
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
+      }
 
+      .content {
 
+        width: 5.52rem;
 
+        margin-left: 50px;
 
 
-      .item {
 
-        position: relative;
 
-        width: 2px;
 
-        margin-top: 60px;
 
+        .title {
 
+          font-size: 0.34rem;
 
+          text-align: center;
 
+        }
 
+        .subtitle {
 
+          font-size: 0.34rem;
 
+          color: #0688d2;
 
+          text-align: center;
 
+          margin-top: 0.2rem;
 
 
-        &::before {
 
-          content: '';
 
-          position: absolute;
 
-          width: 10px;
 
-          height: 10px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          border: 1px solid #999999;
 
-          background: #fff;
 
-          border-radius: 50%;
 
-          left: -4px;
 
-          z-index: 5;
 
-          top: 32px;
 
+          span {
 
+            font-size: 0.24rem;
 
+            color: #272727;
 
+            margin-left: 12px;
 
+          }
 
         }
 
+        .tags {
 
+          font-size: 0;
 
+          text-align: center;
 
 
-        &:last-child {
 
-          &::before {
 
-            background: #0688d2;
 
-            border-color: #fff;
 
+          span {
 
+            display: block;
 
+            font-size: 0.26rem;
 
+            margin-top: 0.16rem;
 
           }
 
-          .time {
 
-            border: 1px solid #0688d2;
 
-            border-left: 0;
 
 
-            color: #0688d2;
 
+          i {
 
+            display: block;
 
           }
 
+        }
 
+        .line {
 
+          width: 100%;
 
+          height: 1px;
 
+          background: #e8e8e8;
 
+          position: relative;
 
+          margin: 0.48rem 0;
 
+        }
 
+        .description {
 
+          font-size: 0.24rem;
 
+          color: #999;
 
+          line-height: 0.48rem;
 
+          text-align: center;
 
+        }
 
+      }
 
+    }
 
 
-          .node {
 
-            background: #0688d2;
 
+    .team {
 
+      padding: 1.2rem 0;
 
+      background: #fff;
 
+      padding-left: 0.32rem;
 
 
-            dt,
 
-            .tip,
 
-            .subtip {
 
-              color: #ffffff;
 
+      .title {
 
+        font-size: 0.34rem;
 
+        text-align: center;
 
+      }
 
+
 
+      .content {
 
+        margin-top: 0.4rem;
 
+
 
+        .item {
 
+          width: 2.2rem;
 
+          height: 1.94rem;
 
+          float: left;
 
+          margin-right: 0.12rem;
 
+          margin-top: 0.12rem;
 
+          overflow: hidden;
 
+
 
+          &:first-child {
 
+            position: relative;
 
+            background: #eff9ff;
 
+            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;
 
+
 
+            .cover {
 
+              width: 1.8rem;
 
+
 
+              .line {
 
+                width: 0.16rem;
 
+                height: 0.03rem;
 
+                background: #0688d2;
 
+                margin: 0.24rem 0;
 
+              }
 
+
 
+              .tip {
 
+                font-size: 0.26rem;
 
+              }
 
+
 
+              .desc {
 
+                font-size: 0.18rem;
 
+                color: #999;
 
+              }
 
             }
 
           }
 
-        }
 
 
-        &.with-time-left {
 
-          .time {
 
-            position: absolute;
 
-            left: -16px;
 
-            top: 0;
 
-            -webkit-transform: translateX(-100%);
 
-            transform: translateX(-100%);
 
+          &:nth-child(-n + 3) {
 
+            margin-top: 0;
 
           }
 
 
-          .node {
 
-            padding-left: 44px;
 
-            margin-left: -16px;
 
+          &:nth-child(3),
 
+          &:nth-child(5),
 
+          &:nth-child(8),
 
+          &:nth-child(10) {
 
+            margin-right: 0;
 
           }
 
-        }
 
 
-        &.with-time-right {
 
-          .time {
 
-            position: absolute;
 
-            top: 0;
 
-            left: 16px;
 
+          &:nth-child(5),
 
+          &:nth-child(9) {
 
+            width: 4.52rem;
 
           }
 
 
-          .node {
 
-            position: relative;
 
-            -webkit-transform: translate(-100%);
 
-            transform: translate(-100%);
 
-            text-align: right;
 
-            padding-right: 44px;
 
-            right: -16px;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
           }
 
         }
 
+      }
 
+    }
 
 
-        .time {
 
-          font-size: 34px;
 
-          color: #505050;
 
-          white-space: nowrap;
 
-          padding: 20px 24px;
 
-          height: 100%;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
+    .development {
 
+      padding: 0.8rem 0;
 
+      background: #f7f7f7;
 
 
-          span {
 
-            font-size: 14px;
 
-            margin-left: 10px;
 
+      .title {
 
+        font-size: 0.34rem;
 
+        text-align: center;
 
+      }
 
+
 
+      .content {
 
+        position: relative;
 
+        margin-top: 0.8rem;
 
+        width: 0.02rem;
 
+        margin: 0 auto;
 
+        background: #e8e8e8;
 
+
 
+        .item {
 
+          position: relative;
 
+          width: 2px;
 
+          margin-top: 0.6rem;
 
+
 
+          &::before {
 
+            content: '';
 
+            position: absolute;
 
+            width: 0.12rem;
 
+            height: 0.12rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            border: 0.01rem solid #999999;
 
+            background: #fff;
 
+            border-radius: 50%;
 
+            left: -0.04rem;
 
+            z-index: 5;
 
           }
 
-        }
 
-        .node {
 
-          width: 526px;
 
-          margin: 0;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding: 20px 24px;
 
 
-          dd,
 
-          dt {
 
-            margin-left: 0;
 
+          &.with-time-left {
 
+            .time {
 
+              position: absolute;
 
+              top: 0;
 
+              -webkit-transform: translateX(-100%);
 
+              transform: translateX(-100%);
 
+              left: -0.3rem;
 
+            }
 
+
 
+            .node {
 
+              margin-left: 0.3rem;
 
+            }
 
           }
 
 
-          dt {
 
-            font-size: 34px;
 
-            color: #505050;
 
+          &.with-time-right {
 
+            .time {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 0.3rem;
 
+            }
 
+
 
+            .node {
 
+              position: relative;
 
+              -webkit-transform: translate(-100%);
 
+              transform: translate(-100%);
 
+              text-align: right;
 
+              margin-left: -0.3rem;
 
+            }
 
           }
 
-          dd {
 
-            font-size: 14px;
 
+
 
+          .time {
 
+            font-size: 0.26rem;
 
             color: #505050;
 
-            margin-top: 24px;
 
+            white-space: nowrap;
 
+            height: 100%;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+
 
+            span {
 
+              font-size: 0.2rem;
 
+              margin-left: 0.1rem;
 
+            }
 
+          }
 
+          .node {
 
+            width: 3rem;
 
+            margin: 0;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+
 
+            dd,
 
+            dt {
 
+              margin-left: 0;
 
+            }
 
 
-            .tip {
 
-              margin-bottom: 8px;
 
+            dt {
 
+              font-size: 0.26rem;
 
+              color: #505050;
 
+            }
 
+            dd {
 
+              font-size: 0.2rem;
 
+              color: #505050;
 
+              margin-top: 0.16rem;
 
+              line-height: 1.2;
 
+
 
+              .subtip {
 
+                margin-top: 0.04rem;
 
+              }
 
             }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
 
-  .honor {
 
-    padding: 120px 0;
 
-    padding-bottom: 0;
 
-    background: #fff;
 
-    .title {
 
-      font-size: 32px;
 
-      text-align: center;
 
-    }
 
+    .honor {
 
+      padding: 1.2rem 0;
 
+      padding-bottom: 0;
 
+      background: #fff;
 
+      padding-left: 0.32rem;
 
+      .title {
 
+        font-size: 32px;
 
+        text-align: center;
 
+      }
 
 
-    .content {
 
-      margin-top: 80px;
 
-      .item {
 
-        width: 288px;
 
-        height: 330px;
 
-        float: left;
 
-        margin-right: 15px;
 
+      .content {
 
+        margin-top: 0.8rem;
 
+        .item {
 
+          width: 2.2rem;
 
+          height: 3.52rem;
 
+          float: left;
 
+          margin-right: 0.13rem;
 
+          margin-bottom: 0.13rem;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
+          }
 
 
-        &:nth-child(4n) {
 
-          margin-right: 0;
 
+          &:nth-child(3n) {
 
+            margin-right: 0;
 
+          }
 
         }
 
       }
 
     }

+ 175 - 92
css/appliance.css
Целия файл 

@@ -1,95 +1,178 @@
 
-.banner {
 
-  width: 100%;
 
-  height: 530px;
 
-}
 
-.banner img {
 
-  width: 100%;
 
-  height: 100%;
 
-  display: block;
 
-}
 
+@media screen and (min-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 530px;
 
+  }
 
+  .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+    display: block;
 
+  }
 
 
-.main {
 
-  height: auto;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .appliance-title {
 
-  width: 100%;
 
-  height: 244px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 80px 0;
 
-}
 
-.main .appliance-title h1 {
 
-  font-size: 34px;
 
-  line-height: 45px;
 
-  color: #272727;
 
-  text-align: center;
 
-  font-weight: normal;
 
-}
 
-.main .appliance-title p {
 
-  font-size: 16px;
 
-  line-height: 30px;
 
-  color: #999999;
 
-  text-align: center;
 
-}
 
-.main .appliance-content {
 
-  width: 100%;
 
-  height: auto;
 
-}
 
-.main .appliance-content .appliance-li {
 
-  width: 100%;
 
-  height: 380px;
 
-  margin-bottom: 80px;
 
-  -webkit-transition: all 0.5s;
 
-  transition: all 0.5s;
 
-}
 
-.main .appliance-content .appliance-li:hover {
 
-  -webkit-transform: translateY(-10px);
 
-  transform: translateY(-10px);
 
-  -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+  .main {
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .appliance-title {
 
+    width: 100%;
 
+    height: 244px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 80px 0;
 
+  }
 
+  .main .appliance-title h1 {
 
+    font-size: 34px;
 
+    line-height: 45px;
 
+    color: #272727;
 
+    text-align: center;
 
+    font-weight: normal;
 
+  }
 
+  .main .appliance-title p {
 
+    font-size: 16px;
 
+    line-height: 30px;
 
+    color: #999999;
 
+    text-align: center;
 
+  }
 
+  .main .appliance-content {
 
+    width: 100%;
 
+    height: auto;
 
+  }
 
+  .main .appliance-content .appliance-li {
 
+    width: 100%;
 
+    height: 380px;
 
+    margin-bottom: 80px;
 
+    -webkit-transition: all 0.5s;
 
+    transition: all 0.5s;
 
+  }
 
+  .main .appliance-content .appliance-li:hover {
 
+    -webkit-transform: translateY(-10px);
 
+    transform: translateY(-10px);
 
+    -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+    box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+  }
 
+  .main .appliance-content .appliance-li:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lil {
 
+    width: 570px;
 
+    height: 100%;
 
+    float: left;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lil img {
 
+    width: 570px;
 
+    height: 100%;
 
+    display: block;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir {
 
+    width: 630px;
 
+    height: 380px;
 
+    background: url(/img/appliance-lbg.png);
 
+    background-size: cover;
 
+    float: right;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 48px 38px;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-top {
 
+    width: 100%;
 
+    height: 31px;
 
+    font-size: 24px;
 
+    color: #272727;
 
+    text-align: left;
 
+    margin-bottom: 30px;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-text {
 
+    width: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-left: 10px;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-text p {
 
+    font-size: 16px;
 
+    color: #505050;
 
+    text-align: justify;
 
+    line-height: 35px;
 
+  }
 
 }
 
-.main .appliance-content .appliance-li:last-child {
 
-  margin-bottom: 0;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lil {
 
-  width: 570px;
 
-  height: 100%;
 
-  float: left;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lil img {
 
-  width: 570px;
 
-  height: 100%;
 
-  display: block;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lir {
 
-  width: 630px;
 
-  height: 380px;
 
-  background: url(/img/appliance-lbg.png);
 
-  background-size: cover;
 
-  float: right;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 48px 38px;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lir .appliance-lir-top {
 
-  width: 100%;
 
-  height: 31px;
 
-  font-size: 24px;
 
-  color: #272727;
 
-  text-align: left;
 
-  margin-bottom: 30px;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lir .appliance-lir-text {
 
-  width: 100%;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding-left: 10px;
 
-}
 
-.main .appliance-content .appliance-li .appliance-lir .appliance-lir-text p {
 
-  font-size: 16px;
 
-  color: #505050;
 
-  text-align: justify;
 
-  line-height: 35px;
 
+@media screen and (max-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 2.08rem;
 
+  }
 
+  .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+    display: block;
 
+  }
 
+
 
+  .main {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .appliance-title {
 
+    width: 100%;
 
+    height: 2.44rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0.8rem 0;
 
+  }
 
+  .main .appliance-title h1 {
 
+    font-size: 0.34rem;
 
+    line-height: 0.45rem;
 
+    color: #272727;
 
+    text-align: center;
 
+    font-weight: normal;
 
+  }
 
+  .main .appliance-title p {
 
+    font-size: 0.18rem;
 
+    line-height: 0.3rem;
 
+    color: #999999;
 
+    text-align: center;
 
+  }
 
+  .main .appliance-content {
 
+    width: 100%;
 
+  }
 
+  .main .appliance-content .appliance-li {
 
+    margin: 0 auto;
 
+    width: 5.7rem;
 
+    margin-bottom: 0.4rem;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lil {
 
+    width: 5.7rem;
 
+    height: 3.8rem;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lil img {
 
+    width: 5.7rem;
 
+    height: 3.8rem;
 
+    display: block;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir {
 
+    background: #f7f7f7 url(/img/appliance-lbg.png) no-repeat right bottom;
 
+    -webkit-box-sizing: border-box;
 
+    background-size: 5.7rem;
 
+    box-sizing: border-box;
 
+    padding-bottom: 1.7rem;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-top {
 
+    width: 100%;
 
+    font-size: 0.3rem;
 
+    color: #272727;
 
+    text-align: left;
 
+    padding-left: 0.16rem;
 
+    padding-top: 0.32rem;
 
+    margin-bottom: 0.26rem;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-text {
 
+    width: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0 0.44rem;
 
+  }
 
+  .main .appliance-content .appliance-li .appliance-lir .appliance-lir-text p {
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+    text-align: justify;
 
+    line-height: 0.48rem;
 
+  }
 
 }

+ 158 - 74
css/appliance.scss
Целия файл 

@@ -1,91 +1,175 @@
 
-.banner {
 
-  width: 100%;
 
-  height: 530px;
 
-  img {
 
+@media screen and (min-width: 768px) {
 
+  .banner {
 
     width: 100%;
 
-    height: 100%;
 
-    display: block;
 
-  }
 
-}
 
-.main {
 
-  height: auto;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  .appliance-title {
 
-    width: 100%;
 
-    height: 244px;
 
-    -webkit-box-sizing: border-box;
 
-    box-sizing: border-box;
 
-    padding: 80px 0;
 
-    h1 {
 
-      font-size: 34px;
 
-      line-height: 45px;
 
-      color: #272727;
 
-      text-align: center;
 
-      font-weight: normal;
 
-    }
 
-    p {
 
-      font-size: 16px;
 
-      line-height: 30px;
 
-      color: #999999;
 
-      text-align: center;
 
+    height: 530px;
 
+    img {
 
+      width: 100%;
 
+      height: 100%;
 
+      display: block;
 
     }
 
   }
 
-  .appliance-content {
 
-    width: 100%;
 
+  .main {
 
     height: auto;
 
-    .appliance-li {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    .appliance-title {
 
       width: 100%;
 
-      height: 380px;
 
-      margin-bottom: 80px;
 
-      -webkit-transition: all 0.5s;
 
-      transition: all 0.5s;
 
-      &:hover {
 
-        -webkit-transform: translateY(-10px);
 
-        transform: translateY(-10px);
 
-        -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-        box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+      height: 244px;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      padding: 80px 0;
 
+      h1 {
 
+        font-size: 34px;
 
+        line-height: 45px;
 
+        color: #272727;
 
+        text-align: center;
 
+        font-weight: normal;
 
       }
 
-      &:last-child {
 
-        margin-bottom: 0;
 
+      p {
 
+        font-size: 16px;
 
+        line-height: 30px;
 
+        color: #999999;
 
+        text-align: center;
 
       }
 
-      .appliance-lil {
 
-        width: 570px;
 
-        height: 100%;
 
-        float: left;
 
-        img {
 
+    }
 
+    .appliance-content {
 
+      width: 100%;
 
+      height: auto;
 
+      .appliance-li {
 
+        width: 100%;
 
+        height: 380px;
 
+        margin-bottom: 80px;
 
+        -webkit-transition: all 0.5s;
 
+        transition: all 0.5s;
 
+        &:hover {
 
+          -webkit-transform: translateY(-10px);
 
+          transform: translateY(-10px);
 
+          -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+          box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+        }
 
+        &:last-child {
 
+          margin-bottom: 0;
 
+        }
 
+        .appliance-lil {
 
           width: 570px;
 
           height: 100%;
 
-          display: block;
 
+          float: left;
 
+          img {
 
+            width: 570px;
 
+            height: 100%;
 
+            display: block;
 
+          }
 
+        }
 
+        .appliance-lir {
 
+          width: 630px;
 
+          height: 380px;
 
+          background: url(/img/appliance-lbg.png);
 
+          background-size: cover;
 
+          float: right;
 
+          -webkit-box-sizing: border-box;
 
+          box-sizing: border-box;
 
+          padding: 48px 38px;
 
+          .appliance-lir-top {
 
+            width: 100%;
 
+            height: 31px;
 
+            font-size: 24px;
 
+            color: #272727;
 
+            text-align: left;
 
+            margin-bottom: 30px;
 
+          }
 
+          .appliance-lir-text {
 
+            width: 100%;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding-left: 10px;
 
+            p {
 
+              font-size: 16px;
 
+              color: #505050;
 
+              text-align: justify;
 
+              line-height: 35px;
 
+            }
 
+          }
 
         }
 
       }
 
-      .appliance-lir {
 
-        width: 630px;
 
-        height: 380px;
 
-        background: url(/img/appliance-lbg.png);
 
-        background-size: cover;
 
-        float: right;
 
-        -webkit-box-sizing: border-box;
 
-        box-sizing: border-box;
 
-        padding: 48px 38px;
 
-        .appliance-lir-top {
 
-          width: 100%;
 
-          height: 31px;
 
-          font-size: 24px;
 
-          color: #272727;
 
-          text-align: left;
 
-          margin-bottom: 30px;
 
+    }
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 2.08rem;
 
+    img {
 
+      width: 100%;
 
+      height: 100%;
 
+      display: block;
 
+    }
 
+  }
 
+  .main {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    .appliance-title {
 
+      width: 100%;
 
+      height: 2.44rem;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      padding: 0.8rem 0;
 
+      h1 {
 
+        font-size: 0.34rem;
 
+        line-height: 0.45rem;
 
+        color: #272727;
 
+        text-align: center;
 
+        font-weight: normal;
 
+      }
 
+      p {
 
+        font-size: 0.18rem;
 
+        line-height: 0.3rem;
 
+        color: #999999;
 
+        text-align: center;
 
+      }
 
+    }
 
+    .appliance-content {
 
+      width: 100%;
 
+      .appliance-li {
 
+        margin: 0 auto;
 
+        width: 5.7rem;
 
+        margin-bottom: 0.4rem;
 
+        
+        .appliance-lil {
 
+          width: 5.7rem;
 
+          height: 3.8rem;
 
+          img {
 
+            width: 5.7rem;
 
+            height: 3.8rem;
 
+            display: block;
 
+          }
 
         }
 
-        .appliance-lir-text {
 
-          width: 100%;
 
+        .appliance-lir {
 
+          background: #f7f7f7 url(/img/appliance-lbg.png) no-repeat right bottom;
 
           -webkit-box-sizing: border-box;
 
+          background-size: 5.7rem;
 
           box-sizing: border-box;
 
-          padding-left: 10px;
 
-          p {
 
-            font-size: 16px;
 
-            color: #505050;
 
-            text-align: justify;
 
-            line-height: 35px;
 
+          padding-bottom: 1.7rem;
 
+          .appliance-lir-top {
 
+            width: 100%;
 
+            font-size: 0.3rem;
 
+            color: #272727;
 
+            text-align: left;
 
+            padding-left: 0.16rem;
 
+            padding-top: 0.32rem;
 
+            margin-bottom: 0.26rem;
 
+          }
 
+          .appliance-lir-text {
 
+            width: 100%;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0 0.44rem;
 
+            p {
 
+              font-size: 0.24rem;
 
+              color: #505050;
 
+              text-align: justify;
 
+              line-height: 0.48rem;
 
+            }
 
           }
 
         }
 
       }

+ 619 - 281
css/base.css
Целия файл 

@@ -1,6 +1,5 @@
 
 body {
 
   min-height: 100vh;
 
-  font-size: 16px;
 
   color: #272727;
 
   font-family: "Microsoft YaHei", SimSun, Arial, Helvetica, sans-serif;
 
 }
 
@@ -24,6 +23,7 @@ p {
 
 
 ul,
 
 ol {
 
+  list-style-type: none;
 
   margin: 0;
 
   padding: 0;
 
 }
 
@@ -38,6 +38,10 @@ a {
 
   color: #272727;
 
 }
 
 
+* {
 
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+}
 
+
 
 ::-webkit-scrollbar {
 
   width: 8px;
 
   height: 8px;
 
@@ -49,11 +53,6 @@ a {
 
   background-color: #cccecf;
 
 }
 
 
-.container {
 
-  width: 1200px;
 
-  margin: 0 auto;
 
-}
 
-
 
 .flex {
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
@@ -80,281 +79,6 @@ a {
 
   clear: both;
 
 }
 
 
-.mt18 {
 
-  margin-top: 18px;
 
-}
 
-
 
-.mr18 {
 
-  margin-right: 18px;
 
-}
 
-
 
-.mb18 {
 
-  margin-bottom: 18px;
 
-}
 
-
 
-.ml18 {
 
-  margin-left: 18px;
 
-}
 
-
 
-.banner {
 
-  position: relative;
 
-  width: 100%;
 
-  min-width: 1200px;
 
-  height: 530px;
 
-  overflow: hidden;
 
-}
 
-.banner img {
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  -webkit-transform: translate(-50%, -50%);
 
-  transform: translate(-50%, -50%);
 
-}
 
-
 
-.header {
 
-  position: -webkit-sticky;
 
-  position: sticky;
 
-  width: 100%;
 
-  left: 0;
 
-  top: 0;
 
-  z-index: 99;
 
-  background-color: #fff;
 
-}
 
-.header .logo h1 {
 
-  font-size: 0;
 
-}
 
-.header .logo img {
 
-  display: block;
 
-  height: 42px;
 
-}
 
-.header .nav > li {
 
-  float: left;
 
-  position: relative;
 
-  margin-right: 56px;
 
-}
 
-.header .nav > li:last-child {
 
-  margin-right: 0;
 
-}
 
-.header .nav > li:hover > a {
 
-  color: #0688d2;
 
-}
 
-.header .nav > li:hover::after {
 
-  display: block;
 
-}
 
-.header .nav > li:hover .menu {
 
-  display: block;
 
-}
 
-.header .nav > li > a {
 
-  display: block;
 
-  line-height: 68px;
 
-}
 
-.header .nav > li::after {
 
-  content: "";
 
-  position: absolute;
 
-  display: none;
 
-  width: 32px;
 
-  height: 3px;
 
-  background: #0688d2;
 
-  left: 50%;
 
-  bottom: 0;
 
-  -webkit-transform: translateX(-50%);
 
-  transform: translateX(-50%);
 
-}
 
-.header .nav > li.active > a {
 
-  color: #0688d2;
 
-}
 
-.header .nav > li.active::after {
 
-  display: block;
 
-}
 
-.header .nav .menu {
 
-  display: none;
 
-  position: absolute;
 
-  background: #fff;
 
-  min-width: 128px;
 
-  left: 50%;
 
-  top: 68px;
 
-  -webkit-transform: translateX(-50%);
 
-  transform: translateX(-50%);
 
-}
 
-.header .nav .menu > li:hover {
 
-  background: #0688d2;
 
-}
 
-.header .nav .menu > li:hover > a {
 
-  color: #fff;
 
-}
 
-.header .nav .menu > li:hover .submenu {
 
-  display: block;
 
-}
 
-.header .nav .menu > li > a {
 
-  display: block;
 
-  font-size: 14px;
 
-  text-align: center;
 
-  line-height: 50px;
 
-}
 
-.header .nav .menu > li.dropdown > a {
 
-  background: url(/img/icon-arrow-right.png) no-repeat;
 
-  background-position: 88% center;
 
-  background-size: 16px;
 
-}
 
-.header .nav .menu .submenu {
 
-  display: none;
 
-  position: absolute;
 
-  top: 0;
 
-  right: 0;
 
-  background: #fff;
 
-  width: 306px;
 
-  min-height: 200px;
 
-  border-left: 1px solid #f8f8f8;
 
-  border-left-color: #e8e8e8;
 
-  -webkit-transform: translateX(100%) translateX(-1px);
 
-  transform: translateX(100%) translateX(-1px);
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 16px 24px;
 
-}
 
-.header .nav .menu .submenu > li {
 
-  float: left;
 
-  margin: 16px 16px 0 0;
 
-}
 
-.header .nav .menu .submenu > li:nth-child(2n) {
 
-  margin-right: 0;
 
-}
 
-.header .nav .menu .submenu > li:nth-child(-n+2) {
 
-  margin-top: 0;
 
-}
 
-.header .nav .menu .submenu > li > a {
 
-  display: block;
 
-  font-size: 14px;
 
-  width: 120px;
 
-  text-align: center;
 
-  line-height: 32px;
 
-  background: #f7f7f7;
 
-}
 
-.header .nav .menu .submenu > li > a:hover {
 
-  background: #eff9ff;
 
-  color: #0688d2;
 
-}
 
-
 
-.footer {
 
-  margin-top: 120px;
 
-  padding-top: 38px;
 
-  padding-bottom: 24px;
 
-  background: #1b1b1b;
 
-}
 
-.footer .container .section {
 
-  margin-right: 180px;
 
-}
 
-.footer .container .section .item {
 
-  position: relative;
 
-  color: rgba(255, 255, 255, 0.5);
 
-  margin-top: 20px;
 
-  padding-left: 30px;
 
-  font-size: 12px;
 
-}
 
-.footer .container .section .item::before {
 
-  content: "";
 
-  display: block;
 
-  width: 20px;
 
-  height: 20px;
 
-  position: absolute;
 
-  left: 0;
 
-  top: 50%;
 
-  -webkit-transform: translateY(-50%);
 
-  transform: translateY(-50%);
 
-  background-repeat: no-repeat;
 
-  background-position: center;
 
-  background-size: 20px;
 
-}
 
-.footer .container .section .item.mobile::before {
 
-  background-image: url(/img/icon-mobile.png);
 
-}
 
-.footer .container .section .item.mobile span:last-child {
 
-  margin-left: 16px;
 
-}
 
-.footer .container .section .item.email::before {
 
-  background-image: url(/img/icon-email.png);
 
-}
 
-.footer .container .section .item.address::before {
 
-  background-image: url(/img/icon-address.png);
 
-}
 
-.footer .container .nav {
 
-  margin-left: 110px;
 
-}
 
-.footer .container .nav li {
 
-  margin-top: 25px;
 
-  text-align: center;
 
-}
 
-.footer .container .nav li:first-child {
 
-  margin-top: 12px;
 
-}
 
-.footer .container .nav li a {
 
-  font-size: 14px;
 
-  color: rgba(255, 255, 255, 0.5);
 
-}
 
-.footer .container .nav li a:hover {
 
-  color: #0688d2;
 
-}
 
-.footer .container .qrcode {
 
-  padding: 7px;
 
-  background: rgba(255, 255, 255, 0.06);
 
-}
 
-.footer .container .qrcode img {
 
-  display: block;
 
-  width: 94px;
 
-  height: 94px;
 
-  background-color: #fff;
 
-}
 
-.footer .container .qrcode .tip {
 
-  font-size: 12px;
 
-  color: #ffffff;
 
-  margin-top: 5px;
 
-  text-align: center;
 
-}
 
-.footer .line {
 
-  width: 100%;
 
-  height: 1px;
 
-  background-color: rgba(255, 255, 255, 0.3);
 
-  margin: 32px 0 24px;
 
-}
 
-.footer .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;
 
-}
 
-.footer .link i {
 
-  display: block;
 
-  height: 10px;
 
-  width: 1px;
 
-  background-color: rgba(255, 255, 255, 0.4);
 
-  margin: 0 16px;
 
-}
 
-.footer .link a {
 
-  color: rgba(255, 255, 255, 0.4);
 
-  font-size: 12px;
 
-}
 
-.footer .link a:hover {
 
-  color: #0688d2;
 
-}
 
-.footer .copyright {
 
-  margin-top: 20px;
 
-  text-align: center;
 
-  color: rgba(255, 255, 255, 0.4);
 
-  font-size: 12px;
 
-}
 
-.footer .copyright a {
 
-  color: rgba(255, 255, 255, 0.8);
 
-  text-decoration: underline;
 
-}
 
-.footer .copyright * {
 
-  margin: 0 24px;
 
-}
 
-
 
 @-webkit-keyframes rowup-left {
 
   0% {
 
     -webkit-transform: translate3d(0, 0, 0);
 
@@ -394,4 +118,618 @@ a {
 
     -webkit-transform: translate3d(600px, 0, 0);
 
     transform: translate3d(600px, 0, 0);
 
   }
 
+}
 
+@media screen and (min-width: 768px) {
 
+  html {
 
+    font-size: 16px !important;
 
+  }
 
+
 
+  .only-mobile {
 
+    display: none !important;
 
+  }
 
+
 
+  .container {
 
+    width: 1200px;
 
+    margin: 0 auto;
 
+  }
 
+
 
+  .mt18 {
 
+    margin-top: 18px;
 
+  }
 
+
 
+  .mr18 {
 
+    margin-right: 18px;
 
+  }
 
+
 
+  .mb18 {
 
+    margin-bottom: 18px;
 
+  }
 
+
 
+  .ml18 {
 
+    margin-left: 18px;
 
+  }
 
+
 
+  .banner {
 
+    position: relative;
 
+    width: 100%;
 
+    min-width: 1200px;
 
+    height: 530px;
 
+    overflow: hidden;
 
+  }
 
+  .banner img {
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+
 
+  .navbar {
 
+    height: 68px;
 
+    background-color: #fff;
 
+    position: -webkit-sticky;
 
+    position: sticky;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 90;
 
+  }
 
+  .navbar .container {
 
+    height: 68px;
 
+    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;
 
+  }
 
+  .navbar .navbar-header .logo {
 
+    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;
 
+  }
 
+  .navbar .navbar-header .logo h1 {
 
+    font-size: 0;
 
+  }
 
+  .navbar .navbar-header .logo img {
 
+    display: block;
 
+    width: 64px;
 
+    height: 42px;
 
+  }
 
+  .navbar .navbar-collapse .nav {
 
+    position: relative;
 
+    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;
 
+  }
 
+  .navbar .navbar-collapse .nav > li {
 
+    margin-left: 56px;
 
+    position: relative;
 
+  }
 
+  .navbar .navbar-collapse .nav > li::after {
 
+    content: "";
 
+    display: none;
 
+    width: 28px;
 
+    height: 3px;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 50%;
 
+    bottom: 0;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+  }
 
+  .navbar .navbar-collapse .nav > li.active > a {
 
+    color: #0688d2;
 
+  }
 
+  .navbar .navbar-collapse .nav > li.active::after {
 
+    display: block;
 
+  }
 
+  .navbar .navbar-collapse .nav > li:hover > a {
 
+    color: #0688d2;
 
+  }
 
+  .navbar .navbar-collapse .nav > li:hover::after {
 
+    display: block;
 
+  }
 
+  .navbar .navbar-collapse .nav > li:first-child {
 
+    margin-left: 0;
 
+  }
 
+  .navbar .navbar-collapse .nav > li > a {
 
+    display: block;
 
+    line-height: 68px;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown {
 
+    position: relative;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown:hover .dropdown-menu {
 
+    display: block;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu {
 
+    display: none;
 
+    top: 68px;
 
+    position: absolute;
 
+    background: #fff;
 
+    left: 50%;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover {
 
+    background: #0688d2;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover > a {
 
+    color: #fff;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li:hover .dropdown-submenu {
 
+    display: block;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li > a {
 
+    display: block;
 
+    line-height: 50px;
 
+    text-align: center;
 
+    width: 128px;
 
+    font-size: 14px;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu .submenu-toggle {
 
+    background: url(/img/icon-arrow-right.png) no-repeat;
 
+    background-position: 90% center;
 
+    background-size: 18px;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu .dropdown-submenu {
 
+    display: none;
 
+    position: absolute;
 
+    top: 0;
 
+    left: 128px;
 
+    background: #fff;
 
+    width: 304px;
 
+    min-height: 200px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 16px 24px 16px 23px;
 
+    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;
 
+  }
 
+  .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;
 
+    font-size: 14px;
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 120px;
 
+    padding-top: 38px;
 
+    padding-bottom: 24px;
 
+    background: #1b1b1b;
 
+  }
 
+  .footer .container .section {
 
+    margin-right: 180px;
 
+  }
 
+  .footer .container .section .item {
 
+    position: relative;
 
+    color: rgba(255, 255, 255, 0.5);
 
+    margin-top: 20px;
 
+    padding-left: 30px;
 
+    font-size: 12px;
 
+  }
 
+  .footer .container .section .item::before {
 
+    content: "";
 
+    display: block;
 
+    width: 20px;
 
+    height: 20px;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+    background-repeat: no-repeat;
 
+    background-position: center;
 
+    background-size: 20px;
 
+  }
 
+  .footer .container .section .item.mobile::before {
 
+    background-image: url(/img/icon-mobile.png);
 
+  }
 
+  .footer .container .section .item.mobile span:last-child {
 
+    margin-left: 16px;
 
+  }
 
+  .footer .container .section .item.email::before {
 
+    background-image: url(/img/icon-email.png);
 
+  }
 
+  .footer .container .section .item.address::before {
 
+    background-image: url(/img/icon-address.png);
 
+  }
 
+  .footer .container .nav {
 
+    margin-left: 110px;
 
+  }
 
+  .footer .container .nav li {
 
+    margin-top: 25px;
 
+    text-align: center;
 
+  }
 
+  .footer .container .nav li:first-child {
 
+    margin-top: 12px;
 
+  }
 
+  .footer .container .nav li a {
 
+    font-size: 14px;
 
+    color: rgba(255, 255, 255, 0.5);
 
+  }
 
+  .footer .container .nav li a:hover {
 
+    color: #0688d2;
 
+  }
 
+  .footer .container .qrcode {
 
+    padding: 7px;
 
+    background: rgba(255, 255, 255, 0.06);
 
+  }
 
+  .footer .container .qrcode img {
 
+    display: block;
 
+    width: 94px;
 
+    height: 94px;
 
+    background-color: #fff;
 
+  }
 
+  .footer .container .qrcode .tip {
 
+    font-size: 12px;
 
+    color: #ffffff;
 
+    margin-top: 5px;
 
+    text-align: center;
 
+  }
 
+  .footer .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    background-color: rgba(255, 255, 255, 0.3);
 
+    margin: 32px 0 24px;
 
+  }
 
+  .footer .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;
 
+  }
 
+  .footer .link i {
 
+    display: block;
 
+    height: 10px;
 
+    width: 1px;
 
+    background-color: rgba(255, 255, 255, 0.4);
 
+    margin: 0 16px;
 
+  }
 
+  .footer .link a {
 
+    color: rgba(255, 255, 255, 0.4);
 
+    font-size: 12px;
 
+  }
 
+  .footer .link a:hover {
 
+    color: #0688d2;
 
+  }
 
+  .footer .copyright {
 
+    margin-top: 20px;
 
+    text-align: center;
 
+    color: rgba(255, 255, 255, 0.4);
 
+    font-size: 12px;
 
+  }
 
+  .footer .copyright a {
 
+    color: rgba(255, 255, 255, 0.8);
 
+    text-decoration: underline;
 
+  }
 
+  .footer .copyright * {
 
+    margin: 0 24px;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  html {
 
+    font-size: 50px;
 
+  }
 
+
 
+  .only-pc {
 
+    display: none !important;
 
+  }
 
+
 
+  .scroll-box {
 
+    overflow-x: auto;
 
+    white-space: nowrap;
 
+    font-size: 0;
 
+  }
 
+
 
+  .banner {
 
+    position: relative;
 
+    width: 100%;
 
+    height: 2.74rem;
 
+    overflow: hidden;
 
+  }
 
+  .banner img {
 
+    position: absolute;
 
+    height: 2.74rem;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+
 
+  .navbar {
 
+    font-size: 0.26rem;
 
+    height: 1.04rem;
 
+    background: #fff;
 
+    position: -webkit-sticky;
 
+    position: sticky;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 90;
 
+  }
 
+  .navbar .navbar-header {
 
+    position: relative;
 
+    z-index: 2;
 
+    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;
 
+    background: #fff;
 
+  }
 
+  .navbar .navbar-header .logo {
 
+    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: 2rem;
 
+    height: 1.04rem;
 
+    background: #0688d2;
 
+  }
 
+  .navbar .navbar-header .logo h1 {
 
+    font-size: 0;
 
+  }
 
+  .navbar .navbar-header .logo img {
 
+    display: block;
 
+    width: 1.14rem;
 
+  }
 
+  .navbar .navbar-header .navbar-toggle {
 
+    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;
 
+  }
 
+  .navbar .navbar-header .navbar-toggle .name {
 
+    font-size: 0.3rem;
 
+    color: #0688d2;
 
+    margin-right: 0.16rem;
 
+  }
 
+  .navbar .navbar-header .navbar-toggle .icon-bar {
 
+    display: inline-block;
 
+    width: 0.48rem;
 
+    height: 0.48rem;
 
+    background: url(/img/icon-menu.png) no-repeat center;
 
+    background-size: 0.42rem;
 
+    font-size: 0;
 
+    margin-right: 0.32rem;
 
+    margin-bottom: 0.03rem;
 
+  }
 
+  .navbar .navbar-header .navbar-toggle[aria-expanded=true] .icon-bar {
 
+    background-image: url(/img/icon-menu-close.png);
 
+    background-size: 0.48rem;
 
+  }
 
+  .navbar .navbar-header .navbar-toggle[aria-expanded=true] .name {
 
+    display: none;
 
+  }
 
+  .navbar .navbar-collapse {
 
+    display: none;
 
+    position: absolute;
 
+    width: 100%;
 
+    height: 100vh;
 
+    overflow-y: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-left: 1.34rem;
 
+    right: 0;
 
+    top: 0;
 
+    z-index: 1;
 
+    background: transparent;
 
+  }
 
+  .navbar .navbar-collapse::-webkit-scrollbar {
 
+    width: 2px;
 
+    height: 2px;
 
+    background-color: #f5f5f5;
 
+  }
 
+  .navbar .navbar-collapse::-webkit-scrollbar-thumb {
 
+    border-radius: 2px;
 
+    background-color: #cccecf;
 
+  }
 
+  .navbar .navbar-collapse .nav {
 
+    background: #fff;
 
+    padding: 0.48rem;
 
+    padding-top: 1.04rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    min-height: 100vh;
 
+  }
 
+  .navbar .navbar-collapse .nav li a {
 
+    display: block;
 
+  }
 
+  .navbar .navbar-collapse .nav > li {
 
+    border-top: 0.01rem solid #d8d8d8;
 
+    border-bottom: 0.01rem solid #d8d8d8;
 
+  }
 
+  .navbar .navbar-collapse .nav > li > a {
 
+    font-size: 0.3rem;
 
+    line-height: 1rem;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-toggle {
 
+    background-image: url(/img/icon-menu-arrow-down.png);
 
+    background-position: right center;
 
+    background-size: 0.48rem;
 
+    background-repeat: no-repeat;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown.open .dropdown-toggle {
 
+    background-image: url(/img/icon-menu-arrow-up.png);
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu {
 
+    display: none;
 
+    padding-bottom: 0.24rem;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-menu > li > a {
 
+    line-height: 0.66rem;
 
+    color: #666666;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-submenu {
 
+    padding: 0.24rem 0;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li {
 
+    float: left;
 
+    margin-right: 0.4rem;
 
+    margin-top: 0.24rem;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li:nth-child(2n) {
 
+    margin-right: 0;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li:nth-child(-n+2) {
 
+    margin-top: 0;
 
+  }
 
+  .navbar .navbar-collapse .nav .dropdown .dropdown-submenu li a {
 
+    line-height: 0.56rem;
 
+    width: 2.08rem;
 
+    height: 0.56rem;
 
+    background: #f7f7f7;
 
+    text-align: center;
 
+    color: #666666;
 
+  }
 
+
 
+  .footer {
 
+    position: relative;
 
+    padding: 0.4rem;
 
+    background: #1b1b1b;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    margin-top: 1rem;
 
+  }
 
+  .footer .container .title {
 
+    font-size: 0.3rem;
 
+    color: rgba(255, 255, 255, 0.8);
 
+  }
 
+  .footer .container .section {
 
+    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;
 
+  }
 
+  .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;
 
+  }
 
+  .footer .container .section .item:nth-child(2) {
 
+    margin-top: 0;
 
+  }
 
+  .footer .container .section .item::before {
 
+    content: "";
 
+    display: block;
 
+    width: 0.4rem;
 
+    height: 0.4rem;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+    background-repeat: no-repeat;
 
+    background-position: center;
 
+    background-size: 0.4rem;
 
+  }
 
+  .footer .container .section .item.mobile::before {
 
+    background-image: url(/img/icon-mobile.png);
 
+  }
 
+  .footer .container .section .item.mobile span:last-child {
 
+    margin-left: 0.4rem;
 
+  }
 
+  .footer .container .section .item.email::before {
 
+    background-image: url(/img/icon-email.png);
 
+  }
 
+  .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 .nav .item:nth-child(4n) {
 
+    margin-right: 0;
 
+  }
 
+  .footer .container .nav .item a {
 
+    display: block;
 
+    color: rgba(255, 255, 255, 0.5);
 
+    font-size: 0.24rem;
 
+  }
 
+  .footer .container .qrcode img {
 
+    display: block;
 
+    width: 1.36rem;
 
+    height: 1.36rem;
 
+    background-color: #fff;
 
+  }
 
+  .footer .container .qrcode .tip {
 
+    font-size: 0.2rem;
 
+    color: #ffffff;
 
+    margin-top: 0.16rem;
 
+    text-align: center;
 
+  }
 
+  .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);
 
+    font-size: 0.2rem;
 
+    padding: 0.4rem;
 
+  }
 
+  .footer .copyright a {
 
+    width: 4.2rem;
 
+    color: rgba(255, 255, 255, 0.4);
 
+  }
 
+  .footer .copyright * {
 
+    display: block;
 
+    margin-bottom: 0.16rem;
 
+  }
 
 }

+ 702 - 296
css/base.scss
Целия файл 

@@ -1,6 +1,5 @@
 
 body {
 
   min-height: 100vh;
 
-  font-size: 16px;
 
   color: #272727;
 
   font-family: 'Microsoft YaHei', SimSun, Arial, Helvetica, sans-serif;
 
 }
 
@@ -24,6 +23,7 @@ p {
 
 
 ul,
 
 ol {
 
+  list-style-type: none;
 
   margin: 0;
 
   padding: 0;
 
 }
 
@@ -38,6 +38,10 @@ a {
 
   color: #272727;
 
 }
 
 
+* {
 
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+}
 
+
 
 ::-webkit-scrollbar {
 
   width: 8px;
 
   height: 8px;
 
@@ -49,21 +53,16 @@ a {
 
   background-color: #cccecf;
 
 }
 
 
-.container {
 
-  width: 1200px;
 
-  margin: 0 auto;
 
-}
 
-
 
 .flex {
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
   display: flex;
 
   -webkit-box-pack: justify;
 
-      -ms-flex-pack: justify;
 
-          justify-content: space-between;
 
+  -ms-flex-pack: justify;
 
+  justify-content: space-between;
 
   -webkit-box-align: center;
 
-      -ms-flex-align: center;
 
-          align-items: center;
 
+  -ms-flex-align: center;
 
+  align-items: center;
 
 }
 
 
 .fl {
 
@@ -78,373 +77,780 @@ a {
 
   clear: both;
 
 }
 
 
-.mt18 {
 
-  margin-top: 18px;
 
+@-webkit-keyframes rowup-left {
 
+  0% {
 
+    -webkit-transform: translate3d(0, 0, 0);
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
+  100% {
 
+    -webkit-transform: translate3d(-600px, 0, 0);
 
+    transform: translate3d(-600px, 0, 0);
 
+  }
 
 }
 
 
-.mr18 {
 
-  margin-right: 18px;
 
+@keyframes rowup-left {
 
+  0% {
 
+    -webkit-transform: translate3d(0, 0, 0);
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
+  100% {
 
+    -webkit-transform: translate3d(-600px, 0, 0);
 
+    transform: translate3d(-600px, 0, 0);
 
+  }
 
 }
 
-
 
-.mb18 {
 
-  margin-bottom: 18px;
 
+@-webkit-keyframes rowup-right {
 
+  0% {
 
+    -webkit-transform: translate3d(0, 0, 0);
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
+  100% {
 
+    -webkit-transform: translate3d(600px, 0, 0);
 
+    transform: translate3d(600px, 0, 0);
 
+  }
 
 }
 
-
 
-.ml18 {
 
-  margin-left: 18px;
 
+@keyframes rowup-right {
 
+  0% {
 
+    -webkit-transform: translate3d(0, 0, 0);
 
+    transform: translate3d(0, 0, 0);
 
+  }
 
+  100% {
 
+    -webkit-transform: translate3d(600px, 0, 0);
 
+    transform: translate3d(600px, 0, 0);
 
+  }
 
 }
 
 
-.banner {
 
-  position: relative;
 
-  width: 100%;
 
-  min-width: 1200px;
 
-  height: 530px;
 
-  overflow: hidden;
 
-
 
-  img {
 
-    position: absolute;
 
-    left: 50%;
 
-    top: 50%;
 
-    -webkit-transform: translate(-50%, -50%);
 
-            transform: translate(-50%, -50%);
 
+@media screen and (min-width: 768px) {
 
+  html {
 
+    font-size: 16px !important;
 
   }
 
-}
 
 
-// 导航菜单
 
-.header {
 
-  position: -webkit-sticky;
 
-  position: sticky;
 
-  width: 100%;
 
-  left: 0;
 
-  top: 0;
 
-  z-index: 99;
 
-  background-color: #fff;
 
-  .logo {
 
-    h1 {
 
-      font-size: 0;
 
-    }
 
+  .only-mobile {
 
+    display: none !important;
 
+  }
 
+
 
+  .container {
 
+    width: 1200px;
 
+    margin: 0 auto;
 
+  }
 
+
 
+  .mt18 {
 
+    margin-top: 18px;
 
+  }
 
+
 
+  .mr18 {
 
+    margin-right: 18px;
 
+  }
 
+
 
+  .mb18 {
 
+    margin-bottom: 18px;
 
+  }
 
+
 
+  .ml18 {
 
+    margin-left: 18px;
 
+  }
 
+
 
+  .banner {
 
+    position: relative;
 
+    width: 100%;
 
+    min-width: 1200px;
 
+    height: 530px;
 
+    overflow: hidden;
 
+
 
     img {
 
-      display: block;
 
-      height: 42px;
 
+      position: absolute;
 
+      left: 50%;
 
+      top: 50%;
 
+      -webkit-transform: translate(-50%, -50%);
 
+      transform: translate(-50%, -50%);
 
     }
 
   }
 
 
-  .nav {
 
-    & > li {
 
-      float: left;
 
-      position: relative;
 
-      margin-right: 56px;
 
+  // 导航菜单
 
+  .navbar {
 
+    height: 68px;
 
+    background-color: #fff;
 
+    position: -webkit-sticky;
 
+    position: sticky;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 90;
 
+    .container {
 
+      height: 68px;
 
+      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;
 
+    }
 
 
-      &:last-child {
 
-        margin-right: 0;
 
+    .navbar-header {
 
+      .logo {
 
+        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;
 
+        h1 {
 
+          font-size: 0;
 
+        }
 
+        img {
 
+          display: block;
 
+          width: 64px;
 
+          height: 42px;
 
+        }
 
       }
 
+    }
 
+    .navbar-collapse {
 
+      .nav {
 
+        position: relative;
 
+        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;
 
 
-      &:hover {
 
-        & > a {
 
-          color: #0688d2;
 
+        & > li {
 
+          margin-left: 56px;
 
+          position: relative;
 
+
 
+          &::after {
 
+            content: '';
 
+            display: none;
 
+            width: 28px;
 
+            height: 3px;
 
+            background: #0688d2;
 
+            position: absolute;
 
+            left: 50%;
 
+            bottom: 0;
 
+            -webkit-transform: translateX(-50%);
 
+            transform: translateX(-50%);
 
+          }
 
+
 
+          &.active {
 
+            & > a {
 
+              color: #0688d2;
 
+            }
 
+            &::after {
 
+              display: block;
 
+            }
 
+          }
 
+
 
+          &:hover {
 
+            & > a {
 
+              color: #0688d2;
 
+            }
 
+            &::after {
 
+              display: block;
 
+            }
 
+          }
 
+
 
+          &:first-child {
 
+            margin-left: 0;
 
+          }
 
+          & > a {
 
+            display: block;
 
+            line-height: 68px;
 
+          }
 
         }
 
 
-        &::after {
 
-          display: block;
 
+        .dropdown {
 
+          position: relative;
 
+
 
+          &:hover {
 
+            .dropdown-menu {
 
+              display: block;
 
+            }
 
+          }
 
+
 
+          .dropdown-menu {
 
+            display: none;
 
+            top: 68px;
 
+            position: absolute;
 
+            background: #fff;
 
+            left: 50%;
 
+            -webkit-transform: translateX(-50%);
 
+            transform: translateX(-50%);
 
+
 
+            & > li {
 
+              &:hover {
 
+                background: #0688d2;
 
+                & > a {
 
+                  color: #fff;
 
+                }
 
+                .dropdown-submenu {
 
+                  display: block;
 
+                }
 
+              }
 
+
 
+              & > a {
 
+                display: block;
 
+                line-height: 50px;
 
+                text-align: center;
 
+                width: 128px;
 
+                font-size: 14px;
 
+              }
 
+            }
 
+
 
+            .submenu-toggle {
 
+              background: url(/img/icon-arrow-right.png) no-repeat;
 
+              background-position: 90% center;
 
+              background-size: 18px;
 
+            }
 
+
 
+            .dropdown-submenu {
 
+              display: none;
 
+              position: absolute;
 
+              top: 0;
 
+              left: 128px;
 
+              background: #fff;
 
+              width: 304px;
 
+              min-height: 200px;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              padding: 16px 24px 16px 23px;
 
+              border-left: 1px solid #e8e8e8;
 
+
 
+              & > li {
 
+                float: left;
 
+                margin: 16px 16px 0 0;
 
+
 
+                &:nth-child(2n) {
 
+                  margin-right: 0;
 
+                }
 
+
 
+                &:nth-child(1),
 
+                &:nth-child(2) {
 
+                  margin-top: 0;
 
+                }
 
+
 
+                & > a {
 
+                  display: block;
 
+                  width: 120px;
 
+                  line-height: 32px;
 
+                  text-align: center;
 
+                  background: #eff9ff;
 
+                  color: #0688d2;
 
+                  font-size: 14px;
 
+                }
 
+              }
 
+            }
 
+          }
 
         }
 
+      }
 
+    }
 
+  }
 
 
-        .menu {
 
-          display: block;
 
+  // 底部区域
 
+  .footer {
 
+    margin-top: 120px;
 
+    padding-top: 38px;
 
+    padding-bottom: 24px;
 
+    background: #1b1b1b;
 
+
 
+    .container {
 
+      .section {
 
+        margin-right: 180px;
 
+        .item {
 
+          position: relative;
 
+          color: rgba(255, 255, 255, 0.5);
 
+          margin-top: 20px;
 
+          padding-left: 30px;
 
+          font-size: 12px;
 
+
 
+          &::before {
 
+            content: '';
 
+            display: block;
 
+            width: 20px;
 
+            height: 20px;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 50%;
 
+            -webkit-transform: translateY(-50%);
 
+            transform: translateY(-50%);
 
+            background-repeat: no-repeat;
 
+            background-position: center;
 
+            background-size: 20px;
 
+          }
 
+
 
+          &.mobile {
 
+            &::before {
 
+              background-image: url(/img/icon-mobile.png);
 
+            }
 
+            span {
 
+              &:last-child {
 
+                margin-left: 16px;
 
+              }
 
+            }
 
+          }
 
+
 
+          &.email {
 
+            &::before {
 
+              background-image: url(/img/icon-email.png);
 
+            }
 
+          }
 
+
 
+          &.address {
 
+            &::before {
 
+              background-image: url(/img/icon-address.png);
 
+            }
 
+          }
 
         }
 
       }
 
 
-      & > a {
 
-        display: block;
 
-        line-height: 68px;
 
+      .nav {
 
+        margin-left: 110px;
 
+        li {
 
+          margin-top: 25px;
 
+          text-align: center;
 
+          &:first-child {
 
+            margin-top: 12px;
 
+          }
 
+          a {
 
+            font-size: 14px;
 
+            color: rgba(255, 255, 255, 0.5);
 
+
 
+            &:hover {
 
+              color: #0688d2;
 
+            }
 
+          }
 
+        }
 
       }
 
 
-      &::after {
 
-        content: '';
 
-        position: absolute;
 
-        display: none;
 
-        width: 32px;
 
-        height: 3px;
 
-        background: #0688d2;
 
-        left: 50%;
 
-        bottom: 0;
 
-        -webkit-transform: translateX(-50%);
 
-                transform: translateX(-50%);
 
+      .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;
 
+          text-align: center;
 
+        }
 
       }
 
+    }
 
+
 
+    .line {
 
+      width: 100%;
 
+      height: 1px;
 
+      background-color: rgba(255, 255, 255, 0.3);
 
+      margin: 32px 0 24px;
 
+    }
 
 
-      &.active {
 
-        & > a {
 
+    .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;
 
+      i {
 
+        display: block;
 
+        height: 10px;
 
+        width: 1px;
 
+        background-color: rgba(255, 255, 255, 0.4);
 
+        margin: 0 16px;
 
+      }
 
+      a {
 
+        color: rgba(255, 255, 255, 0.4);
 
+        font-size: 12px;
 
+        &:hover {
 
           color: #0688d2;
 
         }
 
+      }
 
+    }
 
 
-        &::after {
 
-          display: block;
 
-        }
 
+    .copyright {
 
+      margin-top: 20px;
 
+      text-align: center;
 
+      color: rgba(255, 255, 255, 0.4);
 
+      font-size: 12px;
 
+      a {
 
+        color: rgba(255, 255, 255, 0.8);
 
+        text-decoration: underline;
 
+      }
 
+      * {
 
+        margin: 0 24px;
 
       }
 
     }
 
+  }
 
+}
 
 
-    .menu {
 
-      display: none;
 
+@media screen and (max-width: 768px) {
 
+  html {
 
+    font-size: 50px;
 
+  }
 
+
 
+  .only-pc {
 
+    display: none !important;
 
+  }
 
+
 
+  .scroll-box {
 
+    overflow-x: auto;
 
+    white-space: nowrap;
 
+    font-size: 0;
 
+  }
 
+  // .mt18 {
 
+  //   margin-top: 18px;
 
+  // }
 
+
 
+  // .mr18 {
 
+  //   margin-right: 18px;
 
+  // }
 
+
 
+  // .mb18 {
 
+  //   margin-bottom: 18px;
 
+  // }
 
+
 
+  // .ml18 {
 
+  //   margin-left: 18px;
 
+  // }
 
+
 
+  .banner {
 
+    position: relative;
 
+    width: 100%;
 
+    height: 2.74rem;
 
+    overflow: hidden;
 
+
 
+    img {
 
       position: absolute;
 
-      background: #fff;
 
-      // border: 1px solid #f8f8f8;
 
-      min-width: 128px;
 
+      height: 2.74rem;
 
       left: 50%;
 
-      top: 68px;
 
-      -webkit-transform: translateX(-50%);
 
-              transform: translateX(-50%);
 
-      & > li {
 
-        &:hover {
 
-          background: #0688d2;
 
+      top: 50%;
 
+      -webkit-transform: translate(-50%, -50%);
 
+      transform: translate(-50%, -50%);
 
+    }
 
+  }
 
 
-          & > a {
 
-            color: #fff;
 
-          }
 
+  // 导航菜单
 
+  .navbar {
 
+    font-size: 0.26rem;
 
+    height: 1.04rem;
 
+    background: #fff;
 
+    // overflow-x: hidden;
 
+    position: -webkit-sticky;
 
+    position: sticky;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 90;
 
+
 
+    .navbar-header {
 
+      position: relative;
 
+      z-index: 2;
 
+      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;
 
+      background: #fff;
 
 
-          .submenu {
 
-            display: block;
 
-          }
 
+      .logo {
 
+        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: 2rem;
 
+        height: 1.04rem;
 
+        background: #0688d2;
 
+        h1 {
 
+          font-size: 0;
 
         }
 
-
 
-        & > a {
 
+        img {
 
           display: block;
 
-          font-size: 14px;
 
-          text-align: center;
 
-          line-height: 50px;
 
+          width: 1.14rem;
 
         }
 
+      }
 
 
-        &.dropdown > a {
 
-          background: url(/img/icon-arrow-right.png) no-repeat;
 
-          background-position: 88% center;
 
-          background-size: 16px;
 
+      .navbar-toggle {
 
+        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;
 
+        .name {
 
+          font-size: 0.3rem;
 
+          color: #0688d2;
 
+          margin-right: 0.16rem;
 
         }
 
+        .icon-bar {
 
+          display: inline-block;
 
+          width: 0.48rem;
 
+          height: 0.48rem;
 
+          background: url(/img/icon-menu.png) no-repeat center;
 
+          background-size: 0.42rem;
 
+          font-size: 0;
 
+          margin-right: 0.32rem;
 
+          margin-bottom: 0.03rem;
 
+        }
 
+        &[aria-expanded='true'] {
 
+          .icon-bar {
 
+            background-image: url(/img/icon-menu-close.png);
 
+            background-size: 0.48rem;
 
+          }
 
+          .name {
 
+            display: none;
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .navbar-collapse {
 
+      display: none;
 
+      position: absolute;
 
+      width: 100%;
 
+      height: 100vh;
 
+      overflow-y: auto;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      padding-left: 1.34rem;
 
+      right: 0;
 
+      top: 0;
 
+      z-index: 1;
 
+      background: transparent;
 
+
 
+      &::-webkit-scrollbar {
 
+        width: 2px;
 
+        height: 2px;
 
+        background-color: #f5f5f5;
 
+      }
 
+
 
+      &::-webkit-scrollbar-thumb {
 
+        border-radius: 2px;
 
+        background-color: #cccecf;
 
       }
 
 
-      .submenu {
 
-        display: none;
 
-        position: absolute;
 
-        top: 0;
 
-        right: 0;
 
+      .nav {
 
         background: #fff;
 
-        width: 306px;
 
-        min-height: 200px;
 
-        border-left: 1px solid #f8f8f8;
 
-        border-left-color: #e8e8e8;
 
-        -webkit-transform: translateX(100%) translateX(-1px);
 
-                transform: translateX(100%) translateX(-1px);
 
+        padding: 0.48rem;
 
+        padding-top: 1.04rem;
 
         -webkit-box-sizing: border-box;
 
-                box-sizing: border-box;
 
-        padding: 16px 24px;
 
-        & > li {
 
-          float: left;
 
-          margin: 16px 16px 0 0;
 
+        box-sizing: border-box;
 
+        min-height: 100vh;
 
 
-          &:nth-child(2n) {
 
-            margin-right: 0;
 
+        li {
 
+          a {
 
+            display: block;
 
           }
 
+        }
 
 
-          &:nth-child(-n + 2) {
 
-            margin-top: 0;
 
+        & > li {
 
+          border-top: 0.01rem solid #d8d8d8;
 
+          border-bottom: 0.01rem solid #d8d8d8;
 
+          & > a {
 
+            font-size: 0.3rem;
 
+            line-height: 1rem;
 
+          }
 
+        }
 
+        .dropdown {
 
+          .dropdown-toggle {
 
+            background-image: url(/img/icon-menu-arrow-down.png);
 
+            background-position: right center;
 
+            background-size: 0.48rem;
 
+            background-repeat: no-repeat;
 
           }
 
 
-          & > a {
 
-            display: block;
 
-            font-size: 14px;
 
-            width: 120px;
 
-            text-align: center;
 
-            line-height: 32px;
 
-            background: #f7f7f7;
 
+          &.open {
 
+            .dropdown-toggle {
 
+              background-image: url(/img/icon-menu-arrow-up.png);
 
+            }
 
+          }
 
 
-            &:hover {
 
-              background: #eff9ff;
 
-              color: #0688d2;
 
+          .dropdown-menu {
 
+            display: none;
 
+            padding-bottom: 0.24rem;
 
+            & > li {
 
+              & > a {
 
+                line-height: 0.66rem;
 
+                color: #666666;
 
+              }
 
+            }
 
+          }
 
+
 
+          .dropdown-submenu {
 
+            padding: 0.24rem 0;
 
+
 
+            li {
 
+              float: left;
 
+              margin-right: 0.4rem;
 
+              margin-top: 0.24rem;
 
+              &:nth-child(2n) {
 
+                margin-right: 0;
 
+              }
 
+              &:nth-child(-n + 2) {
 
+                margin-top: 0;
 
+              }
 
+              a {
 
+                line-height: 0.56rem;
 
+                width: 2.08rem;
 
+                height: 0.56rem;
 
+                background: #f7f7f7;
 
+                text-align: center;
 
+                color: #666666;
 
+              }
 
             }
 
           }
 
         }
 
       }
 
     }
 
   }
 
-}
 
 
-// 底部区域
 
-.footer {
 
-  margin-top: 120px;
 
-  padding-top: 38px;
 
-  padding-bottom: 24px;
 
-  background: #1b1b1b;
 
+  // 底部区域
 
+  .footer {
 
+    position: relative;
 
+    padding: 0.4rem;
 
+    background: #1b1b1b;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    margin-top: 1rem;
 
+
 
+    .container {
 
+      .title {
 
+        font-size: 0.3rem;
 
+        color: rgba(255, 255, 255, 0.8);
 
+      }
 
 
-  .container {
 
-    .section {
 
-      margin-right: 180px;
 
-      .item {
 
-        position: relative;
 
-        color: rgba(255, 255, 255, 0.5);
 
-        margin-top: 20px;
 
-        padding-left: 30px;
 
-        font-size: 12px;
 
+      .section {
 
+        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;
 
+        .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;
 
 
-        &::before {
 
-          content: '';
 
-          display: block;
 
-          width: 20px;
 
-          height: 20px;
 
-          position: absolute;
 
-          left: 0;
 
-          top: 50%;
 
-          -webkit-transform: translateY(-50%);
 
-                  transform: translateY(-50%);
 
-          background-repeat: no-repeat;
 
-          background-position: center;
 
-          background-size: 20px;
 
-        }
 
+          &:nth-child(2) {
 
+            margin-top: 0;
 
+          }
 
 
-        &.mobile {
 
           &::before {
 
-            background-image: url(/img/icon-mobile.png);
 
+            content: '';
 
+            display: block;
 
+            width: 0.4rem;
 
+            height: 0.4rem;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 50%;
 
+            -webkit-transform: translateY(-50%);
 
+            transform: translateY(-50%);
 
+            background-repeat: no-repeat;
 
+            background-position: center;
 
+            background-size: 0.4rem;
 
           }
 
-          span {
 
-            &:last-child {
 
-              margin-left: 16px;
 
+
 
+          &.mobile {
 
+            &::before {
 
+              background-image: url(/img/icon-mobile.png);
 
+            }
 
+            span {
 
+              &:last-child {
 
+                margin-left: 0.4rem;
 
+              }
 
             }
 
           }
 
-        }
 
 
-        &.email {
 
-          &::before {
 
-            background-image: url(/img/icon-email.png);
 
+          &.email {
 
+            &::before {
 
+              background-image: url(/img/icon-email.png);
 
+            }
 
           }
 
-        }
 
 
-        &.address {
 
-          &::before {
 
-            background-image: url(/img/icon-address.png);
 
+          &.address {
 
+            &::before {
 
+              background-image: url(/img/icon-address.png);
 
+            }
 
           }
 
         }
 
       }
 
-    }
 
 
-    .nav {
 
-      margin-left: 110px;
 
-      li {
 
-        margin-top: 25px;
 
-        text-align: center;
 
-        &:first-child {
 
-          margin-top: 12px;
 
-        }
 
-        a {
 
-          font-size: 14px;
 
-          color: rgba(255, 255, 255, 0.5);
 
-
 
-          &:hover {
 
-            color: #0688d2;
 
+      .nav {
 
+        .item {
 
+          float: left;
 
+          margin-right: 0.8rem;
 
+          margin-top: 0.32rem;
 
+          &:nth-child(4n) {
 
+            margin-right: 0;
 
+          }
 
+          a {
 
+            display: block;
 
+            color: rgba(255, 255, 255, 0.5);
 
+            font-size: 0.24rem;
 
           }
 
         }
 
       }
 
-    }
 
 
-    .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;
 
-        text-align: center;
 
+      .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;
 
+        }
 
       }
 
     }
 
-  }
 
-
 
-  .line {
 
-    width: 100%;
 
-    height: 1px;
 
-    background-color: rgba(255, 255, 255, 0.3);
 
-    margin: 32px 0 24px;
 
-  }
 
 
-  .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;
 
-    i {
 
-      display: block;
 
-      height: 10px;
 
-      width: 1px;
 
-      background-color: rgba(255, 255, 255, 0.4);
 
-      margin: 0 16px;
 
-    }
 
-    a {
 
+    .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);
 
-      font-size: 12px;
 
-      &:hover {
 
-        color: #0688d2;
 
+      font-size: 0.2rem;
 
+      padding: 0.4rem;
 
+      a {
 
+        width: 4.2rem;
 
+        color: rgba(255, 255, 255, 0.4);
 
+      }
 
+      * {
 
+        display: block;
 
+        margin-bottom: 0.16rem;
 
       }
 
     }
 
   }
 
-
 
-  .copyright {
 
-    margin-top: 20px;
 
-    text-align: center;
 
-    color: rgba(255, 255, 255, 0.4);
 
-    font-size: 12px;
 
-    a {
 
-      color: rgba(255, 255, 255, 0.8);
 
-      text-decoration: underline;
 
-    }
 
-    * {
 
-      margin: 0 24px;
 
-    }
 
-  }
 
-}
 
-
 
-@-webkit-keyframes rowup-left {
 
-  0% {
 
-    -webkit-transform: translate3d(0, 0, 0);
 
-    transform: translate3d(0, 0, 0);
 
-  }
 
-  100% {
 
-    -webkit-transform: translate3d(-600px, 0, 0);
 
-    transform: translate3d(-600px, 0, 0);
 
-  }
 
-}
 
-
 
-@keyframes rowup-left {
 
-  0% {
 
-    -webkit-transform: translate3d(0, 0, 0);
 
-    transform: translate3d(0, 0, 0);
 
-  }
 
-  100% {
 
-    -webkit-transform: translate3d(-600px, 0, 0);
 
-    transform: translate3d(-600px, 0, 0);
 
-  }
 
-}
 
-@-webkit-keyframes rowup-right {
 
-  0% {
 
-    -webkit-transform: translate3d(0, 0, 0);
 
-    transform: translate3d(0, 0, 0);
 
-  }
 
-  100% {
 
-    -webkit-transform: translate3d(600px, 0, 0);
 
-    transform: translate3d(600px, 0, 0);
 
-  }
 
-}
 
-@keyframes rowup-right {
 
-  0% {
 
-    -webkit-transform: translate3d(0, 0, 0);
 
-    transform: translate3d(0, 0, 0);
 
-  }
 
-  100% {
 
-    -webkit-transform: translate3d(600px, 0, 0);
 
-    transform: translate3d(600px, 0, 0);
 
-  }
 
 }

+ 65 - 27
css/brand-detail.css
Целия файл 

@@ -1,29 +1,67 @@
 
-.main {
 
-  padding-top: 50px;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    padding-top: 50px;
 
+  }
 
+  .main .title {
 
+    font-size: 28px;
 
+  }
 
+  .main .date {
 
+    font-size: 18px;
 
+    color: #b2b2b2;
 
+    margin-top: 16px;
 
+  }
 
+  .main .line {
 
+    width: 100%;
 
+    margin: 40px 0 70px;
 
+    position: relative;
 
+    height: 1px;
 
+    background-color: #d8d8d8;
 
+  }
 
+  .main .line::after {
 
+    content: "";
 
+    display: block;
 
+    width: 24px;
 
+    height: 2px;
 
+    background: #0688d2;
 
+  }
 
+  .main .detail p {
 
+    line-height: 34px;
 
+    margin: 32px 0;
 
+  }
 
 }
 
-.main .title {
 
-  font-size: 28px;
 
-}
 
-.main .date {
 
-  font-size: 18px;
 
-  color: #b2b2b2;
 
-  margin-top: 16px;
 
-}
 
-.main .line {
 
-  width: 100%;
 
-  margin: 40px 0 70px;
 
-  position: relative;
 
-  height: 1px;
 
-  background-color: #d8d8d8;
 
-}
 
-.main .line::after {
 
-  content: "";
 
-  display: block;
 
-  width: 24px;
 
-  height: 2px;
 
-  background: #0688d2;
 
-}
 
-.main .detail p {
 
-  line-height: 34px;
 
-  margin: 32px 0;
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    padding: 0.8rem 0.32rem;
 
+  }
 
+  .main .title {
 
+    font-size: 0.34rem;
 
+  }
 
+  .main .date {
 
+    font-size: 0.24rem;
 
+    color: #b2b2b2;
 
+    margin-top: 0.16rem;
 
+  }
 
+  .main .line {
 
+    width: 100%;
 
+    margin: 0.34rem 0 0.5rem;
 
+    position: relative;
 
+    height: 0.01rem;
 
+    background-color: #d8d8d8;
 
+  }
 
+  .main .line::after {
 
+    content: "";
 
+    display: block;
 
+    width: 0.4rem;
 
+    height: 0.03rem;
 
+    background: #0688d2;
 
+  }
 
+  .main .detail p {
 
+    line-height: 0.48rem;
 
+    margin: 0.32rem 0;
 
+    font-size: 0.26rem;
 
+    color: #404040;
 
+  }
 
+  .main .detail img {
 
+    max-width: 100%;
 
+  }
 
 }

+ 70 - 26
css/brand-detail.scss
Целия файл 

@@ -1,31 +1,75 @@
 
-.main {
 
-  padding-top: 50px;
 
-  .title {
 
-    font-size: 28px;
 
-  }
 
-  .date {
 
-    font-size: 18px;
 
-    color: #b2b2b2;
 
-    margin-top: 16px;
 
-  }
 
-  .line {
 
-    width: 100%;
 
-    margin: 40px 0 70px;
 
-    position: relative;
 
-    height: 1px;
 
-    background-color: #d8d8d8;
 
-    &::after {
 
-      content: '';
 
-      display: block;
 
-      width: 24px;
 
-      height: 2px;
 
-      background: #0688d2;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    padding-top: 50px;
 
+    .title {
 
+      font-size: 28px;
 
+    }
 
+    .date {
 
+      font-size: 18px;
 
+      color: #b2b2b2;
 
+      margin-top: 16px;
 
+    }
 
+    .line {
 
+      width: 100%;
 
+      margin: 40px 0 70px;
 
+      position: relative;
 
+      height: 1px;
 
+      background-color: #d8d8d8;
 
+      &::after {
 
+        content: '';
 
+        display: block;
 
+        width: 24px;
 
+        height: 2px;
 
+        background: #0688d2;
 
+      }
 
+    }
 
+    .detail {
 
+      p {
 
+        line-height: 34px;
 
+        margin: 32px 0;
 
+      }
 
     }
 
   }
 
-  .detail {
 
-    p {
 
-      line-height: 34px;
 
-      margin: 32px 0;
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    padding: 0.8rem 0.32rem;
 
+    .title {
 
+      font-size: 0.34rem;
 
+    }
 
+
 
+    .date {
 
+      font-size: 0.24rem;
 
+      color: #b2b2b2;
 
+      margin-top: 0.16rem;
 
+    }
 
+
 
+    .line {
 
+      width: 100%;
 
+      margin: 0.34rem 0 0.5rem;
 
+      position: relative;
 
+      height: 0.01rem;
 
+      background-color: #d8d8d8;
 
+      &::after {
 
+        content: '';
 
+        display: block;
 
+        width: 0.4rem;
 
+        height: 0.03rem;
 
+        background: #0688d2;
 
+      }
 
+    }
 
+    .detail {
 
+      p {
 
+        line-height: 0.48rem;
 
+        margin: 0.32rem 0;
 
+        font-size: 0.26rem;
 
+        color: #404040;
 
+      }
 
+
 
+      img {
 
+        max-width: 100%;
 
+      }
 
     }
 
   }
 
 }

+ 757 - 424
css/brand-ross.css
Целия файл 

@@ -1,428 +1,761 @@
 
-.advertising {
 
-  width: 100%;
 
-  height: 1055px;
 
-  -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;
 
-}
 
-.advertising .video-container {
 
-  position: relative;
 
-  width: 1200px;
 
-  height: 570px;
 
-  margin: 0 auto;
 
-  margin-top: 485px;
 
-  background: pink;
 
-}
 
-.advertising .video-container .play {
 
-  position: absolute;
 
-  width: 64px;
 
-  height: 64px;
 
-  border-radius: 50%;
 
-  z-index: 2;
 
-  bottom: 155px;
 
-  left: 50%;
 
-  -webkit-transform: translateX(-50%);
 
-  transform: translateX(-50%);
 
-  cursor: pointer;
 
-}
 
-.advertising .video-container video {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
+@media screen and (min-width: 768px) {
 
+  .advertising {
 
+    width: 100%;
 
+    height: 1055px;
 
+    -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;
 
+  }
 
+  .advertising .video-container {
 
+    position: relative;
 
+    width: 1200px;
 
+    height: 570px;
 
+    margin: 0 auto;
 
+    margin-top: 485px;
 
+    background: pink;
 
+  }
 
+  .advertising .video-container .play {
 
+    position: absolute;
 
+    width: 64px;
 
+    height: 64px;
 
+    border-radius: 50%;
 
+    z-index: 2;
 
+    bottom: 155px;
 
+    left: 50%;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+    cursor: pointer;
 
+  }
 
+  .advertising .video-container video {
 
+    display: block;
 
+    width: 100%;
 
+    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 {
 
-  height: 540px;
 
-}
 
-.main .about .content .swiper {
 
-  width: 720px;
 
-  height: 100%;
 
-  position: relative;
 
-}
 
-.main .about .content .swiper .swiper-prev,
 
+  .main .wrapper {
 
+    margin-top: 120px;
 
+  }
 
+  .main .wrapper .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+  }
 
+  .main .wrapper .content {
 
+    margin-top: 80px;
 
+  }
 
+  .main .about .content {
 
+    height: 540px;
 
+  }
 
+  .main .about .content .swiper {
 
+    width: 720px;
 
+    height: 100%;
 
+    position: relative;
 
+  }
 
+  .main .about .content .swiper .swiper-prev,
 
 .main .about .content .swiper .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 .about .content .swiper .swiper-next {
 
-  left: unset;
 
-  right: 0;
 
-  background: url(/img/icon-arrow-right.png) no-repeat center;
 
-}
 
-.main .about .content .swiper img {
 
-  width: 100%;
 
-  height: 540px;
 
-}
 
-.main .about .content .section {
 
-  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;
 
-  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;
 
-  -webkit-transition: width 0.4s;
 
-  transition: width 0.4s;
 
-}
 
-.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,
 
+    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 .about .content .swiper .swiper-next {
 
+    left: unset;
 
+    right: 0;
 
+    background: url(/img/icon-arrow-right.png) no-repeat center;
 
+  }
 
+  .main .about .content .swiper img {
 
+    width: 100%;
 
+    height: 540px;
 
+  }
 
+  .main .about .content .section {
 
+    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;
 
+    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%);
 
-  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;
 
-}
 
-.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 .therapy .content .item .active .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;
 
-}
 
-.main .therapy .content .item .active .info .tip {
 
-  font-size: 24px;
 
-  margin-bottom: 10px;
 
-}
 
-.main .therapy .content .item .active .info .subtip {
 
-  font-size: 16px;
 
-  margin-bottom: 60px;
 
-}
 
-.main .therapy .content .item .active .info .section {
 
-  width: 160px;
 
-  margin: 0 auto;
 
-  border: 1px solid #fff;
 
-  padding: 36px 0;
 
-}
 
-.main .therapy .content .item .active .info .section dl {
 
-  padding: 0;
 
-}
 
-.main .therapy .content .item .active .info .section dl dt {
 
-  margin-bottom: 24px;
 
-}
 
-.main .therapy .content .item .active .info .section dl dd {
 
-  margin: 0;
 
-  margin-top: 10px;
 
-}
 
-.main .application .content .item {
 
-  position: relative;
 
-  float: left;
 
-  width: 390px;
 
-  height: 390px;
 
-  margin-right: 15px;
 
-  margin-top: 15px;
 
-  overflow: hidden;
 
-}
 
-.main .application .content .item img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-  -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: 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;
 
-  width: 100%;
 
-  height: 100%;
 
-  background: rgba(0, 0, 0, 0.39);
 
-  z-index: 1;
 
-  top: 0;
 
-  left: 0;
 
-  -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 .application .content .item .active .info .tip {
 
-  font-size: 24px;
 
-  color: #fff;
 
-  text-align: center;
 
-}
 
-.main .application .content .item .active .info .line {
 
-  width: 28px;
 
-  height: 2px;
 
-  background: #fff;
 
-  margin: 24px auto;
 
-}
 
-.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;
 
-  color: #fff;
 
-  margin-top: 52px;
 
-  cursor: pointer;
 
-}
 
-.main .application .content .item:hover .active {
 
-  opacity: 1;
 
-}
 
-.main .application .content .item:hover img {
 
-  -webkit-transform: scale(1.06);
 
-  transform: scale(1.06);
 
-}
 
-.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: 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 .contact .content .cover {
 
-  width: 626px;
 
-  height: 418px;
 
-}
 
-.main .contact .content .cover 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;
 
+    -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%);
 
+    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;
 
+  }
 
+  .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 .therapy .content .item .active .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;
 
+  }
 
+  .main .therapy .content .item .active .info .tip {
 
+    font-size: 24px;
 
+    margin-bottom: 10px;
 
+  }
 
+  .main .therapy .content .item .active .info .subtip {
 
+    font-size: 16px;
 
+    margin-bottom: 60px;
 
+  }
 
+  .main .therapy .content .item .active .info .section {
 
+    width: 160px;
 
+    margin: 0 auto;
 
+    border: 1px solid #fff;
 
+    padding: 36px 0;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl {
 
+    padding: 0;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl dt {
 
+    margin-bottom: 24px;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl dd {
 
+    margin: 0;
 
+    margin-top: 10px;
 
+  }
 
+  .main .application .content .item {
 
+    position: relative;
 
+    float: left;
 
+    width: 390px;
 
+    height: 390px;
 
+    margin-right: 15px;
 
+    margin-top: 15px;
 
+    overflow: hidden;
 
+  }
 
+  .main .application .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+    -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: 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;
 
+    width: 100%;
 
+    height: 100%;
 
+    background: rgba(0, 0, 0, 0.39);
 
+    z-index: 1;
 
+    top: 0;
 
+    left: 0;
 
+    -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 .application .content .item .active .info .tip {
 
+    font-size: 24px;
 
+    color: #fff;
 
+    text-align: center;
 
+  }
 
+  .main .application .content .item .active .info .line {
 
+    width: 28px;
 
+    height: 2px;
 
+    background: #fff;
 
+    margin: 24px auto;
 
+  }
 
+  .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;
 
+    color: #fff;
 
+    margin-top: 52px;
 
+    cursor: pointer;
 
+  }
 
+  .main .application .content .item:hover .active {
 
+    opacity: 1;
 
+  }
 
+  .main .application .content .item:hover img {
 
+    -webkit-transform: scale(1.06);
 
+    transform: scale(1.06);
 
+  }
 
+  .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: 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 .contact .content .cover {
 
+    width: 626px;
 
+    height: 418px;
 
+  }
 
+  .main .contact .content .cover 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;
 
+    -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;
 
+  }
 
+  .advertising .video-container {
 
+    position: relative;
 
+    width: 6.86rem;
 
+    height: 3.26rem;
 
+    margin: 0 auto;
 
+    margin-top: 2.8rem;
 
+  }
 
+  .advertising .video-container .play {
 
+    position: absolute;
 
+    width: 64px;
 
+    height: 64px;
 
+    border-radius: 50%;
 
+    z-index: 2;
 
+    bottom: 155px;
 
+    left: 50%;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+    cursor: pointer;
 
+  }
 
+  .advertising .video-container video {
 
+    display: block;
 
+    width: 6.86rem;
 
+    height: 3.26rem;
 
+  }
 
+
 
+  .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 .content .section {
 
+    padding-bottom: 0.16rem;
 
+    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 .section .item .cover img {
 
+    display: block;
 
+    width: 5.83rem;
 
+    height: 4.37rem;
 
+  }
 
+  .main .about .content .section .item .num {
 
+    font-size: 0.4rem;
 
+    color: #fff;
 
+    text-align: center;
 
+    margin: 0.4rem 0 0.32rem;
 
+  }
 
+  .main .about .content .section .item .desc {
 
+    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;
 
+  }
 
+  .main .therapy .content::-webkit-scrollbar {
 
+    width: 2px;
 
+    height: 2px;
 
+    background-color: #f5f5f5;
 
+  }
 
+  .main .therapy .content::-webkit-scrollbar-thumb {
 
+    border-radius: 2px;
 
+    background-color: #cccecf;
 
+  }
 
+  .main .therapy .content .item {
 
+    display: inline-block;
 
+    width: 4.8rem;
 
+    height: 100%;
 
+    position: relative;
 
+    margin-left: 0.32rem;
 
+  }
 
+  .main .therapy .content .item:last-child {
 
+    margin-right: 0.32rem;
 
+  }
 
+  .main .therapy .content .item .cover {
 
+    display: none;
 
+  }
 
+  .main .therapy .content .item .active {
 
+    width: 4.8rem;
 
+    height: 100%;
 
+  }
 
+  .main .therapy .content .item .active img {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .therapy .content .item .active .info {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .therapy .content .item .active .info .tip {
 
+    font-size: 0.3rem;
 
+    margin-bottom: 0.12rem;
 
+    margin-top: 0.32rem;
 
+    font-weight: bold;
 
+  }
 
+  .main .therapy .content .item .active .info .subtip {
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+  }
 
+  .main .therapy .content .item .active .info .section {
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl {
 
+    padding: 0;
 
+    margin: 0;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl dt {
 
+    font-size: 0.24rem;
 
+    font-weight: bold;
 
+    margin-bottom: 0.24rem;
 
+  }
 
+  .main .therapy .content .item .active .info .section dl dd {
 
+    font-size: 0.24rem;
 
+    margin: 0;
 
+    margin-top: 0.16rem;
 
+    color: #505050;
 
+  }
 
+  .main .application .content {
 
+    padding-left: 0.32rem;
 
+  }
 
+  .main .application .content .item {
 
+    position: relative;
 
+    float: left;
 
+    width: 2.23rem;
 
+    height: 2.23rem;
 
+    margin-right: 0.08rem;
 
+    margin-top: 0.08rem;
 
+    overflow: hidden;
 
+  }
 
+  .main .application .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .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 .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 {
 
+    position: absolute;
 
+    width: 100%;
 
+    height: 100%;
 
+    top: 0;
 
+    left: 0;
 
+  }
 
+  .main .application .content .item .active .info .num {
 
+    display: none;
 
+  }
 
+  .main .application .content .item .active .info .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;
 
+  }
 
+  .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;
 
+  }
 
+  .main .contact .content {
 
+    padding: 0 0.32rem;
 
+  }
 
+  .main .contact .content .cover {
 
+    width: 100%;
 
+    height: 4.18rem;
 
+    float: unset !important;
 
+  }
 
+  .main .contact .content .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .contact .content .form-container {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    float: unset !important;
 
+  }
 
+  .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 .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 .contact .content .form-container .submit:hover {
 
+    background: #e78d0d;
 
+  }
 
 }

+ 777 - 377
css/brand-ross.scss
Целия файл 

@@ -1,497 +1,897 @@
 
-.advertising {
 
-  width: 100%;
 
-  height: 1055px;
 
-  -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;
 
-
 
-  .video-container {
 
-    position: relative;
 
-    width: 1200px;
 
-    height: 570px;
 
-    margin: 0 auto;
 
-    margin-top: 485px;
 
-    background: pink;
 
-
 
-    .play {
 
-      position: absolute;
 
-      width: 64px;
 
-      height: 64px;
 
-      border-radius: 50%;
 
-      z-index: 2;
 
-      bottom: 155px;
 
-      left: 50%;
 
-      -webkit-transform: translateX(-50%);
 
-      transform: translateX(-50%);
 
-      cursor: pointer;
 
-    }
 
+@media screen and(min-width:768px) {
 
+  .advertising {
 
+    width: 100%;
 
+    height: 1055px;
 
+    -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;
 
+
 
+    .video-container {
 
+      position: relative;
 
+      width: 1200px;
 
+      height: 570px;
 
+      margin: 0 auto;
 
+      margin-top: 485px;
 
+      background: pink;
 
+
 
+      .play {
 
+        position: absolute;
 
+        width: 64px;
 
+        height: 64px;
 
+        border-radius: 50%;
 
+        z-index: 2;
 
+        bottom: 155px;
 
+        left: 50%;
 
+        -webkit-transform: translateX(-50%);
 
+        transform: translateX(-50%);
 
+        cursor: pointer;
 
+      }
 
 
-    video {
 
-      display: block;
 
-      width: 100%;
 
-      height: 100%;
 
+      video {
 
+        display: block;
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
     }
 
   }
 
-}
 
 
-.main {
 
-  .wrapper {
 
-    margin-top: 120px;
 
-    .title {
 
-      font-size: 34px;
 
-      text-align: center;
 
-    }
 
+  .main {
 
+    .wrapper {
 
+      margin-top: 120px;
 
+      .title {
 
+        font-size: 34px;
 
+        text-align: center;
 
+      }
 
 
-    .content {
 
-      margin-top: 80px;
 
+      .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;
 
-        }
 
+    .about {
 
+      .content {
 
+        height: 540px;
 
+        .swiper {
 
+          width: 720px;
 
+          height: 100%;
 
+          position: relative;
 
 
-        .swiper-next {
 
-          left: unset;
 
-          right: 0;
 
-          background: url(/img/icon-arrow-right.png) no-repeat 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;
 
+          }
 
 
-        img {
 
-          width: 100%;
 
-          height: 540px;
 
+          .swiper-next {
 
+            left: unset;
 
+            right: 0;
 
+            background: url(/img/icon-arrow-right.png) no-repeat center;
 
+          }
 
+
 
+          img {
 
+            width: 100%;
 
+            height: 540px;
 
+          }
 
         }
 
-      }
 
 
-      .section {
 
-        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;
 
+        .section {
 
+          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;
 
 
-        .item {
 
-          width: 390px;
 
-          margin: 0 auto;
 
-          margin-top: 73px;
 
-          display: none;
 
+          .item {
 
+            width: 390px;
 
+            margin: 0 auto;
 
+            margin-top: 73px;
 
+            display: none;
 
 
-          .num {
 
-            font-size: 32px;
 
-            color: #fff;
 
-            text-align: center;
 
-          }
 
+            .num {
 
+              font-size: 32px;
 
+              color: #fff;
 
+              text-align: center;
 
+            }
 
 
-          .line {
 
-            width: 1px;
 
-            height: 24px;
 
-            margin: 25px auto 40px;
 
-            background: #fff;
 
-          }
 
+            .line {
 
+              width: 1px;
 
+              height: 24px;
 
+              margin: 25px auto 40px;
 
+              background: #fff;
 
+            }
 
 
-          .desc {
 
-            font-size: 16px;
 
-            color: #fff;
 
-            line-height: 40px;
 
+            .desc {
 
+              font-size: 16px;
 
+              color: #fff;
 
+              line-height: 40px;
 
+            }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
 
-  .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;
 
-        -webkit-transition: width 0.4s;
 
-        transition: width 0.4s;
 
+    .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 {
 
-          width: 480px;
 
-          .cover {
 
-            opacity: 0;
 
+          &.hover {
 
+            width: 480px;
 
+            .cover {
 
+              opacity: 0;
 
+            }
 
+            .active {
 
+              opacity: 1;
 
+            }
 
           }
 
-          .active {
 
-            opacity: 1;
 
+
 
+          &:first-child {
 
+            .cover {
 
+              border-left: 0;
 
+            }
 
           }
 
-        }
 
 
-        &:first-child {
 
-          .cover {
 
-            border-left: 0;
 
+          .cover,
 
+          .active {
 
+            -webkit-transition: opacity 0.4s;
 
+            transition: opacity 0.4s;
 
           }
 
-        }
 
 
-        .cover,
 
-        .active {
 
-          -webkit-transition: opacity 0.4s;
 
-          transition: opacity 0.4s;
 
-        }
 
+          .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;
 
 
-        .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;
 
+            }
 
 
-          .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;
 
+            }
 
 
-          .line {
 
-            width: 24px;
 
-            height: 2px;
 
-            background: #f3920d;
 
-            margin: 0 auto;
 
+            img {
 
+              position: absolute;
 
+              width: 128px;
 
+              height: 128px;
 
+              bottom: 44px;
 
+              left: 50%;
 
+              -webkit-transform: translateX(-50%);
 
+              transform: translateX(-50%);
 
+            }
 
           }
 
 
-          img {
 
+          .active {
 
             position: absolute;
 
-            width: 128px;
 
-            height: 128px;
 
-            bottom: 44px;
 
             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;
 
+                  }
 
+                }
 
+              }
 
+            }
 
           }
 
         }
 
+      }
 
+    }
 
 
-        .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;
 
+    .application {
 
+      .content {
 
+        .item {
 
+          position: relative;
 
+          float: left;
 
+          width: 390px;
 
+          height: 390px;
 
+          margin-right: 15px;
 
+          margin-top: 15px;
 
+          overflow: hidden;
 
 
           img {
 
+            display: block;
 
             width: 100%;
 
             height: 100%;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
+          }
 
+
 
+          &: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;
 
           }
 
 
-          .info {
 
+          .active {
 
+            opacity: 0;
 
             position: absolute;
 
-            left: 0;
 
-            top: 0;
 
             width: 100%;
 
             height: 100%;
 
+            background: rgba(0, 0, 0, 0.39);
 
+            z-index: 1;
 
+            top: 0;
 
+            left: 0;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
+
 
             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;
 
+            -webkit-box-orient: vertical;
 
+            -webkit-box-direction: normal;
 
+            -ms-flex-direction: column;
 
+            flex-direction: column;
 
+
 
+            .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;
 
+              }
 
             }
 
-            .subtip {
 
-              font-size: 16px;
 
-              margin-bottom: 60px;
 
+          }
 
+
 
+          &:hover {
 
+            .active {
 
+              opacity: 1;
 
             }
 
-            .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;
 
-                }
 
-              }
 
+
 
+            img {
 
+              -webkit-transform: scale(1.06);
 
+              transform: scale(1.06);
 
             }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
-
 
-  .application {
 
-    .content {
 
-      .item {
 
-        position: relative;
 
-        float: left;
 
-        width: 390px;
 
-        height: 390px;
 
-        margin-right: 15px;
 
-        margin-top: 15px;
 
-        overflow: hidden;
 
 
+    .distribution {
 
+      .content {
 
         img {
 
           display: block;
 
           width: 100%;
 
-          height: 100%;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
-        }
 
-
 
-        &: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;
 
-          width: 100%;
 
-          height: 100%;
 
-          background: rgba(0, 0, 0, 0.39);
 
-          z-index: 1;
 
-          top: 0;
 
-          left: 0;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
-
 
+        .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;
 
-
 
-          .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;
 
+          -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;
 
             }
 
-            .tip {
 
-              font-size: 24px;
 
-              color: #fff;
 
-              text-align: center;
 
+
 
+            .row.company {
 
+              background-image: url(/img/icon-company.png);
 
             }
 
-            .line {
 
-              width: 28px;
 
-              height: 2px;
 
-              background: #fff;
 
-              margin: 24px auto;
 
+
 
+            .row.doctor {
 
+              background-image: url(/img/icon-doctor.png);
 
             }
 
-            .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;
 
+
 
+            .row.heart {
 
+              background-image: url(/img/icon-heart.png);
 
+            }
 
+
 
+            .row:last-child {
 
+              font-size: 14px;
 
+              color: #999;
 
+              margin-top: 12px;
 
             }
 
           }
 
         }
 
+      }
 
+    }
 
 
-        &:hover {
 
-          .active {
 
-            opacity: 1;
 
+    .contact {
 
+      .content {
 
+        .cover {
 
+          width: 626px;
 
+          height: 418px;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
           }
 
+        }
 
 
-          img {
 
-            -webkit-transform: scale(1.06);
 
-            transform: scale(1.06);
 
+        .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;
 
+          }
 
+
 
+          .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;
 
+
 
+            &:hover {
 
+              background: #e78d0d;
 
+            }
 
           }
 
         }
 
       }
 
     }
 
   }
 
+}
 
 
-  .distribution {
 
-    .content {
 
-      img {
 
+@media screen and(max-width:768px) {
 
+  .advertising {
 
+    width: 100%;
 
+    height: 5.45rem;
 
+    -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;
 
+
 
+    .video-container {
 
+      position: relative;
 
+      width: 6.86rem;
 
+      height: 3.26rem;
 
+      margin: 0 auto;
 
+      margin-top: 2.8rem;
 
+
 
+      .play {
 
+        position: absolute;
 
+        width: 64px;
 
+        height: 64px;
 
+        border-radius: 50%;
 
+        z-index: 2;
 
+        bottom: 155px;
 
+        left: 50%;
 
+        -webkit-transform: translateX(-50%);
 
+        transform: translateX(-50%);
 
+        cursor: pointer;
 
+      }
 
+
 
+      video {
 
         display: block;
 
-        width: 100%;
 
+        width: 6.86rem;
 
+        height: 3.26rem;
 
       }
 
+    }
 
+  }
 
 
-      .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 {
 
+    .wrapper {
 
+      margin-top: 1.2rem;
 
+      .title {
 
+        font-size: 0.34rem;
 
+        text-align: center;
 
+      }
 
+
 
+      .content {
 
+        margin-top: 0.4rem;
 
+      }
 
+    }
 
+
 
+    .about {
 
+      .content {
 
+        .swiper {
 
+          display: none;
 
+        }
 
+        .section {
 
+          padding-bottom: 0.16rem;
 
+          float: unset !important;
 
+          
+          &::-webkit-scrollbar {
 
+            width: 2px;
 
+            height: 2px;
 
+            background-color: #f5f5f5;
 
+          }
 
 
-        .line {
 
-          width: 1px;
 
-          height: 12px;
 
-          background: #b2b2b2;
 
-          -webkit-transform: translateY(52px);
 
-          transform: translateY(52px);
 
+          &::-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;
 
+            }
 
+
 
+            .cover {
 
+              width: 5.83rem;
 
+              height: 4.37rem;
 
+
 
+              img {
 
+                display: block;
 
+                width: 5.83rem;
 
+                height: 4.37rem;
 
+              }
 
+            }
 
+
 
+            .num {
 
+              font-size: 0.4rem;
 
+              color: #fff;
 
+              text-align: center;
 
+              margin: 0.4rem 0 0.32rem;
 
+            }
 
+
 
+            .desc {
 
+              font-size: 0.24rem;
 
+              color: #fff;
 
+              line-height: 0.4rem;
 
+              padding: 0 0.4rem;
 
+              white-space: initial;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .therapy {
 
+      // background: #f7f7f7 url(/img/about-bg.png) no-repeat top center;
 
+      background: #f7f7f7;
 
+      background-size: 7.5rem auto;
 
+      padding-top: 0.8rem;
 
+      .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: -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;
 
+          display: inline-block;
 
+          width: 4.8rem;
 
+          height: 100%;
 
+          position: relative;
 
+          margin-left: 0.32rem;
 
+
 
+          &:last-child {
 
+            margin-right: 0.32rem;
 
+          }
 
+
 
+          .cover {
 
+            display: none;
 
+          }
 
+
 
+          .active {
 
+            width: 4.8rem;
 
+            height: 100%;
 
 
-          .row:first-child {
 
-            padding-left: 36px;
 
-            background: url(/img/icon-star.png) no-repeat left center;
 
-            line-height: 37px;
 
-            font-size: 28px;
 
+            img {
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+
 
+            .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;
 
+                  }
 
+                }
 
+              }
 
+            }
 
           }
 
+        }
 
+      }
 
+    }
 
+
 
+    .application {
 
+      .content {
 
+        padding-left: 0.32rem;
 
+        .item {
 
+          position: relative;
 
+          float: left;
 
+          width: 2.23rem;
 
+          height: 2.23rem;
 
+          margin-right: 0.08rem;
 
+          margin-top: 0.08rem;
 
+          overflow: hidden;
 
 
-          .row.company {
 
-            background-image: url(/img/icon-company.png);
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
           }
 
 
-          .row.doctor {
 
-            background-image: url(/img/icon-doctor.png);
 
+          &:nth-child(-n + 3) {
 
+            margin-top: 0;
 
+          }
 
+          &:nth-child(5),
 
+          &:nth-child(6) {
 
+            width: 4.55rem;
 
           }
 
 
-          .row.heart {
 
-            background-image: url(/img/icon-heart.png);
 
+          &:nth-child(3),
 
+          &:nth-child(5),
 
+          &:nth-child(7) {
 
+            margin-right: 0;
 
           }
 
 
-          .row:last-child {
 
-            font-size: 14px;
 
-            color: #999;
 
-            margin-top: 12px;
 
+          .active {
 
+            position: absolute;
 
+            width: 100%;
 
+            height: 100%;
 
+            top: 0;
 
+            left: 0;
 
+
 
+            .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;
 
+              }
 
+            }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
 
-  .contact {
 
-    .content {
 
-      .cover {
 
-        width: 626px;
 
-        height: 418px;
 
+    .distribution {
 
+      .content {
 
         img {
 
           display: block;
 
           width: 100%;
 
-          height: 100%;
 
+        }
 
+
 
+        .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);
 
+            }
 
+
 
+            .row:last-child {
 
+              font-size: 0.2rem;
 
+              color: #999;
 
+              margin-top: 0.16rem;
 
+            }
 
+          }
 
         }
 
       }
 
+    }
 
 
-      .form-container {
 
-        -webkit-box-sizing: border-box;
 
-        box-sizing: border-box;
 
-        textarea {
 
-          display: block;
 
-          width: 526px;
 
-          height: 344px;
 
+    .contact {
 
+      .content {
 
+        padding: 0 0.32rem;
 
+        .cover {
 
+          width: 100%;
 
+          height: 4.18rem;
 
+          float: unset !important;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
+          }
 
+        }
 
+
 
+        .form-container {
 
           -webkit-box-sizing: border-box;
 
           box-sizing: border-box;
 
-          padding: 12px;
 
-          line-height: 26px;
 
-          font-size: 16px;
 
-          border-color: #dedede;
 
-        }
 
+          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;
 
+          }
 
 
-        .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;
 
+          .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;
 
+            &:hover {
 
+              background: #e78d0d;
 
+            }
 
           }
 
         }
 
       }

+ 140 - 74
css/brand.css
Целия файл 

@@ -1,76 +1,142 @@
 
-.main .brand {
 
-  margin-top: 60px;
 
+@media screen and (min-width: 768px) {
 
+  .main .brand {
 
+    margin-top: 60px;
 
+  }
 
+  .main .brand:first-child {
 
+    margin-top: 120px;
 
+  }
 
+  .main .brand .container {
 
+    position: relative;
 
+  }
 
+  .main .brand .cover {
 
+    width: 880px;
 
+    height: 420px;
 
+    background: pink;
 
+  }
 
+  .main .brand .content {
 
+    position: absolute;
 
+    right: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-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;
 
+    width: 360px;
 
+    height: 340px;
 
+    border: 3px solid #e8e8e8;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    background: #fff;
 
+  }
 
+  .main .brand .content .brand-logo {
 
+    position: relative;
 
+    width: 174px;
 
+    height: 106px;
 
+    background: skyblue;
 
+    overflow: hidden;
 
+  }
 
+  .main .brand .content .brand-logo img {
 
+    display: block;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+  .main .brand .content .name {
 
+    font-size: 16px;
 
+    color: #505050;
 
+    margin: 24px 0 32px;
 
+  }
 
+  .main .brand .content .link {
 
+    width: 160px;
 
+    height: 48px;
 
+    background: #f7f7f7;
 
+    opacity: 1;
 
+    font-size: 16px;
 
+    color: #505050;
 
+    text-align: center;
 
+    line-height: 48px;
 
+    cursor: pointer;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .brand .content .link:hover {
 
+    background: #eee;
 
+  }
 
 }
 
-.main .brand:first-child {
 
-  margin-top: 120px;
 
-}
 
-.main .brand .container {
 
-  position: relative;
 
-}
 
-.main .brand .cover {
 
-  width: 880px;
 
-  height: 420px;
 
-  background: pink;
 
-}
 
-.main .brand .content {
 
-  position: absolute;
 
-  right: 0;
 
-  top: 50%;
 
-  -webkit-transform: translateY(-50%);
 
-  transform: translateY(-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;
 
-  width: 360px;
 
-  height: 340px;
 
-  border: 3px solid #e8e8e8;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  background: #fff;
 
-}
 
-.main .brand .content .brand-logo {
 
-  position: relative;
 
-  width: 174px;
 
-  height: 106px;
 
-  background: skyblue;
 
-  overflow: hidden;
 
-}
 
-.main .brand .content .brand-logo img {
 
-  display: block;
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  -webkit-transform: translate(-50%, -50%);
 
-  transform: translate(-50%, -50%);
 
-}
 
-.main .brand .content .name {
 
-  font-size: 16px;
 
-  color: #505050;
 
-  margin: 24px 0 32px;
 
-}
 
-.main .brand .content .link {
 
-  width: 160px;
 
-  height: 48px;
 
-  background: #f7f7f7;
 
-  opacity: 1;
 
-  font-size: 16px;
 
-  color: #505050;
 
-  text-align: center;
 
-  line-height: 48px;
 
-  cursor: pointer;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .brand .content .link:hover {
 
-  background: #eee;
 
+@media screen and (max-width: 768px) {
 
+  .main .brand {
 
+    width: 6.86rem;
 
+    margin: 0 auto;
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .brand:first-child {
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main .brand .cover {
 
+    width: 100%;
 
+    height: 3.28rem;
 
+  }
 
+  .main .brand .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .brand .content {
 
+    position: relative;
 
+    background: #fff;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #e8e8e8;
 
+    border-top: 0;
 
+    padding: 0.32rem 0.4rem;
 
+  }
 
+  .main .brand .content .brand-logo {
 
+    position: relative;
 
+    width: 1.48rem;
 
+    height: 0.92rem;
 
+    background: skyblue;
 
+    overflow: hidden;
 
+  }
 
+  .main .brand .content .brand-logo img {
 
+    display: block;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    height: 0.92rem;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+  .main .brand .content .name {
 
+    font-size: 0.26rem;
 
+    color: #505050;
 
+  }
 
+  .main .brand .content .link {
 
+    position: absolute;
 
+    right: 0.4rem;
 
+    bottom: 0.32rem;
 
+    width: 1.8rem;
 
+    height: 0.56rem;
 
+    background: #f7f7f7;
 
+    opacity: 1;
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+    text-align: center;
 
+    line-height: 0.56rem;
 
+  }
 
+  .main .brand .content .link:hover {
 
+    background: #eee;
 
+  }
 
 }

+ 145 - 69
css/brand.scss
Целия файл 

@@ -1,84 +1,160 @@
 
-.main {
 
-  .brand {
 
-    margin-top: 60px;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    .brand {
 
+      margin-top: 60px;
 
 
-    &:first-child {
 
-      margin-top: 120px;
 
-    }
 
+      &:first-child {
 
+        margin-top: 120px;
 
+      }
 
 
-    .container {
 
-      position: relative;
 
-    }
 
+      .container {
 
+        position: relative;
 
+      }
 
+
 
+      .cover {
 
+        width: 880px;
 
+        height: 420px;
 
+        background: pink;
 
+      }
 
+
 
+      .content {
 
+        position: absolute;
 
+        right: 0;
 
+        top: 50%;
 
+        -webkit-transform: translateY(-50%);
 
+        transform: translateY(-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;
 
+        width: 360px;
 
+        height: 340px;
 
+        border: 3px solid #e8e8e8;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        background: #fff;
 
+        .brand-logo {
 
+          position: relative;
 
+          width: 174px;
 
+          height: 106px;
 
+          background: skyblue;
 
+          overflow: hidden;
 
 
-    .cover {
 
-      width: 880px;
 
-      height: 420px;
 
-      background: pink;
 
+          img {
 
+            display: block;
 
+            position: absolute;
 
+            left: 50%;
 
+            top: 50%;
 
+            -webkit-transform: translate(-50%, -50%);
 
+            transform: translate(-50%, -50%);
 
+          }
 
+        }
 
+
 
+        .name {
 
+          font-size: 16px;
 
+          color: #505050;
 
+          margin: 24px 0 32px;
 
+        }
 
+
 
+        .link {
 
+          width: 160px;
 
+          height: 48px;
 
+          background: #f7f7f7;
 
+          opacity: 1;
 
+          font-size: 16px;
 
+          color: #505050;
 
+          text-align: center;
 
+          line-height: 48px;
 
+          cursor: pointer;
 
+          -webkit-transition: all 0.4s;
 
+          transition: all 0.4s;
 
+
 
+          &:hover {
 
+            background: #eee;
 
+          }
 
+        }
 
+      }
 
     }
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    .brand {
 
+      width: 6.86rem;
 
+      margin: 0 auto;
 
+      margin-top: 0.4rem;
 
 
-    .content {
 
-      position: absolute;
 
-      right: 0;
 
-      top: 50%;
 
-      -webkit-transform: translateY(-50%);
 
-      transform: translateY(-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;
 
-      width: 360px;
 
-      height: 340px;
 
-      border: 3px solid #e8e8e8;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
-      background: #fff;
 
-      .brand-logo {
 
-        position: relative;
 
-        width: 174px;
 
-        height: 106px;
 
-        background: skyblue;
 
-        overflow: hidden;
 
+      &:first-child {
 
+        margin-top: 0.8rem;
 
+      }
 
+
 
+      .cover {
 
+        width: 100%;
 
+        height: 3.28rem;
 
 
         img {
 
           display: block;
 
-          position: absolute;
 
-          left: 50%;
 
-          top: 50%;
 
-          -webkit-transform: translate(-50%, -50%);
 
-          transform: translate(-50%, -50%);
 
+          width: 100%;
 
+          height: 100%;
 
         }
 
       }
 
 
-      .name {
 
-        font-size: 16px;
 
-        color: #505050;
 
-        margin: 24px 0 32px;
 
-      }
 
+      .content {
 
+        position: relative;
 
+        background: #fff;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        border: 1px solid #e8e8e8;
 
+        border-top: 0;
 
+        padding: 0.32rem 0.4rem;
 
+        .brand-logo {
 
+          position: relative;
 
+          width: 1.48rem;
 
+          height: 0.92rem;
 
+          background: skyblue;
 
+          overflow: hidden;
 
+
 
+          img {
 
+            display: block;
 
+            position: absolute;
 
+            left: 50%;
 
+            top: 50%;
 
+            height: 0.92rem;
 
+            -webkit-transform: translate(-50%, -50%);
 
+            transform: translate(-50%, -50%);
 
+          }
 
+        }
 
+
 
+        .name {
 
+          font-size: 0.26rem;
 
+          color: #505050;
 
+        }
 
+
 
+        .link {
 
+          position: absolute;
 
+          right: 0.4rem;
 
+          bottom: 0.32rem;
 
+          width: 1.8rem;
 
+          height: 0.56rem;
 
+          background: #f7f7f7;
 
+          opacity: 1;
 
+          font-size: 0.24rem;
 
+          color: #505050;
 
+          text-align: center;
 
+          line-height: 0.56rem;
 
 
-      .link {
 
-        width: 160px;
 
-        height: 48px;
 
-        background: #f7f7f7;
 
-        opacity: 1;
 
-        font-size: 16px;
 
-        color: #505050;
 
-        text-align: center;
 
-        line-height: 48px;
 
-        cursor: pointer;
 
-        -webkit-transition: all 0.4s;
 
-        transition: all 0.4s;
 
-
 
-        &:hover {
 
-          background: #eee;
 
+          &:hover {
 
+            background: #eee;
 
+          }
 
         }
 
       }
 
     }

+ 107 - 56
css/case.css
Целия файл 

@@ -1,60 +1,111 @@
 
-.title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-  margin-top: 100px;
 
-}
 
+@media screen and (min-width: 768px) {
 
+  .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+    margin-top: 100px;
 
+  }
 
 
-.main .case {
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .case:nth-child(1) {
 
-  padding-top: 80px !important;
 
-}
 
-.main .case:nth-child(odd) {
 
-  height: 690px;
 
-  padding: 120px 0;
 
-}
 
-.main .case:nth-child(odd) .cover {
 
-  width: 668px;
 
-  height: 410px;
 
-}
 
-.main .case:nth-child(even) {
 
-  height: 720px;
 
-  padding: 162px 0;
 
-  background: url(/img/case-bg.png) no-repeat center;
 
-  background-size: auto 720px;
 
-}
 
-.main .case:nth-child(even) .cover {
 
-  width: 568px;
 
-  height: 397px;
 
-}
 
-.main .case .cover {
 
-  background: pink;
 
-}
 
-.main .case .content {
 
-  position: relative;
 
-  background: skyblue;
 
-  width: 490px;
 
-  height: 410px;
 
-  margin-top: 50px;
 
-}
 
-.main .case .content img {
 
-  display: block;
 
-  width: 580px;
 
-  height: 516px;
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  -webkit-transform: translate(-50%, -50%);
 
-  transform: translate(-50%, -50%);
 
-}
 
-.main .case .cover img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
+  .main .case {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .case:nth-child(1) {
 
+    padding-top: 80px !important;
 
+  }
 
+  .main .case:nth-child(odd) {
 
+    height: 690px;
 
+    padding: 120px 0;
 
+  }
 
+  .main .case:nth-child(odd) .cover {
 
+    width: 668px;
 
+    height: 410px;
 
+  }
 
+  .main .case:nth-child(even) {
 
+    height: 720px;
 
+    padding: 162px 0;
 
+    background: url(/img/case-bg.png) no-repeat center;
 
+    background-size: auto 720px;
 
+  }
 
+  .main .case:nth-child(even) .cover {
 
+    width: 568px;
 
+    height: 397px;
 
+  }
 
+  .main .case .cover {
 
+    background: pink;
 
+  }
 
+  .main .case .content {
 
+    position: relative;
 
+    background: skyblue;
 
+    width: 490px;
 
+    height: 410px;
 
+    margin-top: 50px;
 
+  }
 
+  .main .case .content img {
 
+    display: block;
 
+    width: 580px;
 
+    height: 516px;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+  .main .case .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }
 
+@media screen and (max-width: 768px) {
 
+  .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+    margin-top: 0.8rem;
 
+  }
 
+
 
+  .main .case {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .case:nth-child(1) {
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main .case .content {
 
+    position: relative;
 
+    margin: 0 auto;
 
+    width: 6.14rem;
 
+    height: 3.77rem;
 
+    float: unset !important;
 
+    -webkit-transform: translateY(-28%);
 
+    transform: translateY(-28%);
 
+  }
 
+  .main .case .content img {
 
+    display: block;
 
+    width: 6.14rem;
 
+    height: 3.77rem;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+  }
 
+  .main .case .cover {
 
+    float: unset !important;
 
+    margin: 0 auto;
 
+    width: 6.14rem;
 
+    height: 3.77rem;
 
+  }
 
+  .main .case .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
 
-.footer {
 
-  margin-top: 0;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 109 - 51
css/case.scss
Целия файл 

@@ -1,67 +1,125 @@
 
-.title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-  margin-top: 100px;
 
-}
 
-.main {
 
-  .case {
 
-    -webkit-box-sizing: border-box;
 
-    box-sizing: border-box;
 
+@media screen and (min-width: 768px) {
 
+  .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+    margin-top: 100px;
 
+  }
 
+  .main {
 
+    .case {
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
 
-    &:nth-child(1) {
 
-      padding-top: 80px !important;
 
-    }
 
+      &:nth-child(1) {
 
+        padding-top: 80px !important;
 
+      }
 
 
-    &:nth-child(odd) {
 
-      height: 690px;
 
-      padding: 120px 0;
 
+      &:nth-child(odd) {
 
+        height: 690px;
 
+        padding: 120px 0;
 
+        .cover {
 
+          width: 668px;
 
+          height: 410px;
 
+        }
 
+      }
 
+      &:nth-child(even) {
 
+        height: 720px;
 
+        padding: 162px 0;
 
+        background: url(/img/case-bg.png) no-repeat center;
 
+        background-size: auto 720px;
 
+        .cover {
 
+          width: 568px;
 
+          height: 397px;
 
+        }
 
+      }
 
       .cover {
 
-        width: 668px;
 
+        background: pink;
 
+      }
 
+      .content {
 
+        position: relative;
 
+        background: skyblue;
 
+        width: 490px;
 
         height: 410px;
 
+        margin-top: 50px;
 
+
 
+        img {
 
+          display: block;
 
+          width: 580px;
 
+          height: 516px;
 
+          position: absolute;
 
+          left: 50%;
 
+          top: 50%;
 
+          -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+        }
 
       }
 
-    }
 
-    &:nth-child(even) {
 
-      height: 720px;
 
-      padding: 162px 0;
 
-      background: url(/img/case-bg.png) no-repeat center;
 
-      background-size: auto 720px;
 
+
 
       .cover {
 
-        width: 568px;
 
-        height: 397px;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
     }
 
-    .cover {
 
-      background: pink;
 
-    }
 
-    .content {
 
-      position: relative;
 
-      background: skyblue;
 
-      width: 490px;
 
-      height: 410px;
 
-      margin-top: 50px;
 
+  }
 
 
-      img {
 
-        display: block;
 
-        width: 580px;
 
-        height: 516px;
 
-        position: absolute;
 
-        left: 50%;
 
-        top: 50%;
 
-        -webkit-transform: translate(-50%, -50%);
 
-        transform: translate(-50%, -50%);
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main {
 
+    .case {
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+
 
+      &:nth-child(1){
 
+        margin-top: 0.8rem;
 
       }
 
-    }
 
 
-    .cover {
 
-      img {
 
-        display: block;
 
-        width: 100%;
 
-        height: 100%;
 
+      .content {
 
+        position: relative;
 
+        margin: 0 auto;
 
+        width: 6.14rem;
 
+        height: 3.77rem;
 
+        float: unset !important;
 
+        -webkit-transform: translateY(-28%);
 
+        transform: translateY(-28%);
 
+
 
+        img {
 
+          display: block;
 
+          width: 6.14rem;
 
+          height: 3.77rem;
 
+          position: absolute;
 
+          left: 50%;
 
+          top: 50%;
 
+          -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+        }
 
+      }
 
+
 
+      .cover {
 
+        float: unset !important;
 
+        margin: 0 auto;
 
+        width: 6.14rem;
 
+        height: 3.77rem;
 
+
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
     }
 
   }
 
-}
 
 
-.footer {
 
-  margin-top: 0;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 387 - 188
css/contact-form.css
Целия файл 

@@ -1,190 +1,389 @@
 
-.form .form-item {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: justify;
 
-  -ms-flex-pack: justify;
 
-  justify-content: space-between;
 
-  margin-bottom: 25px;
 
+@media screen and (min-width: 768px) {
 
+  .form .form-item {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+    margin-bottom: 25px;
 
+  }
 
+  .form .form-item .form-label {
 
+    font-size: 16px;
 
+    color: #999;
 
+    line-height: 40px;
 
+    min-width: 100px;
 
+    text-align: right;
 
+    margin-right: 16px;
 
+  }
 
+  .form .form-item .form-label em {
 
+    color: #ff0000;
 
+    margin-right: 4px;
 
+  }
 
+  .form .form-item .form-control {
 
+    -webkit-box-flex: 1;
 
+    -ms-flex: 1;
 
+    flex: 1;
 
+    color: #505050;
 
+    font-size: 16px;
 
+  }
 
+  .form .form-item .form-control.input input {
 
+    display: block;
 
+    width: 100%;
 
+    line-height: 40px;
 
+    border: 1px solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0 16px;
 
+    border-radius: 4px;
 
+  }
 
+  .form .form-item .form-control.textarea textarea {
 
+    display: block;
 
+    width: 100%;
 
+    line-height: 26px;
 
+    border: 1px solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 8px 16px;
 
+    border-radius: 2px;
 
+    resize: none;
 
+  }
 
+  .form .form-item .form-control.select-group {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+  }
 
+  .form .form-item .form-control.select-group .select {
 
+    width: 100%;
 
+    -webkit-box-flex: 1;
 
+    -ms-flex: 1;
 
+    flex: 1;
 
+    position: relative;
 
+    margin-right: 16px;
 
+    border: 1px solid #e8e8e8;
 
+    border-radius: 2px;
 
+  }
 
+  .form .form-item .form-control.select-group .select:last-child {
 
+    margin-right: 0;
 
+  }
 
+  .form .form-item .form-control.select-group .select select {
 
+    display: block;
 
+    width: 100%;
 
+    border: 0;
 
+    line-height: 40px;
 
+    padding: 0 16px;
 
+    padding-right: 40px;
 
+    color: #272727;
 
+    -webkit-appearance: none;
 
+    -moz-appearance: none;
 
+    appearance: none;
 
+    border-radius: 2px;
 
+  }
 
+  .form .form-item .form-control.select-group .select::after {
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+    content: "";
 
+    z-index: 1;
 
+    display: block;
 
+    width: 40px;
 
+    height: 40px;
 
+    background: url(/img/icon-arrow-down.png) no-repeat center;
 
+    background-size: 24px 24px;
 
+    pointer-events: none;
 
+  }
 
+  .form .form-item .form-control.radio {
 
+    line-height: 40px;
 
+  }
 
+  .form .form-item .form-control.radio label {
 
+    margin-right: 35px;
 
+  }
 
+  .form .form-item .form-control.radio input {
 
+    margin-right: 10px;
 
+  }
 
+  .form .form-item .form-control.upload-image input {
 
+    display: none;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip {
 
+    width: 120px;
 
+    height: 120px;
 
+    border: 1px solid #dedede;
 
+    margin-top: 10px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-top: 80px;
 
+    text-align: center;
 
+    font-size: 14px;
 
+    color: #999;
 
+    cursor: pointer;
 
+    position: relative;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after {
 
+    content: "";
 
+    display: block;
 
+    position: absolute;
 
+    background: #dedede;
 
+    width: 2px;
 
+    height: 30px;
 
+    left: 50%;
 
+    top: 50%;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::before {
 
+    -webkit-transform: translateX(-50%) translateY(-80%);
 
+    transform: translateX(-50%) translateY(-80%);
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::after {
 
+    -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+    transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+  }
 
+  .form .form-item .form-control.upload-file [type=file] {
 
+    display: none;
 
+  }
 
+  .form .form-item .form-control.upload-file .button {
 
+    line-height: 40px;
 
+    width: 207px;
 
+    background: #0688d2;
 
+    color: #fff;
 
+    text-align: center;
 
+    margin-left: 16px;
 
+    cursor: pointer;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .form .form-item .form-control.upload-file .button:hover {
 
+    background: #077ec4;
 
+  }
 
+  .form .form-submit {
 
+    text-align: center;
 
+    margin-top: 80px;
 
+  }
 
+  .form .form-submit button {
 
+    width: 330px;
 
+    height: 48px;
 
+    background: transparent;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 0;
 
+    cursor: pointer;
 
+    margin: 0 24px;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .form .form-submit [type=reset] {
 
+    border: 1px solid #0688d2;
 
+    color: #0688d2;
 
+    line-height: 46px;
 
+  }
 
+  .form .form-submit [type=reset]:hover {
 
+    border-color: #0679b8;
 
+    color: #0679b8;
 
+  }
 
+  .form .form-submit [type=submit] {
 
+    background: #0688d2;
 
+    color: #fff;
 
+    line-height: 48px;
 
+  }
 
+  .form .form-submit [type=submit]:hover {
 
+    background: #077ec4;
 
+  }
 
 }
 
-.form .form-item .form-label {
 
-  font-size: 16px;
 
-  color: #999;
 
-  line-height: 40px;
 
-  min-width: 100px;
 
-  text-align: right;
 
-  margin-right: 16px;
 
-}
 
-.form .form-item .form-label em {
 
-  color: #ff0000;
 
-  margin-right: 4px;
 
-}
 
-.form .form-item .form-control {
 
-  -webkit-box-flex: 1;
 
-  -ms-flex: 1;
 
-  flex: 1;
 
-  color: #505050;
 
-  font-size: 16px;
 
-}
 
-.form .form-item .form-control.input input {
 
-  display: block;
 
-  width: 100%;
 
-  line-height: 40px;
 
-  border: 1px solid #dedede;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 0 16px;
 
-  border-radius: 4px;
 
-}
 
-.form .form-item .form-control.textarea textarea {
 
-  display: block;
 
-  width: 100%;
 
-  line-height: 26px;
 
-  border: 1px solid #dedede;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 8px 16px;
 
-  border-radius: 2px;
 
-  resize: none;
 
-}
 
-.form .form-item .form-control.select-group {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: justify;
 
-  -ms-flex-pack: justify;
 
-  justify-content: space-between;
 
-}
 
-.form .form-item .form-control.select-group .select {
 
-  width: 100%;
 
-  -webkit-box-flex: 1;
 
-  -ms-flex: 1;
 
-  flex: 1;
 
-  position: relative;
 
-  margin-right: 16px;
 
-  border: 1px solid #e8e8e8;
 
-  border-radius: 2px;
 
-}
 
-.form .form-item .form-control.select-group .select:last-child {
 
-  margin-right: 0;
 
-}
 
-.form .form-item .form-control.select-group .select select {
 
-  display: block;
 
-  width: 100%;
 
-  border: 0;
 
-  line-height: 40px;
 
-  padding: 0 16px;
 
-  padding-right: 40px;
 
-  color: #272727;
 
-  -webkit-appearance: none;
 
-  -moz-appearance: none;
 
-  appearance: none;
 
-  border-radius: 2px;
 
-}
 
-.form .form-item .form-control.select-group .select::after {
 
-  position: absolute;
 
-  right: 0;
 
-  top: 0;
 
-  content: "";
 
-  z-index: 1;
 
-  display: block;
 
-  width: 40px;
 
-  height: 40px;
 
-  background: url(/img/icon-arrow-down.png) no-repeat center;
 
-  background-size: 24px 24px;
 
-  pointer-events: none;
 
-}
 
-.form .form-item .form-control.radio {
 
-  line-height: 40px;
 
-}
 
-.form .form-item .form-control.radio label {
 
-  margin-right: 35px;
 
-}
 
-.form .form-item .form-control.radio input {
 
-  margin-right: 10px;
 
-}
 
-.form .form-item .form-control.upload-image input {
 
-  display: none;
 
-}
 
-.form .form-item .form-control.upload-image .tip {
 
-  width: 120px;
 
-  height: 120px;
 
-  border: 1px solid #dedede;
 
-  margin-top: 10px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding-top: 80px;
 
-  text-align: center;
 
-  font-size: 14px;
 
-  color: #999;
 
-  cursor: pointer;
 
-  position: relative;
 
-}
 
-.form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after {
 
-  content: "";
 
-  display: block;
 
-  position: absolute;
 
-  background: #dedede;
 
-  width: 2px;
 
-  height: 30px;
 
-  left: 50%;
 
-  top: 50%;
 
-}
 
-.form .form-item .form-control.upload-image .tip::before {
 
-  -webkit-transform: translateX(-50%) translateY(-80%);
 
-  transform: translateX(-50%) translateY(-80%);
 
-}
 
-.form .form-item .form-control.upload-image .tip::after {
 
-  -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
-  transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
-}
 
-.form .form-item .form-control.upload-file [type=file] {
 
-  display: none;
 
-}
 
-.form .form-item .form-control.upload-file .button {
 
-  line-height: 40px;
 
-  width: 207px;
 
-  background: #0688d2;
 
-  color: #fff;
 
-  text-align: center;
 
-  margin-left: 16px;
 
-  cursor: pointer;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.form .form-item .form-control.upload-file .button:hover {
 
-  background: #077ec4;
 
-}
 
-.form .form-submit {
 
-  text-align: center;
 
-  margin-top: 80px;
 
-}
 
-.form .form-submit button {
 
-  width: 330px;
 
-  height: 48px;
 
-  background: transparent;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  border: 0;
 
-  cursor: pointer;
 
-  margin: 0 24px;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.form .form-submit [type=reset] {
 
-  border: 1px solid #0688d2;
 
-  color: #0688d2;
 
-  line-height: 46px;
 
-}
 
-.form .form-submit [type=reset]:hover {
 
-  border-color: #0679b8;
 
-  color: #0679b8;
 
-}
 
-.form .form-submit [type=submit] {
 
-  background: #0688d2;
 
-  color: #fff;
 
-  line-height: 48px;
 
-}
 
-.form .form-submit [type=submit]:hover {
 
-  background: #077ec4;
 
+@media screen and (max-width: 768px) {
 
+  .form .form-item {
 
+    margin-bottom: 0.32rem;
 
+  }
 
+  .form .form-item.inline {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+  }
 
+  .form .form-item.inline .form-label {
 
+    line-height: 0.9rem;
 
+    margin-right: 0.16rem;
 
+    margin-bottom: 0;
 
+    min-width: 1rem;
 
+  }
 
+  .form .form-item .form-label {
 
+    font-size: 0.26rem;
 
+    color: #999;
 
+    margin-bottom: 0.16rem;
 
+  }
 
+  .form .form-item .form-label em {
 
+    color: #ff0000;
 
+    margin-right: 0.08rem;
 
+  }
 
+  .form .form-item .form-control {
 
+    -webkit-box-flex: 1;
 
+    -ms-flex: 1;
 
+    flex: 1;
 
+    color: #505050;
 
+    font-size: 0.24rem;
 
+  }
 
+  .form .form-item .form-control.input input {
 
+    display: block;
 
+    width: 100%;
 
+    line-height: 0.9rem;
 
+    border: 1px solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0 0.24rem;
 
+    border-radius: 0.04rem;
 
+  }
 
+  .form .form-item .form-control.textarea textarea {
 
+    display: block;
 
+    width: 100%;
 
+    line-height: 0.48rem;
 
+    border: 0.01rem solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0.16rem 0.24rem;
 
+    border-radius: 0.02rem;
 
+    resize: none;
 
+  }
 
+  .form .form-item .form-control.select-group {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+  }
 
+  .form .form-item .form-control.select-group .select {
 
+    width: 100%;
 
+    -webkit-box-flex: 1;
 
+    -ms-flex: 1;
 
+    flex: 1;
 
+    position: relative;
 
+    margin-right: 0.24rem;
 
+    border: 0.01rem solid #e8e8e8;
 
+    border-radius: 0.02rem;
 
+  }
 
+  .form .form-item .form-control.select-group .select:last-child {
 
+    margin-right: 0;
 
+  }
 
+  .form .form-item .form-control.select-group .select select {
 
+    display: block;
 
+    width: 100%;
 
+    border: 0;
 
+    line-height: 0.9rem;
 
+    padding: 0 0.24rem;
 
+    padding-right: 0.4rem;
 
+    color: #272727;
 
+    -webkit-appearance: none;
 
+    -moz-appearance: none;
 
+    appearance: none;
 
+    border-radius: 0.02rem;
 
+  }
 
+  .form .form-item .form-control.select-group .select::after {
 
+    position: absolute;
 
+    right: 0;
 
+    top: 0;
 
+    content: "";
 
+    z-index: 1;
 
+    display: block;
 
+    width: 0.9rem;
 
+    height: 0.9rem;
 
+    background: url(/img/icon-arrow-down.png) no-repeat center;
 
+    background-size: 0.24rem 0.24rem;
 
+    pointer-events: none;
 
+  }
 
+  .form .form-item .form-control.radio {
 
+    line-height: 0.9rem;
 
+  }
 
+  .form .form-item .form-control.radio label {
 
+    margin-right: 0.35rem;
 
+  }
 
+  .form .form-item .form-control.radio input {
 
+    margin-right: 0.1rem;
 
+  }
 
+  .form .form-item .form-control.upload-image input {
 
+    display: none;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip {
 
+    width: 1.62rem;
 
+    height: 1.62rem;
 
+    border: 0.01rem solid #dedede;
 
+    margin-top: 0.2rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-top: 1.2rem;
 
+    text-align: center;
 
+    font-size: 0.24rem;
 
+    color: #999;
 
+    cursor: pointer;
 
+    position: relative;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after {
 
+    content: "";
 
+    display: block;
 
+    position: absolute;
 
+    background: #dedede;
 
+    width: 2px;
 
+    height: 30px;
 
+    left: 50%;
 
+    top: 50%;
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::before {
 
+    -webkit-transform: translateX(-50%) translateY(-80%);
 
+    transform: translateX(-50%) translateY(-80%);
 
+  }
 
+  .form .form-item .form-control.upload-image .tip::after {
 
+    -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+    transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+  }
 
+  .form .form-item .form-control.upload-file [type=file] {
 
+    display: none;
 
+  }
 
+  .form .form-item .form-control.upload-file .button {
 
+    line-height: 0.9rem;
 
+    width: 2rem;
 
+    background: #0688d2;
 
+    color: #fff;
 
+    text-align: center;
 
+    margin-left: 0.24rem;
 
+    cursor: pointer;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .form .form-item .form-control.upload-file .button:hover {
 
+    background: #077ec4;
 
+  }
 
+  .form .form-submit {
 
+    text-align: center;
 
+    margin-top: 1rem;
 
+  }
 
+  .form .form-submit button {
 
+    width: 6rem;
 
+    height: 0.9rem;
 
+    background: transparent;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 0;
 
+    cursor: pointer;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+    font-size: 0.26rem;
 
+  }
 
+  .form .form-submit [type=reset] {
 
+    border: 0.01rem solid #0688d2;
 
+    color: #0688d2;
 
+    line-height: 0.88rem;
 
+  }
 
+  .form .form-submit [type=reset]:hover {
 
+    border-color: #0679b8;
 
+    color: #0679b8;
 
+  }
 
+  .form .form-submit [type=submit] {
 
+    background: #0688d2;
 
+    color: #fff;
 
+    line-height: 0.9rem;
 
+  }
 
+  .form .form-submit [type=submit]:hover {
 
+    background: #077ec4;
 
+  }
 
 }

+ 403 - 173
css/contact-form.scss
Целия файл 

@@ -1,217 +1,447 @@
 
-.form {
 
-  .form-item {
 
-    display: -webkit-box;
 
-    display: -ms-flexbox;
 
-    display: flex;
 
-    -webkit-box-pack: justify;
 
-    -ms-flex-pack: justify;
 
-    justify-content: space-between;
 
-    margin-bottom: 25px;
 
-
 
-    .form-label {
 
-      font-size: 16px;
 
-      color: #999;
 
-      line-height: 40px;
 
-      min-width: 100px;
 
-      text-align: right;
 
-      margin-right: 16px;
 
-      em {
 
-        color: #ff0000;
 
-        margin-right: 4px;
 
+@media screen and (min-width: 768px) {
 
+  .form {
 
+    .form-item {
 
+      display: -webkit-box;
 
+      display: -ms-flexbox;
 
+      display: flex;
 
+      -webkit-box-pack: justify;
 
+      -ms-flex-pack: justify;
 
+      justify-content: space-between;
 
+      margin-bottom: 25px;
 
+
 
+      .form-label {
 
+        font-size: 16px;
 
+        color: #999;
 
+        line-height: 40px;
 
+        min-width: 100px;
 
+        text-align: right;
 
+        margin-right: 16px;
 
+        em {
 
+          color: #ff0000;
 
+          margin-right: 4px;
 
+        }
 
       }
 
-    }
 
-    .form-control {
 
-      -webkit-box-flex: 1;
 
-      -ms-flex: 1;
 
-      flex: 1;
 
-      color: #505050;
 
-      font-size: 16px;
 
-
 
-      &.input {
 
-        input {
 
-          display: block;
 
-          width: 100%;
 
+      .form-control {
 
+        -webkit-box-flex: 1;
 
+        -ms-flex: 1;
 
+        flex: 1;
 
+        color: #505050;
 
+        font-size: 16px;
 
+
 
+        &.input {
 
+          input {
 
+            display: block;
 
+            width: 100%;
 
+            line-height: 40px;
 
+            border: 1px solid #dedede;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0 16px;
 
+            border-radius: 4px;
 
+          }
 
+        }
 
+
 
+        &.textarea {
 
+          textarea {
 
+            display: block;
 
+            width: 100%;
 
+            line-height: 26px;
 
+            border: 1px solid #dedede;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 8px 16px;
 
+            border-radius: 2px;
 
+            resize: none;
 
+          }
 
+        }
 
+
 
+        &.select-group {
 
+          display: -webkit-box;
 
+          display: -ms-flexbox;
 
+          display: flex;
 
+          -webkit-box-pack: justify;
 
+          -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+          .select {
 
+            width: 100%;
 
+            -webkit-box-flex: 1;
 
+            -ms-flex: 1;
 
+            flex: 1;
 
+            position: relative;
 
+            margin-right: 16px;
 
+            border: 1px solid #e8e8e8;
 
+            border-radius: 2px;
 
+            &:last-child {
 
+              margin-right: 0;
 
+            }
 
+            select {
 
+              display: block;
 
+              width: 100%;
 
+              border: 0;
 
+              line-height: 40px;
 
+              padding: 0 16px;
 
+              padding-right: 40px;
 
+              color: #272727;
 
+              -webkit-appearance: none;
 
+              -moz-appearance: none;
 
+              appearance: none;
 
+              border-radius: 2px;
 
+            }
 
+
 
+            &::after {
 
+              position: absolute;
 
+              right: 0;
 
+              top: 0;
 
+              content: '';
 
+              z-index: 1;
 
+              display: block;
 
+              width: 40px;
 
+              height: 40px;
 
+              background: url(/img/icon-arrow-down.png) no-repeat center;
 
+              background-size: 24px 24px;
 
+              pointer-events: none;
 
+            }
 
+          }
 
+        }
 
+
 
+        &.radio {
 
           line-height: 40px;
 
-          border: 1px solid #dedede;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding: 0 16px;
 
-          border-radius: 4px;
 
+          label {
 
+            margin-right: 35px;
 
+          }
 
+          input {
 
+            margin-right: 10px;
 
+          }
 
+        }
 
+
 
+        &.upload-image {
 
+          input {
 
+            display: none;
 
+          }
 
+
 
+          .tip {
 
+            width: 120px;
 
+            height: 120px;
 
+            border: 1px solid #dedede;
 
+            margin-top: 10px;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding-top: 80px;
 
+            text-align: center;
 
+            font-size: 14px;
 
+            color: #999;
 
+            cursor: pointer;
 
+            position: relative;
 
+
 
+            &::before,
 
+            &::after {
 
+              content: '';
 
+              display: block;
 
+              position: absolute;
 
+              background: #dedede;
 
+              width: 2px;
 
+              height: 30px;
 
+              left: 50%;
 
+              top: 50%;
 
+            }
 
+
 
+            &::before {
 
+              -webkit-transform: translateX(-50%) translateY(-80%);
 
+              transform: translateX(-50%) translateY(-80%);
 
+            }
 
+
 
+            &::after {
 
+              -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+              transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+            }
 
+          }
 
+        }
 
+
 
+        &.upload-file {
 
+          [type='file'] {
 
+            display: none;
 
+          }
 
+          .button {
 
+            line-height: 40px;
 
+            width: 207px;
 
+            background: #0688d2;
 
+            color: #fff;
 
+            text-align: center;
 
+            margin-left: 16px;
 
+            cursor: pointer;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
+
 
+            &:hover {
 
+              background: #077ec4;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+
 
+    .form-submit {
 
+      text-align: center;
 
+      margin-top: 80px;
 
+      button {
 
+        width: 330px;
 
+        height: 48px;
 
+        background: transparent;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        border: 0;
 
+        cursor: pointer;
 
+        margin: 0 24px;
 
+        -webkit-transition: all 0.4s;
 
+        transition: all 0.4s;
 
+      }
 
+
 
+      [type='reset'] {
 
+        border: 1px solid #0688d2;
 
+        color: #0688d2;
 
+        line-height: 46px;
 
+        &:hover {
 
+          border-color: #0679b8;
 
+          color: #0679b8;
 
         }
 
       }
 
 
-      &.textarea {
 
-        textarea {
 
-          display: block;
 
-          width: 100%;
 
-          line-height: 26px;
 
-          border: 1px solid #dedede;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding: 8px 16px;
 
-          border-radius: 2px;
 
-          resize: none;
 
+      [type='submit'] {
 
+        background: #0688d2;
 
+        color: #fff;
 
+        line-height: 48px;
 
+
 
+        &:hover {
 
+          background: #077ec4;
 
         }
 
       }
 
+    }
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .form {
 
+    .form-item {
 
+      margin-bottom: 0.32rem;
 
 
-      &.select-group {
 
+      &.inline {
 
         display: -webkit-box;
 
         display: -ms-flexbox;
 
         display: flex;
 
         -webkit-box-pack: justify;
 
         -ms-flex-pack: justify;
 
         justify-content: space-between;
 
-        .select {
 
-          width: 100%;
 
-          -webkit-box-flex: 1;
 
-          -ms-flex: 1;
 
-          flex: 1;
 
-          position: relative;
 
-          margin-right: 16px;
 
-          border: 1px solid #e8e8e8;
 
-          border-radius: 2px;
 
-          &:last-child {
 
-            margin-right: 0;
 
-          }
 
-          select {
 
+
 
+        .form-label {
 
+          line-height: 0.9rem;
 
+          margin-right: 0.16rem;
 
+          margin-bottom: 0;
 
+          min-width: 1rem;
 
+        }
 
+      }
 
+
 
+      .form-label {
 
+        font-size: 0.26rem;
 
+        color: #999;
 
+        margin-bottom: 0.16rem;
 
+        em {
 
+          color: #ff0000;
 
+          margin-right: 0.08rem;
 
+        }
 
+      }
 
+      .form-control {
 
+        -webkit-box-flex: 1;
 
+        -ms-flex: 1;
 
+        flex: 1;
 
+        color: #505050;
 
+        font-size: 0.24rem;
 
+
 
+        &.input {
 
+          input {
 
             display: block;
 
             width: 100%;
 
-            border: 0;
 
-            line-height: 40px;
 
-            padding: 0 16px;
 
-            padding-right: 40px;
 
-            color: #272727;
 
-            -webkit-appearance: none;
 
-            -moz-appearance: none;
 
-            appearance: none;
 
-            border-radius: 2px;
 
+            line-height: 0.9rem;
 
+            border: 1px solid #dedede;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0 0.24rem;
 
+            border-radius: 0.04rem;
 
           }
 
+        }
 
 
-          &::after {
 
-            position: absolute;
 
-            right: 0;
 
-            top: 0;
 
-            content: '';
 
-            z-index: 1;
 
+        &.textarea {
 
+          textarea {
 
             display: block;
 
-            width: 40px;
 
-            height: 40px;
 
-            background: url(/img/icon-arrow-down.png) no-repeat center;
 
-            background-size: 24px 24px;
 
-            pointer-events: none;
 
+            width: 100%;
 
+            line-height: 0.48rem;
 
+            border: 0.01rem solid #dedede;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0.16rem 0.24rem;
 
+            border-radius: 0.02rem;
 
+            resize: none;
 
           }
 
         }
 
-      }
 
 
-      &.radio {
 
-        line-height: 40px;
 
-        label {
 
-          margin-right: 35px;
 
-        }
 
-        input {
 
-          margin-right: 10px;
 
+        &.select-group {
 
+          display: -webkit-box;
 
+          display: -ms-flexbox;
 
+          display: flex;
 
+          -webkit-box-pack: justify;
 
+          -ms-flex-pack: justify;
 
+          justify-content: space-between;
 
+          .select {
 
+            width: 100%;
 
+            -webkit-box-flex: 1;
 
+            -ms-flex: 1;
 
+            flex: 1;
 
+            position: relative;
 
+            margin-right: 0.24rem;
 
+            border: 0.01rem solid #e8e8e8;
 
+            border-radius: 0.02rem;
 
+            &:last-child {
 
+              margin-right: 0;
 
+            }
 
+            select {
 
+              display: block;
 
+              width: 100%;
 
+              border: 0;
 
+              line-height: 0.9rem;
 
+              padding: 0 0.24rem;
 
+              padding-right: 0.4rem;
 
+              color: #272727;
 
+              -webkit-appearance: none;
 
+              -moz-appearance: none;
 
+              appearance: none;
 
+              border-radius: 0.02rem;
 
+            }
 
+
 
+            &::after {
 
+              position: absolute;
 
+              right: 0;
 
+              top: 0;
 
+              content: '';
 
+              z-index: 1;
 
+              display: block;
 
+              width: 0.9rem;
 
+              height: 0.9rem;
 
+              background: url(/img/icon-arrow-down.png) no-repeat center;
 
+              background-size: 0.24rem 0.24rem;
 
+              pointer-events: none;
 
+            }
 
+          }
 
         }
 
-      }
 
 
-      &.upload-image {
 
-        input {
 
-          display: none;
 
-        }
 
-
 
-        .tip {
 
-          width: 120px;
 
-          height: 120px;
 
-          border: 1px solid #dedede;
 
-          margin-top: 10px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding-top: 80px;
 
-          text-align: center;
 
-          font-size: 14px;
 
-          color: #999;
 
-          cursor: pointer;
 
-          position: relative;
 
-
 
-          &::before,
 
-          &::after {
 
-            content: '';
 
-            display: block;
 
-            position: absolute;
 
-            background: #dedede;
 
-            width: 2px;
 
-            height: 30px;
 
-            left: 50%;
 
-            top: 50%;
 
+        &.radio {
 
+          line-height: 0.9rem;
 
+          label {
 
+            margin-right: 0.35rem;
 
           }
 
+          input {
 
+            margin-right: 0.1rem;
 
+          }
 
+        }
 
 
-          &::before {
 
-            -webkit-transform: translateX(-50%) translateY(-80%);
 
-            transform: translateX(-50%) translateY(-80%);
 
+        &.upload-image {
 
+          input {
 
+            display: none;
 
           }
 
 
-          &::after {
 
-            -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
-            transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+          .tip {
 
+            width: 1.62rem;
 
+            height: 1.62rem;
 
+            border: 0.01rem solid #dedede;
 
+            margin-top: 0.2rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding-top: 1.2rem;
 
+            text-align: center;
 
+            font-size: 0.24rem;
 
+            color: #999;
 
+            cursor: pointer;
 
+            position: relative;
 
+
 
+            &::before,
 
+            &::after {
 
+              content: '';
 
+              display: block;
 
+              position: absolute;
 
+              background: #dedede;
 
+              width: 2px;
 
+              height: 30px;
 
+              left: 50%;
 
+              top: 50%;
 
+            }
 
+
 
+            &::before {
 
+              -webkit-transform: translateX(-50%) translateY(-80%);
 
+              transform: translateX(-50%) translateY(-80%);
 
+            }
 
+
 
+            &::after {
 
+              -webkit-transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+              transform: translateX(-50%) translateY(-80%) rotateZ(90deg);
 
+            }
 
           }
 
         }
 
-      }
 
 
-      &.upload-file {
 
-        [type='file'] {
 
-          display: none;
 
-        }
 
-        .button {
 
-          line-height: 40px;
 
-          width: 207px;
 
-          background: #0688d2;
 
-          color: #fff;
 
-          text-align: center;
 
-          margin-left: 16px;
 
-          cursor: pointer;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
+        &.upload-file {
 
+          [type='file'] {
 
+            display: none;
 
+          }
 
+          .button {
 
+            line-height: 0.9rem;
 
+            width: 2rem;
 
+            background: #0688d2;
 
+            color: #fff;
 
+            text-align: center;
 
+            margin-left: 0.24rem;
 
+            cursor: pointer;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
 
-          &:hover {
 
-            background: #077ec4;
 
+            &:hover {
 
+              background: #077ec4;
 
+            }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
 
-  .form-submit {
 
-    text-align: center;
 
-    margin-top: 80px;
 
-    button {
 
-      width: 330px;
 
-      height: 48px;
 
-      background: transparent;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
-      border: 0;
 
-      cursor: pointer;
 
-      margin: 0 24px;
 
-      -webkit-transition: all 0.4s;
 
-      transition: all 0.4s;
 
-    }
 
+    .form-submit {
 
+      text-align: center;
 
+      margin-top: 1rem;
 
+      button {
 
+        width: 6rem;
 
+        height: 0.9rem;
 
+        background: transparent;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        border: 0;
 
+        cursor: pointer;
 
+        -webkit-transition: all 0.4s;
 
+        transition: all 0.4s;
 
+        font-size: 0.26rem;
 
+      }
 
 
-    [type='reset'] {
 
-      border: 1px solid #0688d2;
 
-      color: #0688d2;
 
-      line-height: 46px;
 
-      &:hover {
 
-        border-color: #0679b8;
 
-        color: #0679b8;
 
+      [type='reset'] {
 
+        border: 0.01rem solid #0688d2;
 
+        color: #0688d2;
 
+        line-height: 0.88rem;
 
+        &:hover {
 
+          border-color: #0679b8;
 
+          color: #0679b8;
 
+        }
 
       }
 
-    }
 
 
-    [type='submit'] {
 
-      background: #0688d2;
 
-      color: #fff;
 
-      line-height: 48px;
 
+      [type='submit'] {
 
+        background: #0688d2;
 
+        color: #fff;
 
+        line-height: 0.9rem;
 
 
-      &:hover {
 
-        background: #077ec4;
 
+        &:hover {
 
+          background: #077ec4;
 
+        }
 
       }
 
     }
 
   }

+ 458 - 232
css/contact.css
Целия файл 

@@ -1,235 +1,461 @@
 
-body {
 
-  background: #f7f7f7;
 
-}
 
+@media screen and (min-width: 768px) {
 
+  body {
 
+    background: #f7f7f7;
 
+  }
 
 
-.main .container {
 
-  position: relative;
 
-  background: #fff;
 
-  padding: 48px 58px;
 
-  margin-top: -117px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .container .head {
 
-  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;
 
-  color: #505050;
 
-}
 
-.main .container .head h3 {
 
-  position: relative;
 
-  font-size: 24px;
 
-  font-weight: normal;
 
-  padding-left: 48px;
 
-}
 
-.main .container .head h3::before {
 
-  content: "";
 
-  display: block;
 
-  width: 24px;
 
-  height: 4px;
 
-  background: #0688d2;
 
-  position: absolute;
 
-  left: 0;
 
-  top: 50%;
 
-  -webkit-transform: translateY(-50%);
 
-  transform: translateY(-50%);
 
-}
 
-.main .container .head ul > li {
 
-  float: left;
 
-  margin-right: 20px;
 
-}
 
-.main .container .head ul > li > a {
 
-  display: block;
 
-  font-size: 16px;
 
-}
 
-.main .container .cover {
 
-  margin-top: 32px;
 
-}
 
-.main .container .cover img {
 
-  display: block;
 
-  width: 100%;
 
-}
 
-.main .container .content .form-title {
 
-  padding: 40px 0;
 
-}
 
-.main .container .content .form-title .title {
 
-  font-size: 24px;
 
-}
 
-.main .container .content .form-title .line {
 
-  width: 100%;
 
-  height: 1px;
 
-  margin-top: 18px;
 
-  background: #e8e8e8;
 
-  position: relative;
 
-}
 
-.main .container .content .form-title .line::before {
 
-  content: "";
 
-  display: block;
 
-  width: 32px;
 
-  height: 2px;
 
-  background: #0688d2;
 
-  position: absolute;
 
-  left: 0;
 
-  bottom: 0;
 
-}
 
-.main .container .content .contact {
 
-  margin-top: 80px;
 
-  margin-bottom: 80px;
 
-}
 
-.main .container .content .contact .item {
 
-  float: left;
 
-}
 
-.main .container .content .contact .item:nth-child(1) {
 
-  padding-right: 68px;
 
-}
 
-.main .container .content .contact .item:nth-child(2) {
 
-  padding-left: 68px;
 
-  padding-right: 68px;
 
-  border-left: 1px solid #e8e8e8;
 
-  border-right: 1px solid #e8e8e8;
 
-}
 
-.main .container .content .contact .item:nth-child(3) {
 
-  padding-left: 68px;
 
-}
 
-.main .container .content .contact .item .label {
 
-  font-size: 16px;
 
-  color: #999999;
 
-}
 
-.main .container .content .contact .item .text {
 
-  font-size: 16px;
 
-  font-weight: bold;
 
-  margin-top: 16px;
 
-}
 
-.main .container .content .map {
 
-  position: relative;
 
-  width: 100%;
 
-  height: 430px;
 
-  background: #f7f7f7;
 
-}
 
-.main .container .content .map .map-tip {
 
-  position: absolute;
 
-  z-index: 9;
 
-  font-size: 14px;
 
-  color: #fff;
 
-  min-width: 228px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 24px 16px;
 
-  background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
-  border-radius: 8px;
 
-  left: 0;
 
-  bottom: 0;
 
-  -webkit-transform: translate(-47%, -50px);
 
-  transform: translate(-47%, -50px);
 
-  line-height: 24px;
 
-}
 
-.main .container .content .map .map-tip::after {
 
-  position: absolute;
 
-  left: 50%;
 
-  bottom: 0;
 
-  content: "";
 
-  width: 0;
 
-  height: 0;
 
-  border-style: solid;
 
-  border-width: 12px 10px 0 10px;
 
-  border-color: #0688d2 transparent transparent transparent;
 
-  -webkit-transform: translate(-50%, 100%);
 
-  transform: translate(-50%, 100%);
 
-  opacity: 0.7;
 
-}
 
-.main .container .content .consult {
 
-  margin-top: 80px;
 
-}
 
-.main .container .content .consult .form-item:nth-child(-n+6) .form-control input {
 
-  padding-left: 66px;
 
-}
 
-.main .container .content .consult .form-item:nth-child(7) .form-control input {
 
-  padding-left: 80px;
 
-}
 
-.main .container .content .consult .form-item:nth-child(8) .form-control input {
 
-  padding-left: 100px;
 
-}
 
-.main .container .content .consult .form-item .form-control {
 
-  position: relative;
 
-}
 
-.main .container .content .consult .form-item .form-control .form-label {
 
-  position: absolute;
 
-  left: 16px;
 
-  top: 0;
 
-  min-width: auto;
 
-  color: #505050;
 
-}
 
-.main .container .content .consult .form-item .form-control textarea::-webkit-input-placeholder {
 
-  color: #999;
 
-}
 
-.main .container .content .consult .form-item .form-control textarea::-moz-placeholder {
 
-  color: #999;
 
-}
 
-.main .container .content .consult .form-item .form-control textarea:-ms-input-placeholder {
 
-  color: #999;
 
-}
 
-.main .container .content .consult .form-item .form-control textarea::-ms-input-placeholder {
 
-  color: #999;
 
-}
 
-.main .container .content .consult .form-item .form-control textarea::placeholder {
 
-  color: #999;
 
-}
 
-.main .container .content .consult .form-submit {
 
-  margin-top: 68px;
 
-}
 
-.main .container .content .consult .form-submit button {
 
-  width: 526px;
 
-}
 
-.main .container .content .title {
 
-  font-size: 24px;
 
-  margin: 40px 0 29px;
 
-}
 
-.main .container .content .collapse .collapse-wrapper {
 
-  overflow: hidden;
 
-}
 
-.main .container .content .job-list .job {
 
-  margin-top: 24px;
 
-}
 
-.main .container .content .job-list .job.active .name {
 
-  background-color: #0688d2;
 
-  color: #fff;
 
-  background-image: url(/img/contact-icon-down.png);
 
-}
 
-.main .container .content .job-list .job .name {
 
-  line-height: 48px;
 
-  padding: 0 16px;
 
-  border: 1px solid #dedede;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  cursor: pointer;
 
-  -webkit-transition: background-color 0.2s;
 
-  transition: background-color 0.2s;
 
-  background-repeat: no-repeat;
 
-  background-position: 99% center;
 
-  background-image: url(/img/contact-icon-up.png);
 
-  background-color: #fff;
 
-}
 
-.main .container .content .job-list .job .requirements {
 
-  font-size: 16px;
 
-  line-height: 36px;
 
-  padding: 16px;
 
-  margin: 16px 0;
 
-}
 
-.main .container .content .job-list .job .link {
 
-  padding: 0 16px;
 
-  margin-bottom: 24px;
 
-}
 
-.main .container .content .job-list .job .link a {
 
-  font-size: 16px;
 
-  color: #0688d2;
 
-}
 
+  .main .container {
 
+    position: relative;
 
+    background: #fff;
 
+    padding: 48px 58px;
 
+    margin-top: -117px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .container .head {
 
+    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;
 
+    color: #505050;
 
+  }
 
+  .main .container .head h3 {
 
+    position: relative;
 
+    font-size: 24px;
 
+    font-weight: normal;
 
+    padding-left: 48px;
 
+  }
 
+  .main .container .head h3::before {
 
+    content: "";
 
+    display: block;
 
+    width: 24px;
 
+    height: 4px;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+  }
 
+  .main .container .head ul > li {
 
+    float: left;
 
+    margin-right: 20px;
 
+  }
 
+  .main .container .head ul > li > a {
 
+    display: block;
 
+    font-size: 16px;
 
+  }
 
+  .main .container .cover {
 
+    margin-top: 32px;
 
+  }
 
+  .main .container .cover img {
 
+    display: block;
 
+    width: 100%;
 
+  }
 
+  .main .container .content .form-title {
 
+    padding: 40px 0;
 
+  }
 
+  .main .container .content .form-title .title {
 
+    font-size: 24px;
 
+  }
 
+  .main .container .content .form-title .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    margin-top: 18px;
 
+    background: #e8e8e8;
 
+    position: relative;
 
+  }
 
+  .main .container .content .form-title .line::before {
 
+    content: "";
 
+    display: block;
 
+    width: 32px;
 
+    height: 2px;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 0;
 
+    bottom: 0;
 
+  }
 
+  .main .container .content .contact {
 
+    margin-top: 80px;
 
+    margin-bottom: 80px;
 
+  }
 
+  .main .container .content .contact .item {
 
+    float: left;
 
+  }
 
+  .main .container .content .contact .item:nth-child(1) {
 
+    padding-right: 68px;
 
+  }
 
+  .main .container .content .contact .item:nth-child(2) {
 
+    padding-left: 68px;
 
+    padding-right: 68px;
 
+    border-left: 1px solid #e8e8e8;
 
+    border-right: 1px solid #e8e8e8;
 
+  }
 
+  .main .container .content .contact .item:nth-child(3) {
 
+    padding-left: 68px;
 
+  }
 
+  .main .container .content .contact .item .label {
 
+    font-size: 16px;
 
+    color: #999999;
 
+  }
 
+  .main .container .content .contact .item .text {
 
+    font-size: 16px;
 
+    font-weight: bold;
 
+    margin-top: 16px;
 
+  }
 
+  .main .container .content .map {
 
+    position: relative;
 
+    width: 100%;
 
+    height: 430px;
 
+    background: #f7f7f7;
 
+  }
 
+  .main .container .content .map .map-tip {
 
+    position: absolute;
 
+    z-index: 9;
 
+    font-size: 14px;
 
+    color: #fff;
 
+    min-width: 228px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 24px 16px;
 
+    background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
+    border-radius: 8px;
 
+    left: 0;
 
+    bottom: 0;
 
+    -webkit-transform: translate(-47%, -50px);
 
+    transform: translate(-47%, -50px);
 
+    line-height: 24px;
 
+  }
 
+  .main .container .content .map .map-tip::after {
 
+    position: absolute;
 
+    left: 50%;
 
+    bottom: 0;
 
+    content: "";
 
+    width: 0;
 
+    height: 0;
 
+    border-style: solid;
 
+    border-width: 12px 10px 0 10px;
 
+    border-color: #0688d2 transparent transparent transparent;
 
+    -webkit-transform: translate(-50%, 100%);
 
+    transform: translate(-50%, 100%);
 
+    opacity: 0.7;
 
+  }
 
+  .main .container .content .consult {
 
+    margin-top: 80px;
 
+  }
 
+  .main .container .content .consult .form-item:nth-child(-n+6) .form-control input {
 
+    padding-left: 66px;
 
+  }
 
+  .main .container .content .consult .form-item:nth-child(7) .form-control input {
 
+    padding-left: 80px;
 
+  }
 
+  .main .container .content .consult .form-item:nth-child(8) .form-control input {
 
+    padding-left: 100px;
 
+  }
 
+  .main .container .content .consult .form-item .form-control {
 
+    position: relative;
 
+  }
 
+  .main .container .content .consult .form-item .form-control .form-label {
 
+    position: absolute;
 
+    left: 16px;
 
+    top: 0;
 
+    min-width: auto;
 
+    color: #505050;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-webkit-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-moz-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea:-ms-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-ms-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-submit {
 
+    margin-top: 68px;
 
+  }
 
+  .main .container .content .consult .form-submit button {
 
+    width: 526px;
 
+  }
 
+  .main .container .content .title {
 
+    font-size: 24px;
 
+    margin: 40px 0 29px;
 
+  }
 
+  .main .container .content .collapse .collapse-wrapper {
 
+    overflow: hidden;
 
+  }
 
+  .main .container .content .job-list .job {
 
+    margin-top: 24px;
 
+  }
 
+  .main .container .content .job-list .job.active .name {
 
+    background-color: #0688d2;
 
+    color: #fff;
 
+    background-image: url(/img/contact-icon-down.png);
 
+  }
 
+  .main .container .content .job-list .job .name {
 
+    line-height: 48px;
 
+    padding: 0 16px;
 
+    border: 1px solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    cursor: pointer;
 
+    -webkit-transition: background-color 0.2s;
 
+    transition: background-color 0.2s;
 
+    background-repeat: no-repeat;
 
+    background-position: 99% center;
 
+    background-image: url(/img/contact-icon-up.png);
 
+    background-color: #fff;
 
+  }
 
+  .main .container .content .job-list .job .requirements {
 
+    font-size: 16px;
 
+    line-height: 36px;
 
+    padding: 16px;
 
+    margin: 16px 0;
 
+  }
 
+  .main .container .content .job-list .job .link {
 
+    padding: 0 16px;
 
+    margin-bottom: 24px;
 
+  }
 
+  .main .container .content .job-list .job .link a {
 
+    font-size: 16px;
 
+    color: #0688d2;
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 80px;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main .container {
 
+    position: relative;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0 0.32rem;
 
+  }
 
+  .main .container .head {
 
+    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;
 
+    color: #505050;
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .container .head h3 {
 
+    position: relative;
 
+    font-size: 0.34rem;
 
+    font-weight: normal;
 
+    padding-left: 0.48rem;
 
+  }
 
+  .main .container .head h3::before {
 
+    content: "";
 
+    display: block;
 
+    width: 0.24rem;
 
+    height: 0.04rem;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+  }
 
+  .main .container .head ul > li {
 
+    float: left;
 
+    margin-left: 0.56rem;
 
+  }
 
+  .main .container .head ul > li > a {
 
+    display: block;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .container .cover {
 
+    margin-top: 0.16rem;
 
+  }
 
+  .main .container .cover img {
 
+    display: block;
 
+    width: 100%;
 
+  }
 
+  .main .container .content .form-title {
 
+    padding: 40px 0;
 
+  }
 
+  .main .container .content .form-title .title {
 
+    font-size: 24px;
 
+  }
 
+  .main .container .content .form-title .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    margin-top: 18px;
 
+    background: #e8e8e8;
 
+    position: relative;
 
+  }
 
+  .main .container .content .form-title .line::before {
 
+    content: "";
 
+    display: block;
 
+    width: 32px;
 
+    height: 2px;
 
+    background: #0688d2;
 
+    position: absolute;
 
+    left: 0;
 
+    bottom: 0;
 
+  }
 
+  .main .container .content .contact {
 
+    margin-top: 0.4rem;
 
+    margin-bottom: 1.2rem;
 
+  }
 
+  .main .container .content .contact .item {
 
+    margin-bottom: 0.32rem;
 
+  }
 
+  .main .container .content .contact .item .label {
 
+    font-size: 0.26rem;
 
+    color: #999999;
 
+  }
 
+  .main .container .content .contact .item .text {
 
+    font-size: 0.26rem;
 
+    font-weight: bold;
 
+    margin-top: 0.08rem;
 
+  }
 
+  .main .container .content .map {
 
+    position: relative;
 
+    width: 7.5rem;
 
+    height: 4.8rem;
 
+    margin-left: -0.32rem;
 
+  }
 
+  .main .container .content .map .map-tip {
 
+    position: absolute;
 
+    z-index: 9;
 
+    font-size: 14px;
 
+    color: #fff;
 
+    min-width: 228px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 24px 16px;
 
+    background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
+    border-radius: 8px;
 
+    left: 0;
 
+    bottom: 0;
 
+    -webkit-transform: translate(-47%, -50px);
 
+    transform: translate(-47%, -50px);
 
+    line-height: 24px;
 
+  }
 
+  .main .container .content .map .map-tip::after {
 
+    position: absolute;
 
+    left: 50%;
 
+    bottom: 0;
 
+    content: "";
 
+    width: 0;
 
+    height: 0;
 
+    border-style: solid;
 
+    border-width: 12px 10px 0 10px;
 
+    border-color: #0688d2 transparent transparent transparent;
 
+    -webkit-transform: translate(-50%, 100%);
 
+    transform: translate(-50%, 100%);
 
+    opacity: 0.7;
 
+  }
 
+  .main .container .content .consult {
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main .container .content .consult .form-item .form-control {
 
+    position: relative;
 
+  }
 
+  .main .container .content .consult .form-item .form-control .form-label {
 
+    color: #505050;
 
+    text-align: left;
 
+  }
 
+  .main .container .content .consult .form-item .form-control.select-group {
 
+    display: block;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-webkit-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-moz-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea:-ms-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::-ms-input-placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-item .form-control textarea::placeholder {
 
+    color: #999;
 
+  }
 
+  .main .container .content .consult .form-submit {
 
+    margin-top: 0.67rem;
 
+    margin-bottom: 0.67rem;
 
+  }
 
+  .main .container .content .consult .form-submit button {
 
+    width: 6rem;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .container .content .title {
 
+    font-size: 0.32rem;
 
+    margin: 0.4rem 0 0.24rem;
 
+  }
 
+  .main .container .content .collapse .collapse-wrapper {
 
+    overflow: hidden;
 
+  }
 
+  .main .container .content.join-form {
 
+    margin-bottom: 0.8rem;
 
+  }
 
+  .main .container .content .job-list {
 
+    padding-bottom: 1.2rem;
 
+  }
 
+  .main .container .content .job-list .job {
 
+    margin-top: 0.24rem;
 
+  }
 
+  .main .container .content .job-list .job.active .name {
 
+    background-color: #0688d2;
 
+    color: #fff;
 
+    background-image: url(/img/contact-icon-down.png);
 
+  }
 
+  .main .container .content .job-list .job .name {
 
+    line-height: 0.9rem;
 
+    padding: 0 0.24rem;
 
+    border: 0.01rem solid #dedede;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    cursor: pointer;
 
+    -webkit-transition: background-color 0.2s;
 
+    transition: background-color 0.2s;
 
+    background-repeat: no-repeat;
 
+    background-position: 96% center;
 
+    background-size: 0.48rem;
 
+    background-image: url(/img/contact-icon-up.png);
 
+    background-color: #fff;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .container .content .job-list .job .requirements {
 
+    line-height: 0.48rem;
 
+    padding: 0.16rem;
 
+    margin: 0.16rem 0;
 
+  }
 
+  .main .container .content .job-list .job .requirements p {
 
+    font-size: 0.24rem;
 
+  }
 
+  .main .container .content .job-list .job .link {
 
+    padding: 0 0.16rem;
 
+    margin-bottom: 0.24rem;
 
+  }
 
+  .main .container .content .job-list .job .link a {
 
+    display: block;
 
+    font-size: 0.24rem;
 
+    color: #0688d2;
 
+  }
 
 
-.footer {
 
-  margin-top: 80px;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 481 - 216
css/contact.scss
Целия файл 

@@ -1,287 +1,552 @@
 
-body {
 
-  background: #f7f7f7;
 
-}
 
-.main {
 
-  .container {
 
-    position: relative;
 
-    background: #fff;
 
-    padding: 48px 58px;
 
-    margin-top: -117px;
 
-    -webkit-box-sizing: border-box;
 
-    box-sizing: border-box;
 
-
 
-    .head {
 
-      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;
 
-      color: #505050;
 
-
 
-      h3 {
 
-        position: relative;
 
-        font-size: 24px;
 
-        font-weight: normal;
 
-        padding-left: 48px;
 
-
 
-        &::before {
 
-          content: '';
 
-          display: block;
 
-          width: 24px;
 
-          height: 4px;
 
-          background: #0688d2;
 
-          position: absolute;
 
-          left: 0;
 
-          top: 50%;
 
-          -webkit-transform: translateY(-50%);
 
-          transform: translateY(-50%);
 
-        }
 
-      }
 
-
 
-      ul > li {
 
-        float: left;
 
-        margin-right: 20px;
 
-        & > a {
 
-          display: block;
 
-          font-size: 16px;
 
-        }
 
-      }
 
-    }
 
-
 
-    .cover {
 
-      margin-top: 32px;
 
-      img {
 
-        display: block;
 
-        width: 100%;
 
-      }
 
-    }
 
+@media screen and (min-width: 768px) {
 
+  body {
 
+    background: #f7f7f7;
 
+  }
 
+  .main {
 
+    .container {
 
+      position: relative;
 
+      background: #fff;
 
+      padding: 48px 58px;
 
+      margin-top: -117px;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
 
-    .content {
 
-      .form-title {
 
-        padding: 40px 0;
 
-        .title {
 
-          font-size: 24px;
 
-        }
 
+      .head {
 
+        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;
 
+        color: #505050;
 
 
-        .line {
 
-          width: 100%;
 
-          height: 1px;
 
-          margin-top: 18px;
 
-          background: #e8e8e8;
 
+        h3 {
 
           position: relative;
 
+          font-size: 24px;
 
+          font-weight: normal;
 
+          padding-left: 48px;
 
 
           &::before {
 
             content: '';
 
             display: block;
 
-            width: 32px;
 
-            height: 2px;
 
+            width: 24px;
 
+            height: 4px;
 
             background: #0688d2;
 
             position: absolute;
 
             left: 0;
 
-            bottom: 0;
 
+            top: 50%;
 
+            -webkit-transform: translateY(-50%);
 
+            transform: translateY(-50%);
 
           }
 
         }
 
-      }
 
 
-      .contact {
 
-        margin-top: 80px;
 
-        margin-bottom: 80px;
 
-        .item {
 
+        ul > li {
 
           float: left;
 
-
 
-          &:nth-child(1) {
 
-            padding-right: 68px;
 
+          margin-right: 20px;
 
+          & > a {
 
+            display: block;
 
+            font-size: 16px;
 
           }
 
+        }
 
+      }
 
 
-          &:nth-child(2) {
 
-            padding-left: 68px;
 
-            padding-right: 68px;
 
-            border-left: 1px solid #e8e8e8;
 
-            border-right: 1px solid #e8e8e8;
 
-          }
 
+      .cover {
 
+        margin-top: 32px;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+        }
 
+      }
 
 
-          &:nth-child(3) {
 
-            padding-left: 68px;
 
+      .content {
 
+        .form-title {
 
+          padding: 40px 0;
 
+          .title {
 
+            font-size: 24px;
 
           }
 
 
-          .label {
 
-            font-size: 16px;
 
-            color: #999999;
 
+          .line {
 
+            width: 100%;
 
+            height: 1px;
 
+            margin-top: 18px;
 
+            background: #e8e8e8;
 
+            position: relative;
 
+
 
+            &::before {
 
+              content: '';
 
+              display: block;
 
+              width: 32px;
 
+              height: 2px;
 
+              background: #0688d2;
 
+              position: absolute;
 
+              left: 0;
 
+              bottom: 0;
 
+            }
 
           }
 
-          .text {
 
-            font-size: 16px;
 
-            font-weight: bold;
 
-            margin-top: 16px;
 
+        }
 
+
 
+        .contact {
 
+          margin-top: 80px;
 
+          margin-bottom: 80px;
 
+          .item {
 
+            float: left;
 
+
 
+            &:nth-child(1) {
 
+              padding-right: 68px;
 
+            }
 
+
 
+            &:nth-child(2) {
 
+              padding-left: 68px;
 
+              padding-right: 68px;
 
+              border-left: 1px solid #e8e8e8;
 
+              border-right: 1px solid #e8e8e8;
 
+            }
 
+
 
+            &:nth-child(3) {
 
+              padding-left: 68px;
 
+            }
 
+
 
+            .label {
 
+              font-size: 16px;
 
+              color: #999999;
 
+            }
 
+            .text {
 
+              font-size: 16px;
 
+              font-weight: bold;
 
+              margin-top: 16px;
 
+            }
 
           }
 
         }
 
-      }
 
 
-      .map {
 
-        position: relative;
 
-        width: 100%;
 
-        height: 430px;
 
-        background: #f7f7f7;
 
-
 
-        .map-tip {
 
-          position: absolute;
 
-          z-index: 9;
 
-          font-size: 14px;
 
-          color: #fff;
 
-          min-width: 228px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding: 24px 16px;
 
-          background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
-          border-radius: 8px;
 
-          left: 0;
 
-          bottom: 0;
 
-          -webkit-transform: translate(-47%, -50px);
 
-          transform: translate(-47%, -50px);
 
-          line-height: 24px;
 
-
 
-          &::after {
 
+        .map {
 
+          position: relative;
 
+          width: 100%;
 
+          height: 430px;
 
+          background: #f7f7f7;
 
+
 
+          .map-tip {
 
             position: absolute;
 
-            left: 50%;
 
+            z-index: 9;
 
+            font-size: 14px;
 
+            color: #fff;
 
+            min-width: 228px;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 24px 16px;
 
+            background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
+            border-radius: 8px;
 
+            left: 0;
 
             bottom: 0;
 
-            content: '';
 
-            width: 0;
 
-            height: 0;
 
-            border-style: solid;
 
-            border-width: 12px 10px 0 10px;
 
-            border-color: #0688d2 transparent transparent transparent;
 
-            -webkit-transform: translate(-50%, 100%);
 
-            transform: translate(-50%, 100%);
 
-            opacity: 0.7;
 
+            -webkit-transform: translate(-47%, -50px);
 
+            transform: translate(-47%, -50px);
 
+            line-height: 24px;
 
+
 
+            &::after {
 
+              position: absolute;
 
+              left: 50%;
 
+              bottom: 0;
 
+              content: '';
 
+              width: 0;
 
+              height: 0;
 
+              border-style: solid;
 
+              border-width: 12px 10px 0 10px;
 
+              border-color: #0688d2 transparent transparent transparent;
 
+              -webkit-transform: translate(-50%, 100%);
 
+              transform: translate(-50%, 100%);
 
+              opacity: 0.7;
 
+            }
 
           }
 
         }
 
-      }
 
 
-      .consult {
 
-        margin-top: 80px;
 
+        .consult {
 
+          margin-top: 80px;
 
 
-        .form-item {
 
-          &:nth-child(-n + 6) {
 
-            .form-control {
 
-              input {
 
-                padding-left: 66px;
 
+          .form-item {
 
+            &:nth-child(-n + 6) {
 
+              .form-control {
 
+                input {
 
+                  padding-left: 66px;
 
+                }
 
               }
 
             }
 
-          }
 
-          &:nth-child(7) {
 
-            .form-control {
 
-              input {
 
-                padding-left: 80px;
 
+            &:nth-child(7) {
 
+              .form-control {
 
+                input {
 
+                  padding-left: 80px;
 
+                }
 
+              }
 
+            }
 
+            &:nth-child(8) {
 
+              .form-control {
 
+                input {
 
+                  padding-left: 100px;
 
+                }
 
               }
 
             }
 
-          }
 
-          &:nth-child(8) {
 
             .form-control {
 
-              input {
 
-                padding-left: 100px;
 
+              position: relative;
 
+              .form-label {
 
+                position: absolute;
 
+                left: 16px;
 
+                top: 0;
 
+                min-width: auto;
 
+                color: #505050;
 
+              }
 
+
 
+              textarea::-webkit-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::-moz-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea:-ms-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::-ms-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::placeholder {
 
+                color: #999;
 
               }
 
             }
 
           }
 
-          .form-control {
 
-            position: relative;
 
-            .form-label {
 
-              position: absolute;
 
-              left: 16px;
 
-              top: 0;
 
-              min-width: auto;
 
-              color: #505050;
 
-            }
 
 
-            textarea::-webkit-input-placeholder {
 
-              color: #999;
 
+          .form-submit {
 
+            margin-top: 68px;
 
+            button {
 
+              width: 526px;
 
             }
 
+          }
 
+        }
 
 
-            textarea::-moz-placeholder {
 
-              color: #999;
 
-            }
 
+        .title {
 
+          font-size: 24px;
 
+          margin: 40px 0 29px;
 
+        }
 
 
-            textarea:-ms-input-placeholder {
 
-              color: #999;
 
-            }
 
+        .collapse {
 
+          .collapse-wrapper {
 
+            overflow: hidden;
 
+          }
 
+        }
 
 
-            textarea::-ms-input-placeholder {
 
-              color: #999;
 
+        .job-list {
 
+          .job {
 
+            margin-top: 24px;
 
+            &.active {
 
+              .name {
 
+                background-color: #0688d2;
 
+                color: #fff;
 
+                background-image: url(/img/contact-icon-down.png);
 
+              }
 
             }
 
 
-            textarea::placeholder {
 
-              color: #999;
 
+            .name {
 
+              line-height: 48px;
 
+              padding: 0 16px;
 
+              border: 1px solid #dedede;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              cursor: pointer;
 
+              -webkit-transition: background-color 0.2s;
 
+              transition: background-color 0.2s;
 
+
 
+              background-repeat: no-repeat;
 
+              background-position: 99% center;
 
+              background-image: url(/img/contact-icon-up.png);
 
+              background-color: #fff;
 
+            }
 
+            .requirements {
 
+              font-size: 16px;
 
+              line-height: 36px;
 
+              padding: 16px;
 
+              margin: 16px 0;
 
+            }
 
+            .link {
 
+              padding: 0 16px;
 
+              margin-bottom: 24px;
 
+              a {
 
+                font-size: 16px;
 
+                color: #0688d2;
 
+              }
 
             }
 
           }
 
         }
 
+      }
 
+    }
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 80px;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    .container {
 
+      position: relative;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      padding: 0 0.32rem;
 
+
 
+      .head {
 
+        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;
 
+        color: #505050;
 
+        margin-top: 0.4rem;
 
 
-        .form-submit {
 
-          margin-top: 68px;
 
-          button {
 
-            width: 526px;
 
+        h3 {
 
+          position: relative;
 
+          font-size: 0.34rem;
 
+          font-weight: normal;
 
+          padding-left: 0.48rem;
 
+
 
+          &::before {
 
+            content: '';
 
+            display: block;
 
+            width: 0.24rem;
 
+            height: 0.04rem;
 
+            background: #0688d2;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 50%;
 
+            -webkit-transform: translateY(-50%);
 
+            transform: translateY(-50%);
 
           }
 
         }
 
-      }
 
 
-      .title {
 
-        font-size: 24px;
 
-        margin: 40px 0 29px;
 
+        ul > li {
 
+          float: left;
 
+          margin-left: 0.56rem;
 
+          & > a {
 
+            display: block;
 
+            font-size: 0.26rem;
 
+          }
 
+        }
 
       }
 
 
-      .collapse {
 
-        .collapse-wrapper {
 
-          overflow: hidden;
 
+      .cover {
 
+        margin-top: 0.16rem;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
         }
 
       }
 
 
-      .job-list {
 
-        .job {
 
-          margin-top: 24px;
 
-          &.active {
 
-            .name {
 
-              background-color: #0688d2;
 
-              color: #fff;
 
-              background-image: url(/img/contact-icon-down.png);
 
+      .content {
 
+        .form-title {
 
+          padding: 40px 0;
 
+          .title {
 
+            font-size: 24px;
 
+          }
 
+
 
+          .line {
 
+            width: 100%;
 
+            height: 1px;
 
+            margin-top: 18px;
 
+            background: #e8e8e8;
 
+            position: relative;
 
+
 
+            &::before {
 
+              content: '';
 
+              display: block;
 
+              width: 32px;
 
+              height: 2px;
 
+              background: #0688d2;
 
+              position: absolute;
 
+              left: 0;
 
+              bottom: 0;
 
             }
 
           }
 
+        }
 
 
-          .name {
 
-            line-height: 48px;
 
-            padding: 0 16px;
 
-            border: 1px solid #dedede;
 
+        .contact {
 
+          margin-top: 0.4rem;
 
+          margin-bottom: 1.2rem;
 
+          .item {
 
+            margin-bottom: 0.32rem;
 
+            .label {
 
+              font-size: 0.26rem;
 
+              color: #999999;
 
+            }
 
+            .text {
 
+              font-size: 0.26rem;
 
+              font-weight: bold;
 
+              margin-top: 0.08rem;
 
+            }
 
+          }
 
+        }
 
+
 
+        .map {
 
+          position: relative;
 
+          width: 7.5rem;
 
+          height: 4.8rem;
 
+          margin-left: -0.32rem;
 
+
 
+          .map-tip {
 
+            position: absolute;
 
+            z-index: 9;
 
+            font-size: 14px;
 
+            color: #fff;
 
+            min-width: 228px;
 
             -webkit-box-sizing: border-box;
 
             box-sizing: border-box;
 
-            cursor: pointer;
 
-            -webkit-transition: background-color 0.2s;
 
-            transition: background-color 0.2s;
 
-
 
-            background-repeat: no-repeat;
 
-            background-position: 99% center;
 
-            background-image: url(/img/contact-icon-up.png);
 
-            background-color: #fff;
 
+            padding: 24px 16px;
 
+            background: linear-gradient(156deg, #0688d2 0%, rgba(32, 155, 212, 0.7) 100%);
 
+            border-radius: 8px;
 
+            left: 0;
 
+            bottom: 0;
 
+            -webkit-transform: translate(-47%, -50px);
 
+            transform: translate(-47%, -50px);
 
+            line-height: 24px;
 
+
 
+            &::after {
 
+              position: absolute;
 
+              left: 50%;
 
+              bottom: 0;
 
+              content: '';
 
+              width: 0;
 
+              height: 0;
 
+              border-style: solid;
 
+              border-width: 12px 10px 0 10px;
 
+              border-color: #0688d2 transparent transparent transparent;
 
+              -webkit-transform: translate(-50%, 100%);
 
+              transform: translate(-50%, 100%);
 
+              opacity: 0.7;
 
+            }
 
           }
 
-          .requirements {
 
-            font-size: 16px;
 
-            line-height: 36px;
 
-            padding: 16px;
 
-            margin: 16px 0;
 
+        }
 
+
 
+        .consult {
 
+          margin-top: 0.8rem;
 
+
 
+          .form-item {
 
+            .form-control {
 
+              position: relative;
 
+              .form-label {
 
+                color: #505050;
 
+                text-align: left;
 
+              }
 
+
 
+              &.select-group {
 
+                display: block;
 
+              }
 
+
 
+              textarea::-webkit-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::-moz-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea:-ms-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::-ms-input-placeholder {
 
+                color: #999;
 
+              }
 
+
 
+              textarea::placeholder {
 
+                color: #999;
 
+              }
 
+            }
 
           }
 
-          .link {
 
-            padding: 0 16px;
 
-            margin-bottom: 24px;
 
-            a {
 
-              font-size: 16px;
 
-              color: #0688d2;
 
+
 
+          .form-submit {
 
+            margin-top: 0.67rem;
 
+            margin-bottom: 0.67rem;
 
+            button {
 
+              width: 6rem;
 
+              font-size: 0.26rem;
 
+            }
 
+          }
 
+        }
 
+
 
+        .title {
 
+          font-size: 0.32rem;
 
+          margin: 0.4rem 0 0.24rem;
 
+        }
 
+
 
+        .collapse {
 
+          .collapse-wrapper {
 
+            overflow: hidden;
 
+          }
 
+        }
 
+
 
+        &.join-form {
 
+          margin-bottom: 0.8rem;
 
+        }
 
+
 
+        .job-list {
 
+          padding-bottom: 1.2rem;
 
+          .job {
 
+            margin-top: 0.24rem;
 
+            &.active {
 
+              .name {
 
+                background-color: #0688d2;
 
+                color: #fff;
 
+                background-image: url(/img/contact-icon-down.png);
 
+              }
 
+            }
 
+
 
+            .name {
 
+              line-height: 0.9rem;
 
+              padding: 0 0.24rem;
 
+              border: 0.01rem solid #dedede;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              cursor: pointer;
 
+              -webkit-transition: background-color 0.2s;
 
+              transition: background-color 0.2s;
 
+
 
+              background-repeat: no-repeat;
 
+              background-position: 96% center;
 
+              background-size: 0.48rem;
 
+              background-image: url(/img/contact-icon-up.png);
 
+              background-color: #fff;
 
+              font-size: 0.26rem;
 
+            }
 
+            .requirements {
 
+              line-height: 0.48rem;
 
+              padding: 0.16rem;
 
+              margin: 0.16rem 0;
 
+
 
+              p {
 
+                font-size: 0.24rem;
 
+              }
 
+            }
 
+            .link {
 
+              padding: 0 0.16rem;
 
+              margin-bottom: 0.24rem;
 
+              a {
 
+                display: block;
 
+                font-size: 0.24rem;
 
+                color: #0688d2;
 
+              }
 
             }
 
           }
 
         }
 
       }
 
     }
 
   }
 
-}
 
 
-.footer {
 
-  margin-top: 80px;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 492 - 305
css/cooperative.css
Целия файл 

@@ -1,307 +1,494 @@
 
-.banner {
 
-  width: 100%;
 
-  height: 530px;
 
-}
 
-.banner img {
 
-  width: 100%;
 
-  height: 100%;
 
-  display: block;
 
-}
 
+@media screen and (min-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 530px;
 
+  }
 
+  .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+    display: block;
 
+  }
 
 
-.main {
 
-  height: auto;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .cooperative-tab {
 
-  width: 100%;
 
-  height: 100px;
 
-  background-color: #f7f7f7;
 
-}
 
-.main .cooperative-tab .tab-item-last {
 
-  display: block;
 
-  width: 300px;
 
-  float: left;
 
-  height: 100%;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 25px 0;
 
-  position: relative;
 
-}
 
-.main .cooperative-tab .tab-item-last h1 {
 
-  font-size: 24px;
 
-  color: #272727;
 
-  line-height: 30px;
 
-  text-align: center;
 
-}
 
-.main .cooperative-tab .tab-item-last p {
 
-  font-size: 12px;
 
-  color: #272727;
 
-  line-height: 20px;
 
-  text-align: center;
 
-}
 
-.main .cooperative-tab .tab-item {
 
-  display: block;
 
-  width: 300px;
 
-  float: left;
 
-  height: 100%;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 25px 0;
 
-  position: relative;
 
-}
 
-.main .cooperative-tab .tab-item.select h1 {
 
-  color: #0688d2;
 
-}
 
-.main .cooperative-tab .tab-item.select p {
 
-  color: #0688d2;
 
-}
 
-.main .cooperative-tab .tab-item.select::before {
 
-  content: "";
 
-  width: 0;
 
-  height: 0;
 
-  border-left: 9px solid transparent;
 
-  border-right: 9px solid transparent;
 
-  border-bottom: 9px solid #0688d2;
 
-  position: absolute;
 
-  bottom: 0;
 
-  left: 50%;
 
-  margin-left: -5px;
 
-}
 
-.main .cooperative-tab .tab-item .line {
 
-  display: block;
 
-  width: 1px;
 
-  height: 32px;
 
-  background-color: #dbdbdb;
 
-  position: absolute;
 
-  right: 0;
 
-  top: 35px;
 
-}
 
-.main .cooperative-tab .tab-item h1 {
 
-  font-size: 24px;
 
-  color: #272727;
 
-  line-height: 30px;
 
-  text-align: center;
 
-}
 
-.main .cooperative-tab .tab-item p {
 
-  font-size: 12px;
 
-  color: #272727;
 
-  line-height: 20px;
 
-  text-align: center;
 
-}
 
-.main .cooperative-main {
 
-  width: 100%;
 
-  min-width: 1000px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 60px 0;
 
-}
 
-.main .cooperative-main .cooperative-main-item {
 
-  display: none;
 
-}
 
-.main .cooperative-main .cooperative-main-item.select {
 
-  display: block;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-title {
 
-  width: 400px;
 
-  margin: 0 auto;
 
-  position: relative;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-title img {
 
-  margin: 0 auto;
 
-  display: block;
 
-  height: 50px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-title p {
 
-  width: 100%;
 
-  height: 30px;
 
-  line-height: 30px;
 
-  font-size: 34px;
 
-  color: #272727;
 
-  text-align: center;
 
-  position: absolute;
 
-  bottom: -12px;
 
-  left: 0;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content {
 
-  width: 100%;
 
-  height: auto;
 
-  margin-top: 100px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-item {
 
-  width: 286px;
 
-  height: 592px;
 
-  float: left;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item {
 
-  width: 286px;
 
-  height: 286px;
 
-  overflow: hidden;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item:hover img {
 
-  -webkit-transform: scale(1.2);
 
-  transform: scale(1.2);
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item img {
 
-  width: 286px;
 
-  height: 286px;
 
-  display: block;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-item .item.first {
 
-  margin-bottom: 18px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mids {
 
-  width: 592px;
 
-  height: 592px;
 
-  float: left;
 
-  margin: 0 18px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item {
 
-  width: 592px;
 
-  height: 592px;
 
-  overflow: hidden;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item:hover img {
 
-  -webkit-transform: scale(1.2);
 
-  transform: scale(1.2);
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item img {
 
-  width: 592px;
 
-  height: 592px;
 
-  display: block;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve {
 
-  width: 400px;
 
-  height: auto;
 
-  padding: 30px 32px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-  cursor: pointer;
 
-  float: left;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve:hover {
 
-  background-color: #fff;
 
-  -webkit-transform: translateY(-10px);
 
-  transform: translateY(-10px);
 
-  -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title {
 
-  width: 336px;
 
-  height: 216px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 40px 0;
 
-  background: url(/img/cooperative_server@2x.png);
 
-  background-size: cover;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title {
 
-  width: 100%;
 
-  line-height: 45px;
 
-  margin-top: 20px;
 
-  position: relative;
 
-  font-size: 34px;
 
-  color: #ffffff;
 
-  text-align: center;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title::before {
 
-  content: "";
 
-  width: 16px;
 
-  height: 2px;
 
-  background-color: #fff;
 
-  position: absolute;
 
-  top: -8px;
 
-  left: 50%;
 
-  margin-left: -8px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title img {
 
-  width: 40px;
 
-  height: 40px;
 
-  display: block;
 
-  margin: 0 auto;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text {
 
-  width: 100%;
 
-  height: auto;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding-top: 24px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p {
 
-  line-height: 30px;
 
-  font-size: 16px;
 
-  color: #505050;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p.max {
 
-  display: none;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text .btn-show {
 
-  display: block;
 
-  width: 100px;
 
-  height: 28px;
 
-  text-align: center;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  border: 1px solid #e8e8e8;
 
-  color: #999999;
 
-  font-size: 12px;
 
-  line-height: 28px;
 
-  float: left;
 
-  margin-top: 20px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode {
 
-  width: 580px;
 
-  height: 180px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 24px 12px;
 
-  border: 1px solid #e8e8e8;
 
-  margin-right: 40px;
 
-  margin-bottom: 40px;
 
-  -webkit-transition: all 0.5s;
 
-  transition: all 0.5s;
 
-  float: left;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode:hover {
 
-  -webkit-transform: translateY(-10px);
 
-  transform: translateY(-10px);
 
-  -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-  box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode:nth-child(2n) {
 
-  margin-right: 0;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label {
 
-  width: 56px;
 
-  height: 100%;
 
-  float: left;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label img {
 
-  width: 56px;
 
-  height: 56px;
 
-  float: left;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content {
 
-  width: 500px;
 
-  height: 100%;
 
-  margin-left: 12px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content h1 {
 
-  font-size: 24px;
 
-  color: #272727;
 
-  line-height: 32px;
 
-  text-align: left;
 
-  margin-bottom: 10px;
 
-}
 
-.main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content p {
 
-  font-size: 16px;
 
-  color: #505050;
 
-  line-height: 25px;
 
-  text-align: justify;
 
+  .main {
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .cooperative-tab {
 
+    width: 100%;
 
+    height: 100px;
 
+    background-color: #f7f7f7;
 
+  }
 
+  .main .cooperative-tab .tab-item-last {
 
+    display: block;
 
+    width: 300px;
 
+    float: left;
 
+    height: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 25px 0;
 
+    position: relative;
 
+  }
 
+  .main .cooperative-tab .tab-item-last h1 {
 
+    font-size: 24px;
 
+    color: #272727;
 
+    line-height: 30px;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-tab .tab-item-last p {
 
+    font-size: 12px;
 
+    color: #272727;
 
+    line-height: 20px;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-tab .tab-item {
 
+    display: block;
 
+    width: 300px;
 
+    float: left;
 
+    height: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 25px 0;
 
+    position: relative;
 
+  }
 
+  .main .cooperative-tab .tab-item.select h1 {
 
+    color: #0688d2;
 
+  }
 
+  .main .cooperative-tab .tab-item.select p {
 
+    color: #0688d2;
 
+  }
 
+  .main .cooperative-tab .tab-item.select::before {
 
+    content: "";
 
+    width: 0;
 
+    height: 0;
 
+    border-left: 9px solid transparent;
 
+    border-right: 9px solid transparent;
 
+    border-bottom: 9px solid #0688d2;
 
+    position: absolute;
 
+    bottom: 0;
 
+    left: 50%;
 
+    margin-left: -5px;
 
+  }
 
+  .main .cooperative-tab .tab-item .line {
 
+    display: block;
 
+    width: 1px;
 
+    height: 32px;
 
+    background-color: #dbdbdb;
 
+    position: absolute;
 
+    right: 0;
 
+    top: 35px;
 
+  }
 
+  .main .cooperative-tab .tab-item h1 {
 
+    font-size: 24px;
 
+    color: #272727;
 
+    line-height: 30px;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-tab .tab-item p {
 
+    font-size: 12px;
 
+    color: #272727;
 
+    line-height: 20px;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-main {
 
+    width: 100%;
 
+    min-width: 1000px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 60px 0;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item {
 
+    display: none;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item.select {
 
+    display: block;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title {
 
+    width: 400px;
 
+    margin: 0 auto;
 
+    position: relative;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title img {
 
+    margin: 0 auto;
 
+    display: block;
 
+    height: 50px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title p {
 
+    width: 100%;
 
+    height: 30px;
 
+    line-height: 30px;
 
+    font-size: 34px;
 
+    color: #272727;
 
+    text-align: center;
 
+    position: absolute;
 
+    bottom: -12px;
 
+    left: 0;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content {
 
+    width: 100%;
 
+    height: auto;
 
+    margin-top: 100px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item {
 
+    width: 286px;
 
+    height: 592px;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item {
 
+    width: 286px;
 
+    height: 286px;
 
+    overflow: hidden;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item:hover img {
 
+    -webkit-transform: scale(1.2);
 
+    transform: scale(1.2);
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item img {
 
+    width: 286px;
 
+    height: 286px;
 
+    display: block;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item.first {
 
+    margin-bottom: 18px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids {
 
+    width: 592px;
 
+    height: 592px;
 
+    float: left;
 
+    margin: 0 18px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item {
 
+    width: 592px;
 
+    height: 592px;
 
+    overflow: hidden;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item:hover img {
 
+    -webkit-transform: scale(1.2);
 
+    transform: scale(1.2);
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item img {
 
+    width: 592px;
 
+    height: 592px;
 
+    display: block;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve {
 
+    width: 400px;
 
+    height: auto;
 
+    padding: 30px 32px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+    cursor: pointer;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve:hover {
 
+    background-color: #fff;
 
+    -webkit-transform: translateY(-10px);
 
+    transform: translateY(-10px);
 
+    -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+    box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title {
 
+    width: 336px;
 
+    height: 216px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 40px 0;
 
+    background: url(/img/cooperative_server@2x.png);
 
+    background-size: cover;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title {
 
+    width: 100%;
 
+    line-height: 45px;
 
+    margin-top: 20px;
 
+    position: relative;
 
+    font-size: 34px;
 
+    color: #ffffff;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title::before {
 
+    content: "";
 
+    width: 16px;
 
+    height: 2px;
 
+    background-color: #fff;
 
+    position: absolute;
 
+    top: -8px;
 
+    left: 50%;
 
+    margin-left: -8px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title img {
 
+    width: 40px;
 
+    height: 40px;
 
+    display: block;
 
+    margin: 0 auto;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text {
 
+    width: 100%;
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-top: 24px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p {
 
+    line-height: 30px;
 
+    font-size: 16px;
 
+    color: #505050;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p.max {
 
+    display: none;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text .btn-show {
 
+    display: block;
 
+    width: 100px;
 
+    height: 28px;
 
+    text-align: center;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #e8e8e8;
 
+    color: #999999;
 
+    font-size: 12px;
 
+    line-height: 28px;
 
+    float: left;
 
+    margin-top: 20px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode {
 
+    width: 580px;
 
+    height: 180px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 24px 12px;
 
+    border: 1px solid #e8e8e8;
 
+    margin-right: 40px;
 
+    margin-bottom: 40px;
 
+    -webkit-transition: all 0.5s;
 
+    transition: all 0.5s;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode:hover {
 
+    -webkit-transform: translateY(-10px);
 
+    transform: translateY(-10px);
 
+    -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+    box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode:nth-child(2n) {
 
+    margin-right: 0;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label {
 
+    width: 56px;
 
+    height: 100%;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label img {
 
+    width: 56px;
 
+    height: 56px;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content {
 
+    width: 500px;
 
+    height: 100%;
 
+    margin-left: 12px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content h1 {
 
+    font-size: 24px;
 
+    color: #272727;
 
+    line-height: 32px;
 
+    text-align: left;
 
+    margin-bottom: 10px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content p {
 
+    font-size: 16px;
 
+    color: #505050;
 
+    line-height: 25px;
 
+    text-align: justify;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 2.08rem;
 
+  }
 
+  .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+    display: block;
 
+  }
 
+
 
+  .main {
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .cooperative-tab {
 
+    display: none;
 
+  }
 
+  .main .cooperative-main {
 
+    width: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item {
 
+    display: block !important;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title {
 
+    margin: 1.2rem auto 0.4rem;
 
+    position: relative;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title img {
 
+    margin: 0 auto;
 
+    display: block;
 
+    height: 0.5rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-title p {
 
+    width: 100%;
 
+    font-size: 0.34rem;
 
+    color: #272727;
 
+    text-align: center;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content {
 
+    width: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0 0.32rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item {
 
+    width: 1.64rem;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item {
 
+    width: 1.64rem;
 
+    height: 1.64rem;
 
+    overflow: hidden;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item img {
 
+    width: 1.64rem;
 
+    height: 1.64rem;
 
+    display: block;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-item .item.first {
 
+    margin-bottom: 0.1rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids {
 
+    width: 3.36rem;
 
+    height: 3.36rem;
 
+    float: left;
 
+    margin: 0 0.1rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item {
 
+    width: 3.36rem;
 
+    height: 3.36rem;
 
+    overflow: hidden;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mids .item img {
 
+    width: 3.36rem;
 
+    height: 3.36rem;
 
+    display: block;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve {
 
+    width: 5.12rem;
 
+    margin: 0.4rem auto;
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0.4rem;
 
+    border: 0.01rem solid #e8e8e8;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    background: url(/img/cooperative_server@2x.png);
 
+    background-size: cover;
 
+    height: 4.32rem;
 
+    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 .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title {
 
+    width: 100%;
 
+    position: relative;
 
+    font-size: 0.34rem;
 
+    color: #ffffff;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title .title::before {
 
+    content: "";
 
+    display: block;
 
+    width: 0.32rem;
 
+    height: 0.03rem;
 
+    background-color: #fff;
 
+    margin: 0.24rem auto;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-title img {
 
+    width: 0.56rem;
 
+    height: 0.56rem;
 
+    display: block;
 
+    margin: 0 auto;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text {
 
+    width: 100%;
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-top: 0.32rem;
 
+    text-align: center;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text p {
 
+    line-height: 0.42rem;
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text .min {
 
+    display: none;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-serve .server-text .btn-show {
 
+    display: none;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 0.01rem solid #e8e8e8;
 
+    padding: 0.24rem;
 
+    margin-bottom: 0.32rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label {
 
+    width: 0.66rem;
 
+    float: left;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-label img {
 
+    width: 0.66rem;
 
+    height: 0.66rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content {
 
+    float: left;
 
+    width: 5.52rem;
 
+    height: 100%;
 
+    margin-left: 0.16rem;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content h1 {
 
+    font-size: 0.3rem;
 
+    color: #272727;
 
+    line-height: 32px;
 
+  }
 
+  .main .cooperative-main .cooperative-main-item .main-content .main-content-mode .mode-content p {
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+    line-height: 0.4rem;
 
+    text-align: justify;
 
+  }
 
 }

+ 449 - 257
css/cooperative.scss
Целия файл 

@@ -1,308 +1,500 @@
 
-.banner {
 
-  width: 100%;
 
-  height: 530px;
 
-  img {
 
+@media screen and (min-width: 768px) {
 
+  .banner {
 
     width: 100%;
 
-    height: 100%;
 
-    display: block;
 
-  }
 
-}
 
-.main {
 
-  height: auto;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  .cooperative-tab {
 
-    width: 100%;
 
-    height: 100px;
 
-    background-color: #f7f7f7;
 
-    .tab-item-last {
 
-      display: block;
 
-      width: 300px;
 
-      float: left;
 
+    height: 530px;
 
+    img {
 
+      width: 100%;
 
       height: 100%;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
-      padding: 25px 0;
 
-      position: relative;
 
-      h1 {
 
-        font-size: 24px;
 
-        color: #272727;
 
-        line-height: 30px;
 
-        text-align: center;
 
-      }
 
-      p {
 
-        font-size: 12px;
 
-        color: #272727;
 
-        line-height: 20px;
 
-        text-align: center;
 
-      }
 
-    }
 
-    .tab-item {
 
       display: block;
 
-      width: 300px;
 
-      float: left;
 
-      height: 100%;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
-      padding: 25px 0;
 
-      position: relative;
 
-      &.select {
 
-        h1 {
 
-          color: #0688d2;
 
-        }
 
-        p {
 
-          color: #0688d2;
 
-        }
 
-        &::before {
 
-          content: '';
 
-          width: 0;
 
-          height: 0;
 
-          border-left: 9px solid transparent;
 
-          border-right: 9px solid transparent;
 
-          border-bottom: 9px solid #0688d2;
 
-          position: absolute;
 
-          bottom: 0;
 
-          left: 50%;
 
-          margin-left: -5px;
 
-        }
 
-      }
 
-      .line {
 
-        display: block;
 
-        width: 1px;
 
-        height: 32px;
 
-        background-color: #dbdbdb;
 
-        position: absolute;
 
-        right: 0;
 
-        top: 35px;
 
-      }
 
-      h1 {
 
-        font-size: 24px;
 
-        color: #272727;
 
-        line-height: 30px;
 
-        text-align: center;
 
-      }
 
-      p {
 
-        font-size: 12px;
 
-        color: #272727;
 
-        line-height: 20px;
 
-        text-align: center;
 
-      }
 
     }
 
   }
 
-  .cooperative-main {
 
-    width: 100%;
 
-    min-width: 1000px;
 
+  .main {
 
+    height: auto;
 
     -webkit-box-sizing: border-box;
 
     box-sizing: border-box;
 
-    padding: 60px 0;
 
-    .cooperative-main-item {
 
-      display: none;
 
-      &.select {
 
+    .cooperative-tab {
 
+      width: 100%;
 
+      height: 100px;
 
+      background-color: #f7f7f7;
 
+      .tab-item-last {
 
         display: block;
 
+        width: 300px;
 
+        float: left;
 
+        height: 100%;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        padding: 25px 0;
 
+        position: relative;
 
+        h1 {
 
+          font-size: 24px;
 
+          color: #272727;
 
+          line-height: 30px;
 
+          text-align: center;
 
+        }
 
+        p {
 
+          font-size: 12px;
 
+          color: #272727;
 
+          line-height: 20px;
 
+          text-align: center;
 
+        }
 
       }
 
-      .main-title {
 
-        width: 400px;
 
-        margin: 0 auto;
 
+      .tab-item {
 
+        display: block;
 
+        width: 300px;
 
+        float: left;
 
+        height: 100%;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        padding: 25px 0;
 
         position: relative;
 
-        img {
 
-          margin: 0 auto;
 
+        &.select {
 
+          h1 {
 
+            color: #0688d2;
 
+          }
 
+          p {
 
+            color: #0688d2;
 
+          }
 
+          &::before {
 
+            content: '';
 
+            width: 0;
 
+            height: 0;
 
+            border-left: 9px solid transparent;
 
+            border-right: 9px solid transparent;
 
+            border-bottom: 9px solid #0688d2;
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 50%;
 
+            margin-left: -5px;
 
+          }
 
+        }
 
+        .line {
 
           display: block;
 
-          height: 50px;
 
+          width: 1px;
 
+          height: 32px;
 
+          background-color: #dbdbdb;
 
+          position: absolute;
 
+          right: 0;
 
+          top: 35px;
 
         }
 
-        p {
 
-          width: 100%;
 
-          height: 30px;
 
+        h1 {
 
+          font-size: 24px;
 
+          color: #272727;
 
           line-height: 30px;
 
-          font-size: 34px;
 
+          text-align: center;
 
+        }
 
+        p {
 
+          font-size: 12px;
 
           color: #272727;
 
+          line-height: 20px;
 
           text-align: center;
 
-          position: absolute;
 
-          bottom: -12px;
 
-          left: 0;
 
         }
 
       }
 
-      .main-content {
 
-        width: 100%;
 
-        height: auto;
 
-        margin-top: 100px;
 
-        .main-content-item {
 
-          width: 286px;
 
-          height: 592px;
 
-          float: left;
 
-          .item {
 
+    }
 
+    .cooperative-main {
 
+      width: 100%;
 
+      min-width: 1000px;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      padding: 60px 0;
 
+      .cooperative-main-item {
 
+        display: none;
 
+        &.select {
 
+          display: block;
 
+        }
 
+        .main-title {
 
+          width: 400px;
 
+          margin: 0 auto;
 
+          position: relative;
 
+          img {
 
+            margin: 0 auto;
 
+            display: block;
 
+            height: 50px;
 
+          }
 
+          p {
 
+            width: 100%;
 
+            height: 30px;
 
+            line-height: 30px;
 
+            font-size: 34px;
 
+            color: #272727;
 
+            text-align: center;
 
+            position: absolute;
 
+            bottom: -12px;
 
+            left: 0;
 
+          }
 
+        }
 
+        .main-content {
 
+          width: 100%;
 
+          height: auto;
 
+          margin-top: 100px;
 
+          .main-content-item {
 
             width: 286px;
 
-            height: 286px;
 
-            overflow: hidden;
 
-            &:hover {
 
-              img {
 
-                -webkit-transform: scale(1.2);
 
-                transform: scale(1.2);
 
-              }
 
-            }
 
-            img {
 
+            height: 592px;
 
+            float: left;
 
+            .item {
 
               width: 286px;
 
               height: 286px;
 
-              display: block;
 
-              -webkit-transition: all 0.4s;
 
-              transition: all 0.4s;
 
-            }
 
-            &.first {
 
-              margin-bottom: 18px;
 
+              overflow: hidden;
 
+              &:hover {
 
+                img {
 
+                  -webkit-transform: scale(1.2);
 
+                  transform: scale(1.2);
 
+                }
 
+              }
 
+              img {
 
+                width: 286px;
 
+                height: 286px;
 
+                display: block;
 
+                -webkit-transition: all 0.4s;
 
+                transition: all 0.4s;
 
+              }
 
+              &.first {
 
+                margin-bottom: 18px;
 
+              }
 
             }
 
           }
 
-        }
 
-        .main-content-mids {
 
-          width: 592px;
 
-          height: 592px;
 
-          float: left;
 
-          margin: 0 18px;
 
-          .item {
 
+          .main-content-mids {
 
             width: 592px;
 
             height: 592px;
 
-            overflow: hidden;
 
-            &:hover {
 
-              img {
 
-                -webkit-transform: scale(1.2);
 
-                transform: scale(1.2);
 
-              }
 
-            }
 
-            img {
 
+            float: left;
 
+            margin: 0 18px;
 
+            .item {
 
               width: 592px;
 
               height: 592px;
 
-              display: block;
 
-              -webkit-transition: all 0.4s;
 
-              transition: all 0.4s;
 
+              overflow: hidden;
 
+              &:hover {
 
+                img {
 
+                  -webkit-transform: scale(1.2);
 
+                  transform: scale(1.2);
 
+                }
 
+              }
 
+              img {
 
+                width: 592px;
 
+                height: 592px;
 
+                display: block;
 
+                -webkit-transition: all 0.4s;
 
+                transition: all 0.4s;
 
+              }
 
             }
 
           }
 
-        }
 
-        .main-content-serve {
 
-          width: 400px;
 
-          height: auto;
 
-          padding: 30px 32px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
-          cursor: pointer;
 
-          float: left;
 
-          &:hover {
 
-            background-color: #fff;
 
-            -webkit-transform: translateY(-10px);
 
-            transform: translateY(-10px);
 
-            -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-            box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-          }
 
-          .server-title {
 
-            width: 336px;
 
-            height: 216px;
 
+          .main-content-serve {
 
+            width: 400px;
 
+            height: auto;
 
+            padding: 30px 32px;
 
             -webkit-box-sizing: border-box;
 
             box-sizing: border-box;
 
-            padding: 40px 0;
 
-            background: url(/img/cooperative_server@2x.png);
 
-            background-size: cover;
 
-            .title {
 
-              width: 100%;
 
-              line-height: 45px;
 
-              margin-top: 20px;
 
-              position: relative;
 
-              font-size: 34px;
 
-              color: #ffffff;
 
-              text-align: center;
 
-              &::before {
 
-                content: '';
 
-                width: 16px;
 
-                height: 2px;
 
-                background-color: #fff;
 
-                position: absolute;
 
-                top: -8px;
 
-                left: 50%;
 
-                margin-left: -8px;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
+            cursor: pointer;
 
+            float: left;
 
+            &:hover {
 
+              background-color: #fff;
 
+              -webkit-transform: translateY(-10px);
 
+              transform: translateY(-10px);
 
+              -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+              box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+            }
 
+            .server-title {
 
+              width: 336px;
 
+              height: 216px;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              padding: 40px 0;
 
+              background: url(/img/cooperative_server@2x.png);
 
+              background-size: cover;
 
+              .title {
 
+                width: 100%;
 
+                line-height: 45px;
 
+                margin-top: 20px;
 
+                position: relative;
 
+                font-size: 34px;
 
+                color: #ffffff;
 
+                text-align: center;
 
+                &::before {
 
+                  content: '';
 
+                  width: 16px;
 
+                  height: 2px;
 
+                  background-color: #fff;
 
+                  position: absolute;
 
+                  top: -8px;
 
+                  left: 50%;
 
+                  margin-left: -8px;
 
+                }
 
+              }
 
+              img {
 
+                width: 40px;
 
+                height: 40px;
 
+                display: block;
 
+                margin: 0 auto;
 
               }
 
             }
 
-            img {
 
-              width: 40px;
 
-              height: 40px;
 
-              display: block;
 
-              margin: 0 auto;
 
+            .server-text {
 
+              width: 100%;
 
+              height: auto;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              padding-top: 24px;
 
+              p {
 
+                line-height: 30px;
 
+                font-size: 16px;
 
+                color: #505050;
 
+                &.max {
 
+                  display: none;
 
+                }
 
+              }
 
+              .btn-show {
 
+                display: block;
 
+                width: 100px;
 
+                height: 28px;
 
+                text-align: center;
 
+                -webkit-box-sizing: border-box;
 
+                box-sizing: border-box;
 
+                border: 1px solid #e8e8e8;
 
+                color: #999999;
 
+                font-size: 12px;
 
+                line-height: 28px;
 
+                float: left;
 
+                margin-top: 20px;
 
+              }
 
             }
 
           }
 
-          .server-text {
 
-            width: 100%;
 
-            height: auto;
 
+          .main-content-mode {
 
+            width: 580px;
 
+            height: 180px;
 
             -webkit-box-sizing: border-box;
 
             box-sizing: border-box;
 
-            padding-top: 24px;
 
-            p {
 
-              line-height: 30px;
 
-              font-size: 16px;
 
-              color: #505050;
 
-              &.max {
 
-                display: none;
 
-              }
 
+            padding: 24px 12px;
 
+            border: 1px solid #e8e8e8;
 
+            margin-right: 40px;
 
+            margin-bottom: 40px;
 
+            -webkit-transition: all 0.5s;
 
+            transition: all 0.5s;
 
+            float: left;
 
+            &:hover {
 
+              -webkit-transform: translateY(-10px);
 
+              transform: translateY(-10px);
 
+              -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
+              box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
             }
 
-            .btn-show {
 
-              display: block;
 
-              width: 100px;
 
-              height: 28px;
 
-              text-align: center;
 
-              -webkit-box-sizing: border-box;
 
-              box-sizing: border-box;
 
-              border: 1px solid #e8e8e8;
 
-              color: #999999;
 
-              font-size: 12px;
 
-              line-height: 28px;
 
+            &:nth-child(2n) {
 
+              margin-right: 0;
 
+            }
 
+            .mode-label {
 
+              width: 56px;
 
+              height: 100%;
 
               float: left;
 
-              margin-top: 20px;
 
+              img {
 
+                width: 56px;
 
+                height: 56px;
 
+                float: left;
 
+              }
 
+            }
 
+            .mode-content {
 
+              width: 500px;
 
+              height: 100%;
 
+              margin-left: 12px;
 
+              h1 {
 
+                font-size: 24px;
 
+                color: #272727;
 
+                line-height: 32px;
 
+                text-align: left;
 
+                margin-bottom: 10px;
 
+              }
 
+              p {
 
+                font-size: 16px;
 
+                color: #505050;
 
+                line-height: 25px;
 
+                text-align: justify;
 
+              }
 
             }
 
           }
 
         }
 
-        .main-content-mode {
 
-          width: 580px;
 
-          height: 180px;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .banner {
 
+    width: 100%;
 
+    height: 2.08rem;
 
+    img {
 
+      width: 100%;
 
+      height: 100%;
 
+      display: block;
 
+    }
 
+  }
 
+  .main {
 
+    height: auto;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    .cooperative-tab {
 
+      display: none;
 
+    }
 
+    .cooperative-main {
 
+      width: 100%;
 
+      -webkit-box-sizing: border-box;
 
+      box-sizing: border-box;
 
+      .cooperative-main-item {
 
+        display: block !important;
 
+
 
+        .main-title {
 
+          margin: 1.2rem auto 0.4rem;
 
+          position: relative;
 
+          img {
 
+            margin: 0 auto;
 
+            display: block;
 
+            height: 0.5rem;
 
+          }
 
+          p {
 
+            width: 100%;
 
+            font-size: 0.34rem;
 
+            color: #272727;
 
+            text-align: center;
 
+            -webkit-transform: translateY(-50%);
 
+            transform: translateY(-50%);
 
+          }
 
+        }
 
+        .main-content {
 
+          width: 100%;
 
           -webkit-box-sizing: border-box;
 
           box-sizing: border-box;
 
-          padding: 24px 12px;
 
-          border: 1px solid #e8e8e8;
 
-          margin-right: 40px;
 
-          margin-bottom: 40px;
 
-          -webkit-transition: all 0.5s;
 
-          transition: all 0.5s;
 
-          float: left;
 
-          &:hover {
 
-            -webkit-transform: translateY(-10px);
 
-            transform: translateY(-10px);
 
-            -webkit-box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-            box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
 
-          }
 
-          &:nth-child(2n) {
 
-            margin-right: 0;
 
+          padding: 0 0.32rem;
 
+          .main-content-item {
 
+            width: 1.64rem;
 
+            float: left;
 
+            .item {
 
+              width: 1.64rem;
 
+              height: 1.64rem;
 
+              overflow: hidden;
 
+
 
+              img {
 
+                width: 1.64rem;
 
+                height: 1.64rem;
 
+                display: block;
 
+              }
 
+              &.first {
 
+                margin-bottom: 0.1rem;
 
+              }
 
+            }
 
           }
 
-          .mode-label {
 
-            width: 56px;
 
-            height: 100%;
 
+          .main-content-mids {
 
+            width: 3.36rem;
 
+            height: 3.36rem;
 
             float: left;
 
-            img {
 
-              width: 56px;
 
-              height: 56px;
 
-              float: left;
 
+            margin: 0 0.1rem;
 
+            .item {
 
+              width: 3.36rem;
 
+              height: 3.36rem;
 
+              overflow: hidden;
 
+
 
+              img {
 
+                width: 3.36rem;
 
+                height: 3.36rem;
 
+                display: block;
 
+              }
 
+            }
 
+          }
 
+          .main-content-serve {
 
+            width: 5.12rem;
 
+            margin: 0.4rem auto;
 
+            height: auto;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0.4rem;
 
+            border: 0.01rem solid #e8e8e8;
 
+
 
+            .server-title {
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              background: url(/img/cooperative_server@2x.png);
 
+              background-size: cover;
 
+              height: 4.32rem;
 
+              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 {
 
+                width: 100%;
 
+                position: relative;
 
+                font-size: 0.34rem;
 
+                color: #ffffff;
 
+                text-align: center;
 
+                &::before {
 
+                  content: '';
 
+                  display: block;
 
+                  width: 0.32rem;
 
+                  height: 0.03rem;
 
+                  background-color: #fff;
 
+                  margin: 0.24rem auto;
 
+                }
 
+              }
 
+              img {
 
+                width: 0.56rem;
 
+                height: 0.56rem;
 
+                display: block;
 
+                margin: 0 auto;
 
+              }
 
+            }
 
+            .server-text {
 
+              width: 100%;
 
+              height: auto;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              padding-top: 0.32rem;
 
+              text-align: center;
 
+              p {
 
+                line-height: 0.42rem;
 
+                font-size: 0.24rem;
 
+                color: #505050;
 
+              }
 
+              .min {
 
+                display: none;
 
+              }
 
+              .btn-show {
 
+                display: none;
 
+              }
 
             }
 
           }
 
-          .mode-content {
 
-            width: 500px;
 
-            height: 100%;
 
-            margin-left: 12px;
 
-            h1 {
 
-              font-size: 24px;
 
-              color: #272727;
 
-              line-height: 32px;
 
-              text-align: left;
 
-              margin-bottom: 10px;
 
+          .main-content-mode {
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            border: 0.01rem solid #e8e8e8;
 
+            padding: 0.24rem;
 
+            margin-bottom: 0.32rem;
 
+
 
+            .mode-label {
 
+              width: 0.66rem;
 
+              float: left;
 
+              img {
 
+                width: 0.66rem;
 
+                height: 0.66rem;
 
+              }
 
             }
 
-            p {
 
-              font-size: 16px;
 
-              color: #505050;
 
-              line-height: 25px;
 
-              text-align: justify;
 
+            .mode-content {
 
+              float: left;
 
+              width: 5.52rem;
 
+              height: 100%;
 
+              margin-left: 0.16rem;
 
+              h1 {
 
+                font-size: 0.3rem;
 
+                color: #272727;
 
+                line-height: 32px;
 
+              }
 
+              p {
 
+                font-size: 0.24rem;
 
+                color: #505050;
 
+                line-height: 0.4rem;
 
+                text-align: justify;
 
+              }
 
             }
 
           }
 
         }

+ 711 - 385
css/index.css
Целия файл 

@@ -1,393 +1,719 @@
 
 @charset "UTF-8";
 
 /* scss中可以用mixin来扩展 */
 
-.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;
 
-}
 
+@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%;
 
-}
 
+  .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;
 
-  height: 286px;
 
-  float: left;
 
-  background-color: #ddd;
 
-}
 
-.main .container.our-brand .content .item:first-child {
 
-  width: 592px;
 
-  height: 592px;
 
-}
 
-.main .container.our-brand .content .item img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.main .container.our-brand .content .item:hover .active {
 
-  opacity: 1;
 
-}
 
-.main .container.our-brand .content .item .active {
 
-  opacity: 0;
 
-  position: absolute;
 
-  left: 0;
 
-  top: 0;
 
-  z-index: 2;
 
-  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-color: rgba(0, 0, 0, 0.5);
 
-  -webkit-transition: opacity 0.4s;
 
-  transition: opacity 0.4s;
 
-}
 
-.main .container.our-brand .content .item .active .title {
 
-  font-size: 34px;
 
-  color: #fff;
 
-}
 
-.main .container.our-brand .content .item .active .line {
 
-  width: 40px;
 
-  height: 1px;
 
-  margin: 32px 0 60px;
 
-  background-color: #fff;
 
-}
 
-.main .container.our-brand .content .item .active .link {
 
-  width: 160px;
 
-  height: 48px;
 
-  border: 1px solid #ffffff;
 
-  text-align: center;
 
-  line-height: 48px;
 
-  color: #fff;
 
-  cursor: pointer;
 
-}
 
-.main .container.brand-activity .content {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: center;
 
-  -ms-flex-pack: center;
 
-  justify-content: center;
 
-}
 
-.main .container.brand-activity .content .item {
 
-  position: relative;
 
-  width: 280px;
 
-  height: 600px;
 
-  overflow: hidden;
 
-  -ms-flex-negative: 0;
 
-  flex-shrink: 0;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .container.brand-activity .content .item a {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.main .container.brand-activity .content .item img {
 
-  position: absolute;
 
-  top: 0;
 
-  left: 50%;
 
-  -webkit-transform: translateX(-50%);
 
-  transform: translateX(-50%);
 
-  display: block;
 
-  width: 640px;
 
-  height: 600px;
 
-}
 
-.main .container.brand-activity .content .item.hover {
 
-  width: 640px;
 
-}
 
-.main .container.brand-activity .content .item:nth-child(1) .cover::after {
 
-  content: "01";
 
-}
 
-.main .container.brand-activity .content .item:nth-child(2) .cover::after {
 
-  content: "02";
 
-}
 
-.main .container.brand-activity .content .item:nth-child(3) .cover::after {
 
-  content: "03";
 
-}
 
-.main .container.brand-activity .content .item .active {
 
-  position: absolute;
 
-  width: 100%;
 
-  height: 280px;
 
-  bottom: 0;
 
-  left: 0;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding-left: 24px;
 
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.88)), to(rgba(0, 0, 0, 0)));
 
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
 
-}
 
-.main .container.brand-activity .content .item .active .title {
 
-  margin-top: 206px;
 
-  width: 232px;
 
-  font-size: 24px;
 
-  color: #fff;
 
-  overflow: hidden;
 
-  text-overflow: ellipsis;
 
-  display: -webkit-box;
 
-  -webkit-line-clamp: 1;
 
-  -webkit-box-orient: vertical;
 
-}
 
-.main .container.brand-activity .content .item .active .line {
 
-  width: 20px;
 
-  height: 2px;
 
-  margin-top: 16px;
 
-  background-color: #fff;
 
-}
 
-.main .container.brand-activity .content .item .active .description {
 
-  display: none;
 
-}
 
-.main .container.brand-activity .content .item .active::after {
 
-  position: absolute;
 
-  content: "01";
 
-  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
-  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
-  -webkit-background-clip: text;
 
-  color: transparent;
 
-  font-size: 30px;
 
-  left: 24px;
 
-  bottom: 66px;
 
-}
 
-.main .container.brand-activity .content .item .hover-active {
 
-  position: absolute;
 
-  width: 486px;
 
-  height: 160px;
 
-  padding-top: 32px;
 
-  padding-left: 32px;
 
-  -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));
 
-  -webkit-transition: opacity 0.4s;
 
-  transition: opacity 0.4s;
 
-}
 
-.main .container.brand-activity .content .item .hover-active .title {
 
-  font-size: 24px;
 
-  color: #fff;
 
-  width: 300px;
 
-  overflow: hidden;
 
-  text-overflow: ellipsis;
 
-  display: -webkit-box;
 
-  -webkit-line-clamp: 1;
 
-  -webkit-box-orient: vertical;
 
-}
 
-.main .container.brand-activity .content .item .hover-active .line {
 
-  width: 20px;
 
-  height: 2px;
 
-  margin: 16px 0 22px;
 
-  background-color: #fff;
 
-}
 
-.main .container.brand-activity .content .item .hover-active .description {
 
-  text-align: justify;
 
-  width: 300px;
 
-  font-size: 16px;
 
-  color: #fff;
 
-  line-height: 1.5;
 
-  overflow: hidden;
 
-  text-overflow: ellipsis;
 
-  display: -webkit-box;
 
-  -webkit-line-clamp: 2;
 
-  -webkit-box-orient: vertical;
 
-}
 
-.main .container.brand-activity .content .item .hover-active::after {
 
-  position: absolute;
 
-  content: "01";
 
-  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
-  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
-  -webkit-background-clip: text;
 
-  color: transparent;
 
-  font-size: 90px;
 
-  line-height: 90px;
 
-  right: 32px;
 
-  bottom: 24px;
 
-}
 
-.main .container.company-values .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 .container.company-values .content .item img {
 
-  width: 100%;
 
-  height: 100%;
 
-  opacity: 1;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .container.company-values .content .item.no-mb {
 
-  margin-bottom: 0;
 
-}
 
-.main .container.company-values .content .item.no-mr {
 
-  margin-right: 0;
 
-}
 
-.main .container.company-values .content .item:nth-child(1), .main .container.company-values .content .item:nth-child(7) {
 
-  width: 795px;
 
-}
 
-.main .container.company-values .content .item:hover img {
 
-  -webkit-transform: scale(1.2);
 
-  transform: scale(1.2);
 
-}
 
-.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: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;
 
-}
 
-.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 .subtitle,
 
+  .main .container {
 
+    margin-top: 120px;
 
+  }
 
+  .main .container .section-title {
 
+    margin-bottom: 80px;
 
+  }
 
+  .main .container.our-brand .content .item {
 
+    position: relative;
 
+    width: 286px;
 
+    height: 286px;
 
+    float: left;
 
+    background-color: #ddd;
 
+  }
 
+  .main .container.our-brand .content .item:first-child {
 
+    width: 592px;
 
+    height: 592px;
 
+  }
 
+  .main .container.our-brand .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.our-brand .content .item:hover .active {
 
+    opacity: 1;
 
+  }
 
+  .main .container.our-brand .content .item .active {
 
+    opacity: 0;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 2;
 
+    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-color: rgba(0, 0, 0, 0.5);
 
+    -webkit-transition: opacity 0.4s;
 
+    transition: opacity 0.4s;
 
+  }
 
+  .main .container.our-brand .content .item .active .title {
 
+    font-size: 34px;
 
+    color: #fff;
 
+  }
 
+  .main .container.our-brand .content .item .active .line {
 
+    width: 40px;
 
+    height: 1px;
 
+    margin: 32px 0 60px;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.our-brand .content .item .active .link {
 
+    width: 160px;
 
+    height: 48px;
 
+    border: 1px solid #ffffff;
 
+    text-align: center;
 
+    line-height: 48px;
 
+    color: #fff;
 
+    cursor: pointer;
 
+  }
 
+  .main .container.brand-activity .content {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: center;
 
+    -ms-flex-pack: center;
 
+    justify-content: center;
 
+  }
 
+  .main .container.brand-activity .content .item {
 
+    position: relative;
 
+    width: 280px;
 
+    height: 600px;
 
+    overflow: hidden;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .container.brand-activity .content .item a {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.brand-activity .content .item img {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 50%;
 
+    -webkit-transform: translateX(-50%);
 
+    transform: translateX(-50%);
 
+    display: block;
 
+    width: 640px;
 
+    height: 600px;
 
+  }
 
+  .main .container.brand-activity .content .item.hover {
 
+    width: 640px;
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(1) .cover::after {
 
+    content: "01";
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(2) .cover::after {
 
+    content: "02";
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(3) .cover::after {
 
+    content: "03";
 
+  }
 
+  .main .container.brand-activity .content .item .active {
 
+    position: absolute;
 
+    width: 100%;
 
+    height: 280px;
 
+    bottom: 0;
 
+    left: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding-left: 24px;
 
+    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.88)), to(rgba(0, 0, 0, 0)));
 
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
 
+  }
 
+  .main .container.brand-activity .content .item .active .title {
 
+    margin-top: 206px;
 
+    width: 232px;
 
+    font-size: 24px;
 
+    color: #fff;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.brand-activity .content .item .active .line {
 
+    width: 20px;
 
+    height: 2px;
 
+    margin-top: 16px;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.brand-activity .content .item .active .description {
 
+    display: none;
 
+  }
 
+  .main .container.brand-activity .content .item .active::after {
 
+    position: absolute;
 
+    content: "01";
 
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+    -webkit-background-clip: text;
 
+    color: transparent;
 
+    font-size: 30px;
 
+    left: 24px;
 
+    bottom: 66px;
 
+  }
 
+  .main .container.brand-activity .content .item .hover-active {
 
+    position: absolute;
 
+    width: 486px;
 
+    height: 160px;
 
+    padding-top: 32px;
 
+    padding-left: 32px;
 
+    -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));
 
+    -webkit-transition: opacity 0.4s;
 
+    transition: opacity 0.4s;
 
+  }
 
+  .main .container.brand-activity .content .item .hover-active .title {
 
+    font-size: 24px;
 
+    color: #fff;
 
+    width: 300px;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.brand-activity .content .item .hover-active .line {
 
+    width: 20px;
 
+    height: 2px;
 
+    margin: 16px 0 22px;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.brand-activity .content .item .hover-active .description {
 
+    text-align: justify;
 
+    width: 300px;
 
+    font-size: 16px;
 
+    color: #fff;
 
+    line-height: 1.5;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 2;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.brand-activity .content .item .hover-active::after {
 
+    position: absolute;
 
+    content: "01";
 
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+    -webkit-background-clip: text;
 
+    color: transparent;
 
+    font-size: 90px;
 
+    line-height: 90px;
 
+    right: 32px;
 
+    bottom: 24px;
 
+  }
 
+  .main .container.company-values .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 .container.company-values .content .item img {
 
+    width: 100%;
 
+    height: 100%;
 
+    opacity: 1;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .container.company-values .content .item.no-mb {
 
+    margin-bottom: 0;
 
+  }
 
+  .main .container.company-values .content .item.no-mr {
 
+    margin-right: 0;
 
+  }
 
+  .main .container.company-values .content .item:nth-child(1), .main .container.company-values .content .item:nth-child(7) {
 
+    width: 795px;
 
+  }
 
+  .main .container.company-values .content .item:hover img {
 
+    -webkit-transform: scale(1.2);
 
+    transform: scale(1.2);
 
+  }
 
+  .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: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;
 
+  }
 
+  .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 .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;
 
-}
 
-.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;
 
-}
 
-.main .container.company-values .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-orient: vertical;
 
-  -webkit-box-direction: normal;
 
-  -ms-flex-direction: column;
 
-  flex-direction: column;
 
-  -webkit-box-align: center;
 
-  -ms-flex-align: center;
 
-  align-items: center;
 
-  background: rgba(0, 0, 0, 0.5);
 
-}
 
-.main .container.company-values .content .item .cover .line {
 
-  width: 180px;
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
-  transform: translate(-50%, -50%) rotateZ(-45deg);
 
-}
 
-.main .container.company-values .content .item .cover .line::after, .main .container.company-values .content .item .cover .line::before {
 
-  position: absolute;
 
-  left: 0;
 
-  top: 0;
 
-  content: "";
 
-  display: block;
 
-  width: 20px;
 
-  height: 1px;
 
-  background-color: #fff;
 
-}
 
-.main .container.company-values .content .item .cover .line::before {
 
-  right: 0;
 
-  left: unset;
 
-}
 
-.main .container.company-values .content .item .cover .title {
 
-  color: #fff;
 
-  font-size: 24px;
 
-}
 
-.main .container.company-values .content .item .cover .subtitle {
 
-  font-size: 18px;
 
-  color: #fff;
 
-  margin-top: 12px;
 
-}
 
-.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 .row {
 
-  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;
 
-}
 
-.main .container.friendly_link .content .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;
 
-}
 
-.main .container.friendly_link .content .item:last-child {
 
-  margin-right: 0;
 
-}
 
-.main .container.friendly_link .content .item img {
 
-  display: block;
 
-  width: 100%;
 
-  position: absolute;
 
-  left: 0;
 
-  top: 50%;
 
-  -webkit-transform: translateY(-50%);
 
-  transform: translateY(-50%);
 
+    color: #0688d2;
 
+  }
 
+  .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;
 
+  }
 
+  .main .container.company-values .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-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+    -ms-flex-direction: column;
 
+    flex-direction: column;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    background: rgba(0, 0, 0, 0.5);
 
+  }
 
+  .main .container.company-values .content .item .cover .line {
 
+    width: 180px;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
+    transform: translate(-50%, -50%) rotateZ(-45deg);
 
+  }
 
+  .main .container.company-values .content .item .cover .line::after, .main .container.company-values .content .item .cover .line::before {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    content: "";
 
+    display: block;
 
+    width: 20px;
 
+    height: 1px;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.company-values .content .item .cover .line::before {
 
+    right: 0;
 
+    left: unset;
 
+  }
 
+  .main .container.company-values .content .item .cover .title {
 
+    color: #fff;
 
+    font-size: 24px;
 
+  }
 
+  .main .container.company-values .content .item .cover .subtitle {
 
+    font-size: 18px;
 
+    color: #fff;
 
+    margin-top: 12px;
 
+  }
 
+  .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 .row {
 
+    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;
 
+  }
 
+  .main .container.friendly_link .content .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;
 
+  }
 
+  .main .container.friendly_link .content .item:last-child {
 
+    margin-right: 0;
 
+  }
 
+  .main .container.friendly_link .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+  }
 
+}
 
+@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;
 
+  }
 
+
 
+  .banner {
 
+    width: 100%;
 
+    min-width: 7.5rem;
 
+    height: 2.74rem;
 
+  }
 
+  .banner 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 .item {
 
+    position: relative;
 
+    width: 1.64rem;
 
+    height: 1.64rem;
 
+    float: left;
 
+    background-color: #ddd;
 
+    margin-left: 0.1rem;
 
+    margin-bottom: 0.1rem;
 
+  }
 
+  .main .container.our-brand .content .item:first-child {
 
+    width: 3.38rem;
 
+    height: 3.38rem;
 
+    margin-left: 0;
 
+  }
 
+  .main .container.our-brand .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.our-brand .content .item .active {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    z-index: 2;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.our-brand .content .item .active .title {
 
+    position: absolute;
 
+    bottom: 0;
 
+    left: 0;
 
+    font-size: 0.22rem;
 
+    color: #fff;
 
+    width: 100%;
 
+    line-height: 0.4rem;
 
+    text-align: center;
 
+    background: rgba(0, 0, 0, 0.39);
 
+  }
 
+  .main .container.our-brand .content .item .active .link {
 
+    opacity: 0;
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
+    z-index: 1;
 
+    left: 0;
 
+    top: 0;
 
+  }
 
+  .main .container.brand-activity {
 
+    margin-left: 0;
 
+    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-left: 0.32rem;
 
+  }
 
+  .main .container.brand-activity .content .item:last-child {
 
+    margin-right: 0.32rem;
 
+  }
 
+  .main .container.brand-activity .content .item a {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.brand-activity .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(1) .cover::after {
 
+    content: "01";
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(2) .cover::after {
 
+    content: "02";
 
+  }
 
+  .main .container.brand-activity .content .item:nth-child(3) .cover::after {
 
+    content: "03";
 
+  }
 
+  .main .container.brand-activity .content .item .cover {
 
+    position: absolute;
 
+    width: 4.31rem;
 
+    height: 1.29rem;
 
+    padding-top: 0.24rem;
 
+    padding-left: 0.32rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border-top-left-radius: 0.32rem;
 
+    right: 0;
 
+    bottom: 0;
 
+    background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
 
+    -webkit-transition: opacity 0.4s;
 
+    transition: opacity 0.4s;
 
+  }
 
+  .main .container.brand-activity .content .item .cover .title {
 
+    font-size: 0.3rem;
 
+    color: #fff;
 
+    width: 3.31rem;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.brand-activity .content .item .cover .line {
 
+    width: 0.16rem;
 
+    height: 0.02rem;
 
+    margin: 0.07rem 0;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.brand-activity .content .item .cover .description {
 
+    text-align: justify;
 
+    width: 3.31rem;
 
+    font-size: 0.24rem;
 
+    color: #fff;
 
+    line-height: 1.5;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.brand-activity .content .item .cover::after {
 
+    position: absolute;
 
+    content: "01";
 
+    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+    -webkit-background-clip: text;
 
+    color: transparent;
 
+    font-size: 0.72rem;
 
+    right: 0.24rem;
 
+    bottom: 0.24rem;
 
+  }
 
+  .main .container.company-values .content .item {
 
+    position: relative;
 
+    float: left;
 
+    height: 1.94rem;
 
+    width: 2.22rem;
 
+    margin-right: 0.09rem;
 
+    margin-bottom: 0.09rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    overflow: hidden;
 
+  }
 
+  .main .container.company-values .content .item img {
 
+    width: 100%;
 
+    height: 100%;
 
+    opacity: 1;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .container.company-values .content .item.no-mb {
 
+    margin-bottom: 0;
 
+  }
 
+  .main .container.company-values .content .item.no-mr {
 
+    margin-right: 0;
 
+  }
 
+  .main .container.company-values .content .item:nth-child(1), .main .container.company-values .content .item:nth-child(7) {
 
+    width: 4.54rem;
 
+  }
 
+  .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 {
 
+    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-orient: vertical;
 
+    -webkit-box-direction: normal;
 
+    -ms-flex-direction: column;
 
+    flex-direction: column;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    background: rgba(0, 0, 0, 0.5);
 
+  }
 
+  .main .container.company-values .content .item .cover .line {
 
+    width: 1.9rem;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
+    transform: translate(-50%, -50%) rotateZ(-45deg);
 
+  }
 
+  .main .container.company-values .content .item .cover .line::after, .main .container.company-values .content .item .cover .line::before {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    content: "";
 
+    display: block;
 
+    width: 0.2rem;
 
+    height: 0.01rem;
 
+    background-color: #fff;
 
+  }
 
+  .main .container.company-values .content .item .cover .line::before {
 
+    right: 0;
 
+    left: unset;
 
+  }
 
+  .main .container.company-values .content .item .cover .title {
 
+    color: #fff;
 
+    font-size: 0.24rem;
 
+  }
 
+  .main .container.company-values .content .item .cover .subtitle {
 
+    font-size: 0.2rem;
 
+    color: #fff;
 
+    margin-top: 0.1rem;
 
+  }
 
+  .main .container.company-values .content .item .cover .subtitle.en {
 
+    text-transform: uppercase;
 
+  }
 
+  .main .container.head_quarter .content img {
 
+    width: 100%;
 
+  }
 
+  .main .container.friendly_link .content {
 
+    width: 100%;
 
+    overflow: hidden;
 
+  }
 
+  .main .container.friendly_link .content .row {
 
+    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;
 
+  }
 
+  .main .container.friendly_link .content .item {
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    position: relative;
 
+    width: 2.2rem;
 
+    height: 0.96rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    border: 1px solid #d8d8d8;
 
+    overflow: hidden;
 
+    margin-right: 10px;
 
+  }
 
+  .main .container.friendly_link .content .item:last-child {
 
+    margin-right: 0;
 
+  }
 
+  .main .container.friendly_link .content .item img {
 
+    display: block;
 
+    width: 100%;
 
+    position: absolute;
 
+    left: 0;
 
+    top: 50%;
 
+    -webkit-transform: translateY(-50%);
 
+    transform: translateY(-50%);
 
+  }
 
 }

+ 753 - 364
css/index.scss
Целия файл 

@@ -7,460 +7,849 @@
 
   -webkit-box-orient: vertical;
 
 }
 
 
-.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;
 
+@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;
 
+  // 轮播图
 
+  .banner {
 
+    width: 100%;
 
+    height: 700px;
 
 
-  img {
 
-    display: block;
 
-    height: 100%;
 
+    img {
 
+      display: block;
 
+      height: 100%;
 
+    }
 
   }
 
-}
 
 
-.main {
 
-  .container {
 
-    margin-top: 120px;
 
-    .section-title {
 
-      margin-bottom: 80px;
 
-    }
 
+  .main {
 
+    .container {
 
+      margin-top: 120px;
 
+      .section-title {
 
+        margin-bottom: 80px;
 
+      }
 
 
-    &.our-brand {
 
-      .content {
 
-        .item {
 
-          position: relative;
 
-          width: 286px;
 
-          height: 286px;
 
-          float: left;
 
-          background-color: #ddd;
 
-
 
-          &:first-child {
 
-            width: 592px;
 
-            height: 592px;
 
-          }
 
+      &.our-brand {
 
+        .content {
 
+          .item {
 
+            position: relative;
 
+            width: 286px;
 
+            height: 286px;
 
+            float: left;
 
+            background-color: #ddd;
 
+
 
+            &:first-child {
 
+              width: 592px;
 
+              height: 592px;
 
+            }
 
 
-          img {
 
-            display: block;
 
-            width: 100%;
 
-            height: 100%;
 
-          }
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
 
-          &:hover {
 
-            .active {
 
-              opacity: 1;
 
+            &:hover {
 
+              .active {
 
+                opacity: 1;
 
+              }
 
             }
 
-          }
 
 
-          .active {
 
-            opacity: 0;
 
-            position: absolute;
 
-            left: 0;
 
-            top: 0;
 
-            z-index: 2;
 
-            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-color: rgba(0, 0, 0, 0.5);
 
-            -webkit-transition: opacity 0.4s;
 
-            transition: opacity 0.4s;
 
-
 
-            .title {
 
-              font-size: 34px;
 
-              color: #fff;
 
-            }
 
-            .line {
 
-              width: 40px;
 
-              height: 1px;
 
-              margin: 32px 0 60px;
 
-              background-color: #fff;
 
-            }
 
-            .link {
 
-              width: 160px;
 
-              height: 48px;
 
-              border: 1px solid #ffffff;
 
-              text-align: center;
 
-              line-height: 48px;
 
-              color: #fff;
 
-              cursor: pointer;
 
+            .active {
 
+              opacity: 0;
 
+              position: absolute;
 
+              left: 0;
 
+              top: 0;
 
+              z-index: 2;
 
+              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-color: rgba(0, 0, 0, 0.5);
 
+              -webkit-transition: opacity 0.4s;
 
+              transition: opacity 0.4s;
 
+
 
+              .title {
 
+                font-size: 34px;
 
+                color: #fff;
 
+              }
 
+              .line {
 
+                width: 40px;
 
+                height: 1px;
 
+                margin: 32px 0 60px;
 
+                background-color: #fff;
 
+              }
 
+              .link {
 
+                width: 160px;
 
+                height: 48px;
 
+                border: 1px solid #ffffff;
 
+                text-align: center;
 
+                line-height: 48px;
 
+                color: #fff;
 
+                cursor: pointer;
 
+              }
 
             }
 
           }
 
         }
 
       }
 
-    }
 
 
-    &.brand-activity {
 
-      .content {
 
-        display: -webkit-box;
 
-        display: -ms-flexbox;
 
-        display: flex;
 
-        -webkit-box-pack: center;
 
-        -ms-flex-pack: center;
 
-        justify-content: center;
 
+      &.brand-activity {
 
+        .content {
 
+          display: -webkit-box;
 
+          display: -ms-flexbox;
 
+          display: flex;
 
+          -webkit-box-pack: center;
 
+          -ms-flex-pack: center;
 
+          justify-content: center;
 
 
-        .item {
 
-          position: relative;
 
+          .item {
 
+            position: relative;
 
 
-          width: 280px;
 
-          height: 600px;
 
-          overflow: hidden;
 
-          -ms-flex-negative: 0;
 
-          flex-shrink: 0;
 
-          -webkit-transition: all 0.4s;
 
-          transition: all 0.4s;
 
+            width: 280px;
 
+            height: 600px;
 
+            overflow: hidden;
 
+            -ms-flex-negative: 0;
 
+            flex-shrink: 0;
 
+            -webkit-transition: all 0.4s;
 
+            transition: all 0.4s;
 
 
-          a {
 
-            display: block;
 
-            width: 100%;
 
-            height: 100%;
 
-          }
 
+            a {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
 
-          img {
 
-            position: absolute;
 
-            top: 0;
 
-            left: 50%;
 
-            -webkit-transform: translateX(-50%);
 
-            transform: translateX(-50%);
 
-            display: block;
 
-            width: 640px;
 
-            height: 600px;
 
-          }
 
+            img {
 
+              position: absolute;
 
+              top: 0;
 
+              left: 50%;
 
+              -webkit-transform: translateX(-50%);
 
+              transform: translateX(-50%);
 
+              display: block;
 
+              width: 640px;
 
+              height: 600px;
 
+            }
 
 
-          &.hover {
 
-            width: 640px;
 
-          }
 
+            &.hover {
 
+              width: 640px;
 
+            }
 
 
-          &:nth-child(1) {
 
-            .cover {
 
-              &::after {
 
-                content: '01';
 
+            &:nth-child(1) {
 
+              .cover {
 
+                &::after {
 
+                  content: '01';
 
+                }
 
               }
 
             }
 
-          }
 
 
-          &:nth-child(2) {
 
-            .cover {
 
+            &:nth-child(2) {
 
+              .cover {
 
+                &::after {
 
+                  content: '02';
 
+                }
 
+              }
 
+            }
 
+
 
+            &:nth-child(3) {
 
+              .cover {
 
+                &::after {
 
+                  content: '03';
 
+                }
 
+              }
 
+            }
 
+
 
+            .active {
 
+              position: absolute;
 
+              width: 100%;
 
+              height: 280px;
 
+              bottom: 0;
 
+              left: 0;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              padding-left: 24px;
 
+              background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.88)), to(rgba(0, 0, 0, 0)));
 
+              background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
 
+              .title {
 
+                margin-top: 206px;
 
+                width: 232px;
 
+                font-size: 24px;
 
+                color: #fff;
 
+                @include ellipsis(1);
 
+              }
 
+              .line {
 
+                width: 20px;
 
+                height: 2px;
 
+                margin-top: 16px;
 
+                background-color: #fff;
 
+              }
 
+              .description {
 
+                display: none;
 
+              }
 
+
 
               &::after {
 
-                content: '02';
 
+                position: absolute;
 
+                content: '01';
 
+                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+                background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+                -webkit-background-clip: text;
 
+                color: transparent;
 
+                font-size: 30px;
 
+                left: 24px;
 
+                bottom: 66px;
 
               }
 
             }
 
-          }
 
 
-          &:nth-child(3) {
 
-            .cover {
 
+            .hover-active {
 
+              position: absolute;
 
+              width: 486px;
 
+              height: 160px;
 
+              padding-top: 32px;
 
+              padding-left: 32px;
 
+              -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));
 
+              -webkit-transition: opacity 0.4s;
 
+              transition: opacity 0.4s;
 
+              .title {
 
+                font-size: 24px;
 
+                color: #fff;
 
+                width: 300px;
 
+                @include ellipsis(1);
 
+              }
 
+              .line {
 
+                width: 20px;
 
+                height: 2px;
 
+                margin: 16px 0 22px;
 
+                background-color: #fff;
 
+              }
 
+              .description {
 
+                text-align: justify;
 
+                width: 300px;
 
+                font-size: 16px;
 
+                color: #fff;
 
+                line-height: 1.5;
 
+                @include ellipsis(2);
 
+              }
 
+
 
               &::after {
 
-                content: '03';
 
+                position: absolute;
 
+                content: '01';
 
+                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+                background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+                -webkit-background-clip: text;
 
+                color: transparent;
 
+                font-size: 90px;
 
+                line-height: 90px;
 
+                right: 32px;
 
+                bottom: 24px;
 
               }
 
             }
 
           }
 
+        }
 
+      }
 
 
-          .active {
 
-            position: absolute;
 
-            width: 100%;
 
-            height: 280px;
 
-            bottom: 0;
 
-            left: 0;
 
+      &.company-values {
 
+        .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;
 
-            padding-left: 24px;
 
-            background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.88)), to(rgba(0, 0, 0, 0)));
 
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
 
-            .title {
 
-              margin-top: 206px;
 
-              width: 232px;
 
-              font-size: 24px;
 
-              color: #fff;
 
-              @include ellipsis(1);
 
-            }
 
-            .line {
 
-              width: 20px;
 
-              height: 2px;
 
-              margin-top: 16px;
 
-              background-color: #fff;
 
-            }
 
-            .description {
 
-              display: none;
 
-            }
 
-
 
-            &::after {
 
+            overflow: hidden;
 
+
 
+            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);
 
+              }
 
+            }
 
+            &:nth-child(2),
 
+            &:nth-child(3),
 
+            &:nth-child(7) {
 
+              .cover {
 
+                background: transparent;
 
+              }
 
+
 
+              &:hover {
 
+                border: 1px solid #0688d2;
 
+                img {
 
+                  opacity: 0;
 
+                }
 
+
 
+                .subtitle,
 
+                .title {
 
+                  color: #0688d2;
 
+                }
 
+
 
+                .line {
 
+                  &::before,
 
+                  &::after {
 
+                    background-color: #0688d2;
 
+                  }
 
+                }
 
+              }
 
+            }
 
+
 
+            .cover {
 
               position: absolute;
 
-              content: '01';
 
-              background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
-              background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
-              -webkit-background-clip: text;
 
-              color: transparent;
 
-              font-size: 30px;
 
-              left: 24px;
 
-              bottom: 66px;
 
+              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-orient: vertical;
 
+              -webkit-box-direction: normal;
 
+              -ms-flex-direction: column;
 
+              flex-direction: column;
 
+              -webkit-box-align: center;
 
+              -ms-flex-align: center;
 
+              align-items: center;
 
+              background: rgba(0, 0, 0, 0.5);
 
+
 
+              .line {
 
+                width: 180px;
 
+                position: absolute;
 
+                left: 50%;
 
+                top: 50%;
 
+                -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
+                transform: translate(-50%, -50%) rotateZ(-45deg);
 
+
 
+                &::after,
 
+                &::before {
 
+                  position: absolute;
 
+                  left: 0;
 
+                  top: 0;
 
+                  content: '';
 
+                  display: block;
 
+                  width: 20px;
 
+                  height: 1px;
 
+                  background-color: #fff;
 
+                }
 
+
 
+                &::before {
 
+                  right: 0;
 
+                  left: unset;
 
+                }
 
+              }
 
+
 
+              .title {
 
+                color: #fff;
 
+                font-size: 24px;
 
+              }
 
+
 
+              .subtitle {
 
+                font-size: 18px;
 
+                color: #fff;
 
+                margin-top: 12px;
 
+                &.en {
 
+                  text-transform: uppercase;
 
+                }
 
+              }
 
             }
 
           }
 
+        }
 
+      }
 
+
 
+      &.head_quarter {
 
+      }
 
+
 
+      &.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;
 
+            }
 
 
-          .hover-active {
 
-            position: absolute;
 
-            width: 486px;
 
-            height: 160px;
 
-            padding-top: 32px;
 
-            padding-left: 32px;
 
+            &: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-top-left-radius: 32px;
 
-            right: 0;
 
-            bottom: 0;
 
-            background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
 
-            -webkit-transition: opacity 0.4s;
 
-            transition: opacity 0.4s;
 
-            .title {
 
-              font-size: 24px;
 
-              color: #fff;
 
-              width: 300px;
 
-              @include ellipsis(1);
 
-            }
 
-            .line {
 
-              width: 20px;
 
-              height: 2px;
 
-              margin: 16px 0 22px;
 
-              background-color: #fff;
 
-            }
 
-            .description {
 
-              text-align: justify;
 
-              width: 300px;
 
-              font-size: 16px;
 
-              color: #fff;
 
-              line-height: 1.5;
 
-              @include ellipsis(2);
 
-            }
 
-
 
-            &::after {
 
+            border: 1px solid #d8d8d8;
 
+            overflow: hidden;
 
+            margin-right: 10px;
 
+
 
+            &:last-child {
 
+              margin-right: 0;
 
+            }
 
+
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
               position: absolute;
 
-              content: '01';
 
-              background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
-              background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
-              -webkit-background-clip: text;
 
-              color: transparent;
 
-              font-size: 90px;
 
-              line-height: 90px;
 
-              right: 32px;
 
-              bottom: 24px;
 
+              left: 0;
 
+              top: 50%;
 
+              -webkit-transform: translateY(-50%);
 
+              transform: translateY(-50%);
 
             }
 
           }
 
         }
 
       }
 
     }
 
+  }
 
+}
 
 
-    &.company-values {
 
-      .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;
 
+@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;
 
+    }
 
+  }
 
 
-          img {
 
-            width: 100%;
 
-            height: 100%;
 
-            opacity: 1;
 
-            -webkit-transition: all 0.4s;
 
-            transition: all 0.4s;
 
-          }
 
+  // 轮播图
 
+  .banner {
 
+    width: 100%;
 
+    min-width: 7.5rem;
 
+    height: 2.74rem;
 
+
 
+    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 {
 
+          .item {
 
+            position: relative;
 
+            width: 1.64rem;
 
+            height: 1.64rem;
 
+            float: left;
 
+            background-color: #ddd;
 
+            margin-left: 0.1rem;
 
+            margin-bottom: 0.1rem;
 
+
 
+            &:first-child {
 
+              width: 3.38rem;
 
+              height: 3.38rem;
 
+              margin-left: 0;
 
+            }
 
 
-          &.no-mb {
 
-            margin-bottom: 0;
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+
 
+            .active {
 
+              position: absolute;
 
+              left: 0;
 
+              top: 0;
 
+              z-index: 2;
 
+              width: 100%;
 
+              height: 100%;
 
+
 
+              .title {
 
+                position: absolute;
 
+                bottom: 0;
 
+                left: 0;
 
+                font-size: 0.22rem;
 
+                color: #fff;
 
+                width: 100%;
 
+                line-height: 0.4rem;
 
+                text-align: center;
 
+                background: rgba(0, 0, 0, 0.39);
 
+              }
 
+              .link {
 
+                opacity: 0;
 
+                display: block;
 
+                width: 100%;
 
+                height: 100%;
 
+                position: absolute;
 
+                z-index: 1;
 
+                left: 0;
 
+                top: 0;
 
+              }
 
+            }
 
           }
 
+        }
 
+      }
 
 
-          &.no-mr {
 
-            margin-right: 0;
 
+      &.brand-activity {
 
+        margin-left: 0;
 
+        margin-right: 0;
 
+        width: auto;
 
+        .content {
 
+          overflow-x: auto;
 
+          padding-bottom: 0.16rem;
 
+          &::-webkit-scrollbar {
 
+            width: 2px;
 
+            height: 2px;
 
+            background-color: #f5f5f5;
 
           }
 
 
-          &:nth-child(1),
 
-          &:nth-child(7) {
 
-            width: 795px;
 
+          &::-webkit-scrollbar-thumb {
 
+            border-radius: 2px;
 
+            background-color: #cccecf;
 
           }
 
 
-          &:hover {
 
-            img {
 
-              -webkit-transform: scale(1.2);
 
-              transform: scale(1.2);
 
+          .item {
 
+            position: relative;
 
+            width: 5.24rem;
 
+            height: 4.91rem;
 
+            overflow: hidden;
 
+            display: inline-block;
 
+            margin-left: 0.32rem;
 
+
 
+            &:last-child {
 
+              margin-right: 0.32rem;
 
             }
 
-          }
 
-          &:nth-child(2),
 
-          &:nth-child(3),
 
-          &:nth-child(7) {
 
-            .cover {
 
-              background: transparent;
 
+
 
+            a {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
             }
 
 
-            &:hover {
 
-              border: 1px solid #0688d2;
 
-              img {
 
-                opacity: 0;
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+
 
+            &:nth-child(1) {
 
+              .cover {
 
+                &::after {
 
+                  content: '01';
 
+                }
 
               }
 
+            }
 
 
-              .subtitle,
 
-              .title {
 
-                color: #0688d2;
 
+            &:nth-child(2) {
 
+              .cover {
 
+                &::after {
 
+                  content: '02';
 
+                }
 
               }
 
+            }
 
 
-              .line {
 
-                &::before,
 
+            &:nth-child(3) {
 
+              .cover {
 
                 &::after {
 
-                  background-color: #0688d2;
 
+                  content: '03';
 
                 }
 
               }
 
             }
 
-          }
 
 
-          .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-orient: vertical;
 
-            -webkit-box-direction: normal;
 
-            -ms-flex-direction: column;
 
-            flex-direction: column;
 
-            -webkit-box-align: center;
 
-            -ms-flex-align: center;
 
-            align-items: center;
 
-            background: rgba(0, 0, 0, 0.5);
 
-
 
-            .line {
 
-              width: 180px;
 
+            .cover {
 
               position: absolute;
 
-              left: 50%;
 
-              top: 50%;
 
-              -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
-              transform: translate(-50%, -50%) rotateZ(-45deg);
 
-
 
-              &::after,
 
-              &::before {
 
-                position: absolute;
 
-                left: 0;
 
-                top: 0;
 
-                content: '';
 
-                display: block;
 
-                width: 20px;
 
-                height: 1px;
 
+              width: 4.31rem;
 
+              height: 1.29rem;
 
+              padding-top: 0.24rem;
 
+              padding-left: 0.32rem;
 
+              -webkit-box-sizing: border-box;
 
+              box-sizing: border-box;
 
+              border-top-left-radius: 0.32rem;
 
+              right: 0;
 
+              bottom: 0;
 
+              background: linear-gradient(166deg, #0688d2 25%, rgba(32, 155, 212, 0.8));
 
+              -webkit-transition: opacity 0.4s;
 
+              transition: opacity 0.4s;
 
+              .title {
 
+                font-size: 0.3rem;
 
+                color: #fff;
 
+                width: 3.31rem;
 
+                @include ellipsis(1);
 
+              }
 
+              .line {
 
+                width: 0.16rem;
 
+                height: 0.02rem;
 
+                margin: 0.07rem 0;
 
                 background-color: #fff;
 
               }
 
+              .description {
 
+                text-align: justify;
 
+                width: 3.31rem;
 
+                font-size: 0.24rem;
 
+                color: #fff;
 
+                line-height: 1.5;
 
+                @include ellipsis(1);
 
+              }
 
 
-              &::before {
 
-                right: 0;
 
-                left: unset;
 
+              &::after {
 
+                position: absolute;
 
+                content: '01';
 
+                background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.2)));
 
+                background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.2));
 
+                -webkit-background-clip: text;
 
+                color: transparent;
 
+                font-size: 0.72rem;
 
+                right: 0.24rem;
 
+                bottom: 0.24rem;
 
               }
 
             }
 
+          }
 
+        }
 
+      }
 
 
-            .title {
 
-              color: #fff;
 
-              font-size: 24px;
 
+      &.company-values {
 
+        .content {
 
+          .item {
 
+            position: relative;
 
+            float: left;
 
+            height: 1.94rem;
 
+            width: 2.22rem;
 
+            margin-right: 0.09rem;
 
+            margin-bottom: 0.09rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            overflow: hidden;
 
+
 
+            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: 4.54rem;
 
             }
 
 
-            .subtitle {
 
-              font-size: 18px;
 
-              color: #fff;
 
-              margin-top: 12px;
 
-              &.en {
 
-                text-transform: uppercase;
 
+            &:nth-child(2),
 
+            &:nth-child(3),
 
+            &:nth-child(7) {
 
+              .cover {
 
+                background: transparent;
 
               }
 
             }
 
-          }
 
-        }
 
-      }
 
-    }
 
 
-    &.head_quarter {
 
-    }
 
+            .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-orient: vertical;
 
+              -webkit-box-direction: normal;
 
+              -ms-flex-direction: column;
 
+              flex-direction: column;
 
+              -webkit-box-align: center;
 
+              -ms-flex-align: center;
 
+              align-items: center;
 
+              background: rgba(0, 0, 0, 0.5);
 
 
-    &.friendly_link {
 
-      .content {
 
-        width: 100%;
 
-        overflow: hidden;
 
-        .row {
 
-          display: -webkit-box;
 
-          display: -ms-flexbox;
 
-          display: flex;
 
+              .line {
 
+                width: 1.9rem;
 
+                position: absolute;
 
+                left: 50%;
 
+                top: 50%;
 
+                -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
 
+                transform: translate(-50%, -50%) rotateZ(-45deg);
 
+
 
+                &::after,
 
+                &::before {
 
+                  position: absolute;
 
+                  left: 0;
 
+                  top: 0;
 
+                  content: '';
 
+                  display: block;
 
+                  width: 0.2rem;
 
+                  height: 0.01rem;
 
+                  background-color: #fff;
 
+                }
 
+
 
+                &::before {
 
+                  right: 0;
 
+                  left: unset;
 
+                }
 
+              }
 
+
 
+              .title {
 
+                color: #fff;
 
+                font-size: 0.24rem;
 
+              }
 
 
-          &: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;
 
+              .subtitle {
 
+                font-size: 0.2rem;
 
+                color: #fff;
 
+                margin-top: 0.1rem;
 
+                &.en {
 
+                  text-transform: uppercase;
 
+                }
 
+              }
 
+            }
 
           }
 
+        }
 
+      }
 
 
-          &:first-child {
 
-            -webkit-animation: 20s rowup-left linear infinite normal;
 
-            animation: 20s rowup-left linear infinite normal;
 
+      &.head_quarter {
 
+        .content {
 
+          img {
 
+            width: 100%;
 
           }
 
         }
 
-        .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;
 
+      }
 
+
 
+      &.friendly_link {
 
+        .content {
 
+          width: 100%;
 
           overflow: hidden;
 
-          margin-right: 10px;
 
+          .row {
 
+            display: -webkit-box;
 
+            display: -ms-flexbox;
 
+            display: flex;
 
 
-          &:last-child {
 
-            margin-right: 0;
 
+            &: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: 2.2rem;
 
+            height: 0.96rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            border: 1px solid #d8d8d8;
 
+            overflow: hidden;
 
+            margin-right: 10px;
 
 
-          img {
 
-            display: block;
 
-            width: 100%;
 
-            position: absolute;
 
-            left: 0;
 
-            top: 50%;
 
-            -webkit-transform: translateY(-50%);
 
-            transform: translateY(-50%);
 
+            &:last-child {
 
+              margin-right: 0;
 
+            }
 
+
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              position: absolute;
 
+              left: 0;
 
+              top: 50%;
 
+              -webkit-transform: translateY(-50%);
 
+              transform: translateY(-50%);
 
+            }
 
           }
 
         }
 
       }

+ 220 - 104
css/news.css
Целия файл 

@@ -1,106 +1,222 @@
 
-.main .container.news-list .title {
 
-  font-size: 34px;
 
-  text-align: center;
 
-  margin: 80px 0;
 
-}
 
-.main .container.news-list .new {
 
-  display: block;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-  margin-bottom: 40px;
 
-}
 
-.main .container.news-list .new .cover {
 
-  width: 290px;
 
-  height: 190px;
 
-}
 
-.main .container.news-list .new .cover img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.main .container.news-list .new:hover {
 
-  -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
-  box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
-}
 
-.main .container.news-list .new:hover .name {
 
-  color: #0688d2;
 
-}
 
-.main .container.news-list .new .content {
 
-  width: 780px;
 
-  margin-left: 49px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  padding: 32px 0;
 
-}
 
-.main .container.news-list .new .content .name {
 
-  font-size: 20px;
 
-  -webkit-transition: all 0.4s;
 
-  transition: all 0.4s;
 
-}
 
-.main .container.news-list .new .content .date {
 
-  font-size: 16px;
 
-  color: #999999;
 
-  margin-top: 14px;
 
-}
 
-.main .container.news-list .new .content .line {
 
-  width: 100%;
 
-  height: 1px;
 
-  background: #e8e8e8;
 
-  margin: 18px 0;
 
-}
 
-.main .container.news-list .new .content .desc {
 
-  font-size: 16px;
 
-  color: #505050;
 
-}
 
-.main .container .pagination {
 
-  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;
 
-  padding-top: 25px;
 
-}
 
-.main .container .pagination li {
 
-  background: #e8e8e8;
 
-  margin: 0 8px;
 
-}
 
-.main .container .pagination li.active {
 
-  background: #0688d2;
 
-}
 
-.main .container .pagination li.active a {
 
-  color: #fff;
 
-}
 
-.main .container .pagination li.more {
 
-  background: transparent !important;
 
-}
 
-.main .container .pagination li.more a {
 
-  color: #505050 !important;
 
-  min-width: unset !important;
 
-  padding: 0 !important;
 
-}
 
-.main .container .pagination li:hover {
 
-  background: #0688d2;
 
-}
 
-.main .container .pagination li:hover a {
 
-  color: #fff;
 
-}
 
-.main .container .pagination li a {
 
-  display: block;
 
-  height: 32px;
 
-  line-height: 32px;
 
-  padding: 0 10px;
 
-  font-size: 12px;
 
-  color: #505050;
 
-  min-width: 32px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-  text-align: center;
 
-}
 
+@charset "UTF-8";
 
+/* scss中可以用mixin来扩展 */
 
+@media screen and (min-width: 768px) {
 
+  .main .container.news-list .title {
 
+    font-size: 34px;
 
+    text-align: center;
 
+    margin: 80px 0;
 
+  }
 
+  .main .container.news-list .new {
 
+    display: block;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+    margin-bottom: 40px;
 
+  }
 
+  .main .container.news-list .new .cover {
 
+    width: 290px;
 
+    height: 190px;
 
+  }
 
+  .main .container.news-list .new .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.news-list .new:hover {
 
+    -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
+    box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
+  }
 
+  .main .container.news-list .new:hover .name {
 
+    color: #0688d2;
 
+  }
 
+  .main .container.news-list .new .content {
 
+    width: 780px;
 
+    margin-left: 49px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 32px 0;
 
+  }
 
+  .main .container.news-list .new .content .name {
 
+    font-size: 20px;
 
+    -webkit-transition: all 0.4s;
 
+    transition: all 0.4s;
 
+  }
 
+  .main .container.news-list .new .content .date {
 
+    font-size: 16px;
 
+    color: #999999;
 
+    margin-top: 14px;
 
+  }
 
+  .main .container.news-list .new .content .line {
 
+    width: 100%;
 
+    height: 1px;
 
+    background: #e8e8e8;
 
+    margin: 18px 0;
 
+  }
 
+  .main .container.news-list .new .content .desc {
 
+    font-size: 16px;
 
+    color: #505050;
 
+  }
 
+  .main .container .pagination {
 
+    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;
 
+    padding-top: 25px;
 
+  }
 
+  .main .container .pagination li {
 
+    background: #e8e8e8;
 
+    margin: 0 8px;
 
+  }
 
+  .main .container .pagination li.active {
 
+    background: #0688d2;
 
+  }
 
+  .main .container .pagination li.active a {
 
+    color: #fff;
 
+  }
 
+  .main .container .pagination li.more {
 
+    background: transparent !important;
 
+  }
 
+  .main .container .pagination li.more a {
 
+    color: #505050 !important;
 
+    min-width: unset !important;
 
+    padding: 0 !important;
 
+  }
 
+  .main .container .pagination li:hover {
 
+    background: #0688d2;
 
+  }
 
+  .main .container .pagination li:hover a {
 
+    color: #fff;
 
+  }
 
+  .main .container .pagination li a {
 
+    display: block;
 
+    height: 32px;
 
+    line-height: 32px;
 
+    padding: 0 10px;
 
+    font-size: 12px;
 
+    color: #505050;
 
+    min-width: 32px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    text-align: center;
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 40px;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main .container.news-list {
 
+    padding: 0 0.32rem;
 
+  }
 
+  .main .container.news-list .title {
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+    margin-top: 1.2rem;
 
+  }
 
+  .main .container.news-list .new {
 
+    display: block;
 
+    margin: 0.4rem 0;
 
+  }
 
+  .main .container.news-list .new .cover {
 
+    width: 2.9rem;
 
+    height: 1.9rem;
 
+  }
 
+  .main .container.news-list .new .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .container.news-list .new .content {
 
+    width: 3.96rem;
 
+    height: 1.9rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    padding: 0.24rem;
 
+    border: 1px solid #e8e8e8;
 
+    border-left: 0;
 
+  }
 
+  .main .container.news-list .new .content .name {
 
+    font-size: 0.3rem;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container.news-list .new .content .date {
 
+    font-size: 0.24rem;
 
+    color: #999999;
 
+    margin-top: 0.06rem;
 
+  }
 
+  .main .container.news-list .new .content .line {
 
+    width: 100%;
 
+    height: 0.01rem;
 
+    background: #e8e8e8;
 
+    margin: 0.16rem 0;
 
+  }
 
+  .main .container.news-list .new .content .desc {
 
+    font-size: 0.24rem;
 
+    color: #505050;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 1;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  .main .container .pagination {
 
+    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;
 
+    padding-top: 0.8rem;
 
+  }
 
+  .main .container .pagination li {
 
+    background: #e8e8e8;
 
+    margin: 0 0.12rem;
 
+  }
 
+  .main .container .pagination li.active {
 
+    background: #0688d2;
 
+  }
 
+  .main .container .pagination li.active a {
 
+    color: #fff;
 
+  }
 
+  .main .container .pagination li.more {
 
+    background: transparent !important;
 
+  }
 
+  .main .container .pagination li.more a {
 
+    color: #505050 !important;
 
+    min-width: unset !important;
 
+    padding: 0 !important;
 
+  }
 
+  .main .container .pagination li:hover {
 
+    background: #0688d2;
 
+  }
 
+  .main .container .pagination li:hover a {
 
+    color: #fff;
 
+  }
 
+  .main .container .pagination li a {
 
+    display: block;
 
+    height: 0.56rem;
 
+    line-height: 0.56rem;
 
+    padding: 0 10px;
 
+    font-size: 12px;
 
+    color: #505050;
 
+    min-width: 0.56rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    text-align: center;
 
+  }
 
 
-.footer {
 
-  margin-top: 40px;
 
+  .footer {
 
+    margin-top: 40px;
 
+  }
 
 }

+ 221 - 93
css/news.scss
Целия файл 

@@ -1,120 +1,248 @@
 
-.main {
 
-  .container {
 
-    &.news-list {
 
-      .title {
 
-        font-size: 34px;
 
-        text-align: center;
 
-        margin: 80px 0;
 
-      }
 
+/* scss中可以用mixin来扩展 */
 
+@mixin ellipsis($line: 1) {
 
+  overflow: hidden;
 
+  text-overflow: ellipsis;
 
+  display: -webkit-box;
 
+  -webkit-line-clamp: $line;
 
+  -webkit-box-orient: vertical;
 
+}
 
 
-      .new {
 
-        display: block;
 
-        -webkit-transition: all 0.4s;
 
-        transition: all 0.4s;
 
-        margin-bottom: 40px;
 
-        .cover {
 
-          width: 290px;
 
-          height: 190px;
 
-          img {
 
-            display: block;
 
-            width: 100%;
 
-            height: 100%;
 
-          }
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    .container {
 
+      &.news-list {
 
+        .title {
 
+          font-size: 34px;
 
+          text-align: center;
 
+          margin: 80px 0;
 
         }
 
 
-        &:hover {
 
-          -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
-          box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
-          .name {
 
-            color: #0688d2;
 
+        .new {
 
+          display: block;
 
+          -webkit-transition: all 0.4s;
 
+          transition: all 0.4s;
 
+          margin-bottom: 40px;
 
+          .cover {
 
+            width: 290px;
 
+            height: 190px;
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          }
 
+
 
+          &:hover {
 
+            -webkit-box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
+            box-shadow: 0 6px 30px rgba(6, 136, 210, 0.2);
 
+            .name {
 
+              color: #0688d2;
 
+            }
 
+          }
 
+          .content {
 
+            width: 780px;
 
+            margin-left: 49px;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 32px 0;
 
+            .name {
 
+              font-size: 20px;
 
+              -webkit-transition: all 0.4s;
 
+              transition: all 0.4s;
 
+            }
 
+            .date {
 
+              font-size: 16px;
 
+              color: #999999;
 
+              margin-top: 14px;
 
+            }
 
+            .line {
 
+              width: 100%;
 
+              height: 1px;
 
+              background: #e8e8e8;
 
+              margin: 18px 0;
 
+            }
 
+            .desc {
 
+              font-size: 16px;
 
+              color: #505050;
 
+            }
 
           }
 
         }
 
-        .content {
 
-          width: 780px;
 
-          margin-left: 49px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          padding: 32px 0;
 
-          .name {
 
-            font-size: 20px;
 
-            -webkit-transition: all 0.4s;
 
-            transition: all 0.4s;
 
+      }
 
+
 
+      .pagination {
 
+        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;
 
+        padding-top: 25px;
 
+
 
+        li {
 
+          background: #e8e8e8;
 
+          margin: 0 8px;
 
+
 
+          &.active {
 
+            background: #0688d2;
 
+            a {
 
+              color: #fff;
 
+            }
 
           }
 
-          .date {
 
-            font-size: 16px;
 
-            color: #999999;
 
-            margin-top: 14px;
 
+
 
+          &.more {
 
+            background: transparent !important;
 
+            a {
 
+              color: #505050 !important;
 
+              min-width: unset !important;
 
+              padding: 0 !important;
 
+            }
 
           }
 
-          .line {
 
-            width: 100%;
 
-            height: 1px;
 
-            background: #e8e8e8;
 
-            margin: 18px 0;
 
+
 
+          &:hover {
 
+            background: #0688d2;
 
+            a {
 
+              color: #fff;
 
+            }
 
           }
 
-          .desc {
 
-            font-size: 16px;
 
+
 
+          a {
 
+            display: block;
 
+            height: 32px;
 
+            line-height: 32px;
 
+            padding: 0 10px;
 
+            font-size: 12px;
 
             color: #505050;
 
+            min-width: 32px;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            text-align: center;
 
           }
 
         }
 
       }
 
     }
 
+  }
 
 
-    .pagination {
 
-      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;
 
-      padding-top: 25px;
 
-
 
-      li {
 
-        background: #e8e8e8;
 
-        margin: 0 8px;
 
-
 
-        &.active {
 
-          background: #0688d2;
 
-          a {
 
-            color: #fff;
 
-          }
 
+  .footer {
 
+    margin-top: 40px;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    .container {
 
+      &.news-list {
 
+        padding: 0 0.32rem;
 
+        .title {
 
+          font-size: 0.34rem;
 
+          text-align: center;
 
+          margin-top: 1.2rem;
 
         }
 
 
-        &.more {
 
-          background: transparent !important;
 
-          a {
 
-            color: #505050 !important;
 
-            min-width: unset !important;
 
-            padding: 0 !important;
 
+        .new {
 
+          display: block;
 
+          margin: 0.4rem 0;
 
+
 
+          .cover {
 
+            width: 2.9rem;
 
+            height: 1.9rem;
 
+            img {
 
+              display: block;
 
+              width: 100%;
 
+              height: 100%;
 
+            }
 
+          }
 
+          .content {
 
+            width: 3.96rem;
 
+            height: 1.9rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            padding: 0.24rem;
 
+            border: 1px solid #e8e8e8;
 
+            border-left: 0;
 
+            .name {
 
+              font-size: 0.3rem;
 
+              @include ellipsis(1);
 
+            }
 
+            .date {
 
+              font-size: 0.24rem;
 
+              color: #999999;
 
+              margin-top: 0.06rem;
 
+            }
 
+            .line {
 
+              width: 100%;
 
+              height: 0.01rem;
 
+              background: #e8e8e8;
 
+              margin: 0.16rem 0;
 
+            }
 
+            .desc {
 
+              font-size: 0.24rem;
 
+              color: #505050;
 
+              @include ellipsis(1);
 
+            }
 
           }
 
         }
 
+      }
 
 
-        &:hover {
 
-          background: #0688d2;
 
-          a {
 
-            color: #fff;
 
+      .pagination {
 
+        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;
 
+        padding-top: 0.8rem;
 
+
 
+        li {
 
+          background: #e8e8e8;
 
+          margin: 0 0.12rem;
 
+
 
+          &.active {
 
+            background: #0688d2;
 
+            a {
 
+              color: #fff;
 
+            }
 
           }
 
-        }
 
 
-        a {
 
-          display: block;
 
-          height: 32px;
 
-          line-height: 32px;
 
-          padding: 0 10px;
 
-          font-size: 12px;
 
-          color: #505050;
 
-          min-width: 32px;
 
-          -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
-          text-align: center;
 
+          &.more {
 
+            background: transparent !important;
 
+            a {
 
+              color: #505050 !important;
 
+              min-width: unset !important;
 
+              padding: 0 !important;
 
+            }
 
+          }
 
+
 
+          &:hover {
 
+            background: #0688d2;
 
+            a {
 
+              color: #fff;
 
+            }
 
+          }
 
+
 
+          a {
 
+            display: block;
 
+            height: 0.56rem;
 
+            line-height: 0.56rem;
 
+            padding: 0 10px;
 
+            font-size: 12px;
 
+            color: #505050;
 
+            min-width: 0.56rem;
 
+            -webkit-box-sizing: border-box;
 
+            box-sizing: border-box;
 
+            text-align: center;
 
+          }
 
         }
 
       }
 
     }
 
   }
 
-}
 
 
-.footer {
 
-  margin-top: 40px;
 
+  .footer {
 
+    margin-top: 40px;
 
+  }
 
 }

+ 247 - 105
css/product-diactivplvs.css
Целия файл 

@@ -1,106 +1,248 @@
 
-.main {
 
-  margin-top: -80px;
 
-}
 
-.main .title {
 
-  font-size: 24px;
 
-  font-weight: bold;
 
-}
 
-.main .about .cover {
 
-  width: 614px;
 
-  height: 412px;
 
-  background-color: pink;
 
-}
 
-.main .about .container {
 
-  position: relative;
 
-}
 
-.main .about .content {
 
-  position: absolute;
 
-  bottom: 0;
 
-  right: 0;
 
-  width: 518px;
 
-}
 
-.main .about .content .title {
 
-  font-size: 34px;
 
-  text-transform: uppercase;
 
-}
 
-.main .about .content .detail {
 
-  font-size: 14px;
 
-  line-height: 40px;
 
-  text-align: justify;
 
-}
 
-.main .about .content .tags {
 
-  margin-top: 36px;
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-}
 
-.main .about .content .tags .tag {
 
-  padding: 8px 14px;
 
-  font-size: 16px;
 
-  color: #0688d2;
 
-  background: #eff9ff;
 
-}
 
-.main .about .content .line {
 
-  margin: 32px 0;
 
-  width: 32px;
 
-  height: 2px;
 
-  background: #d8d8d8;
 
-}
 
-.main .service {
 
-  margin-top: 180px;
 
-  margin-bottom: 80px;
 
-}
 
-.main .service .cover {
 
-  position: relative;
 
-  width: 646px;
 
-  height: 490px;
 
-  background: #fff;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .service .cover img {
 
-  position: absolute;
 
-  left: 50%;
 
-  top: 50%;
 
-  -webkit-transform: translate(-50%, -50%);
 
-  transform: translate(-50%, -50%);
 
-  display: block;
 
-  width: 700px;
 
-}
 
-.main .service .content {
 
-  width: 416px;
 
-}
 
-.main .service .content .title {
 
-  padding-top: 24px;
 
-}
 
-.main .service .content .line {
 
-  margin: 32px 0;
 
-  width: 32px;
 
-  height: 2px;
 
-  background: #d8d8d8;
 
-}
 
-.main .service .content .detail {
 
-  font-size: 14px;
 
-  text-align: justify;
 
-}
 
-.main .service .content .detail .lh40 {
 
-  line-height: 40px;
 
-}
 
-.main .service .content .detail .lh28 {
 
-  line-height: 28px;
 
-}
 
-.main .service .content .detail .mt32 {
 
-  margin-top: 32px;
 
-}
 
-.main .service .content .detail .mt16 {
 
-  margin-top: 16px;
 
-}
 
-.main .service .content .detail li .label {
 
-  margin-bottom: 16px;
 
-}
 
-.main .service .content .detail li .text {
 
-  color: #999999;
 
-}
 
-.main .service .content .detail .description {
 
-  font-size: 16px;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    margin-top: -80px;
 
+  }
 
+  .main .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+  }
 
+  .main .about .cover {
 
+    width: 614px;
 
+    height: 412px;
 
+    background-color: pink;
 
+  }
 
+  .main .about .container {
 
+    position: relative;
 
+  }
 
+  .main .about .content {
 
+    position: absolute;
 
+    bottom: 0;
 
+    right: 0;
 
+    width: 518px;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 34px;
 
+    text-transform: uppercase;
 
+  }
 
+  .main .about .content .detail {
 
+    font-size: 14px;
 
+    line-height: 40px;
 
+    text-align: justify;
 
+  }
 
+  .main .about .content .tags {
 
+    margin-top: 36px;
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+  }
 
+  .main .about .content .tags .tag {
 
+    padding: 8px 14px;
 
+    font-size: 16px;
 
+    color: #0688d2;
 
+    background: #eff9ff;
 
+  }
 
+  .main .about .content .line {
 
+    margin: 32px 0;
 
+    width: 32px;
 
+    height: 2px;
 
+    background: #d8d8d8;
 
+  }
 
+  .main .service {
 
+    margin-top: 180px;
 
+    margin-bottom: 80px;
 
+  }
 
+  .main .service .cover {
 
+    position: relative;
 
+    width: 646px;
 
+    height: 490px;
 
+    background: #fff;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .service .cover img {
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+    display: block;
 
+    width: 700px;
 
+  }
 
+  .main .service .content {
 
+    width: 416px;
 
+  }
 
+  .main .service .content .title {
 
+    padding-top: 24px;
 
+  }
 
+  .main .service .content .line {
 
+    margin: 32px 0;
 
+    width: 32px;
 
+    height: 2px;
 
+    background: #d8d8d8;
 
+  }
 
+  .main .service .content .detail {
 
+    font-size: 14px;
 
+    text-align: justify;
 
+  }
 
+  .main .service .content .detail .lh40 {
 
+    line-height: 40px;
 
+  }
 
+  .main .service .content .detail .lh28 {
 
+    line-height: 28px;
 
+  }
 
+  .main .service .content .detail .mt32 {
 
+    margin-top: 32px;
 
+  }
 
+  .main .service .content .detail .mt16 {
 
+    margin-top: 16px;
 
+  }
 
+  .main .service .content .detail li .label {
 
+    margin-bottom: 16px;
 
+  }
 
+  .main .service .content .detail li .text {
 
+    color: #999999;
 
+  }
 
+  .main .service .content .detail .description {
 
+    font-size: 16px;
 
+  }
 
+}
 
+@media screen and (max-width: 768px) {
 
+  .main .title {
 
+    font-size: 0.48rem;
 
+    font-weight: bold;
 
+  }
 
+  .main .container {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: end;
 
+    -ms-flex-pack: end;
 
+    justify-content: flex-end;
 
+    -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;
 
+  }
 
+  .main .about {
 
+    position: relative;
 
+    margin-top: 0.8rem;
 
+  }
 
+  .main .about .cover {
 
+    width: 6.14rem;
 
+    height: 4.12rem;
 
+    margin-top: 0.48rem;
 
+  }
 
+  .main .about .cover img {
 
+    display: block;
 
+    width: 6.14rem;
 
+    height: 4.12rem;
 
+  }
 
+  .main .about .container {
 
+    position: relative;
 
+  }
 
+  .main .about .content {
 
+    width: 6.08rem;
 
+    margin: 0 auto;
 
+    float: none !important;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 0.34rem;
 
+    text-transform: uppercase;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .detail {
 
+    font-size: 0.24rem;
 
+    line-height: 0.4rem;
 
+    text-align: justify;
 
+  }
 
+  .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 .tags .tag {
 
+    padding: 0.07rem 0.29rem;
 
+    font-size: 0.24rem;
 
+    color: #0688d2;
 
+    background: #eff9ff;
 
+  }
 
+  .main .about .content .line {
 
+    margin: 0.32rem auto;
 
+    width: 0.4rem;
 
+    height: 0.03rem;
 
+    background: #d8d8d8;
 
+  }
 
+  .main .service {
 
+    margin-top: 0.9rem;
 
+  }
 
+  .main .service .cover {
 
+    position: relative;
 
+    width: 6.94rem;
 
+    height: 4.66rem;
 
+    background: #fff;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    margin-top: 0.32rem;
 
+  }
 
+  .main .service .cover img {
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    -webkit-transform: translate(-50%, -50%);
 
+    transform: translate(-50%, -50%);
 
+    display: block;
 
+    width: 100%;
 
+  }
 
+  .main .service .content {
 
+    width: 6.08rem;
 
+    margin: 0 auto;
 
+    float: none !important;
 
+  }
 
+  .main .service .content .title {
 
+    padding-top: 24px;
 
+    font-size: 0.34rem;
 
+    text-align: center;
 
+  }
 
+  .main .service .content .line {
 
+    margin: 0.32rem auto;
 
+    width: 0.4rem;
 
+    height: 0.03rem;
 
+    background: #d8d8d8;
 
+  }
 
+  .main .service .content .detail {
 
+    font-size: 0.26rem;
 
+    text-align: center;
 
+  }
 
+  .main .service .content .detail .lh40 {
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content .detail .lh28 {
 
+    line-height: 0.28rem;
 
+  }
 
+  .main .service .content .detail .mt32 {
 
+    margin-top: 0.32rem;
 
+  }
 
+  .main .service .content .detail .mt16 {
 
+    margin-top: 0.16rem;
 
+  }
 
+  .main .service .content .detail li .label {
 
+    margin-bottom: 0.16rem;
 
+    margin-top: 0.32rem;
 
+  }
 
+  .main .service .content .detail li .text {
 
+    color: #999999;
 
+    font-size: 0.26rem;
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content .detail .description {
 
+    font-size: 0.26rem;
 
+    line-height: 0.4rem;
 
+  }
 
 }

+ 251 - 91
css/product-diactivplvs.scss
Целия файл 

@@ -1,118 +1,278 @@
 
-.main {
 
-  margin-top: -80px;
 
-  .title {
 
-    font-size: 24px;
 
-    font-weight: bold;
 
-  }
 
-
 
-  .about {
 
-    .cover {
 
-      width: 614px;
 
-      height: 412px;
 
-      background-color: pink;
 
-    }
 
-    .container {
 
-      position: relative;
 
+@media screen and(min-width:768px) {
 
+  .main {
 
+    margin-top: -80px;
 
+    .title {
 
+      font-size: 24px;
 
+      font-weight: bold;
 
     }
 
-    .content {
 
-      position: absolute;
 
-      bottom: 0;
 
-      right: 0;
 
-      width: 518px;
 
-      .title {
 
-        font-size: 34px;
 
-        text-transform: uppercase;
 
+
 
+    .about {
 
+      .cover {
 
+        width: 614px;
 
+        height: 412px;
 
+        background-color: pink;
 
       }
 
-      .detail {
 
-        font-size: 14px;
 
-        line-height: 40px;
 
-        text-align: justify;
 
+      .container {
 
+        position: relative;
 
       }
 
-      .tags {
 
-        margin-top: 36px;
 
-        display: -webkit-box;
 
-        display: -ms-flexbox;
 
-        display: flex;
 
-        .tag {
 
-          padding: 8px 14px;
 
-          font-size: 16px;
 
-          color: #0688d2;
 
-          background: #eff9ff;
 
+      .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;
 
         }
 
       }
 
-      .line {
 
-        margin: 32px 0;
 
-        width: 32px;
 
-        height: 2px;
 
-        background: #d8d8d8;
 
+    }
 
+
 
+    .service {
 
+      margin-top: 180px;
 
+      margin-bottom: 80px;
 
+      .cover {
 
+        position: relative;
 
+        width: 646px;
 
+        height: 490px;
 
+        background: #fff;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+
 
+        img {
 
+          position: absolute;
 
+          left: 50%;
 
+          top: 50%;
 
+          -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+          display: block;
 
+          width: 700px;
 
+        }
 
+      }
 
+      .content {
 
+        width: 416px;
 
+
 
+        .title {
 
+          padding-top: 24px;
 
+        }
 
+        .line {
 
+          margin: 32px 0;
 
+          width: 32px;
 
+          height: 2px;
 
+          background: #d8d8d8;
 
+        }
 
+        .detail {
 
+          font-size: 14px;
 
+          text-align: justify;
 
+
 
+          .lh40 {
 
+            line-height: 40px;
 
+          }
 
+
 
+          .lh28 {
 
+            line-height: 28px;
 
+          }
 
+
 
+          .mt32 {
 
+            margin-top: 32px;
 
+          }
 
+
 
+          .mt16 {
 
+            margin-top: 16px;
 
+          }
 
+
 
+          li {
 
+            .label {
 
+              margin-bottom: 16px;
 
+            }
 
+            .text {
 
+              color: #999999;
 
+            }
 
+          }
 
+
 
+          .description {
 
+            font-size: 16px;
 
+          }
 
+        }
 
       }
 
     }
 
   }
 
+}
 
 
-  .service {
 
-    margin-top: 180px;
 
-    margin-bottom: 80px;
 
-    .cover {
 
-      position: relative;
 
-      width: 646px;
 
-      height: 490px;
 
-      background: #fff;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
+@media screen and(max-width:768px) {
 
+  .main {
 
+    .title {
 
+      font-size: 0.48rem;
 
+      font-weight: bold;
 
+    }
 
 
-      img {
 
-        position: absolute;
 
-        left: 50%;
 
-        top: 50%;
 
-        -webkit-transform: translate(-50%, -50%);
 
-        transform: translate(-50%, -50%);
 
-        display: block;
 
-        width: 700px;
 
-      }
 
+    .container {
 
+      display: -webkit-box;
 
+      display: -ms-flexbox;
 
+      display: flex;
 
+      -webkit-box-pack: end;
 
+      -ms-flex-pack: end;
 
+      justify-content: flex-end;
 
+      -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;
 
     }
 
-    .content {
 
-      width: 416px;
 
 
-      .title {
 
-        padding-top: 24px;
 
+    .about {
 
+      position: relative;
 
+      margin-top: 0.8rem;
 
+
 
+      .cover {
 
+        width: 6.14rem;
 
+        height: 4.12rem;
 
+        margin-top: 0.48rem;
 
+
 
+        img {
 
+          display: block;
 
+          width: 6.14rem;
 
+          height: 4.12rem;
 
+        }
 
       }
 
-      .line {
 
-        margin: 32px 0;
 
-        width: 32px;
 
-        height: 2px;
 
-        background: #d8d8d8;
 
+      .container {
 
+        position: relative;
 
       }
 
-      .detail {
 
-        font-size: 14px;
 
-        text-align: justify;
 
-
 
-        .lh40 {
 
-          line-height: 40px;
 
+      .content {
 
+        width: 6.08rem;
 
+        margin: 0 auto;
 
+        float: none !important;
 
+        .title {
 
+          font-size: 0.34rem;
 
+          text-transform: uppercase;
 
+          text-align: center;
 
         }
 
-
 
-        .lh28 {
 
-          line-height: 28px;
 
+        .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.07rem 0.29rem;
 
+            font-size: 0.24rem;
 
+            color: #0688d2;
 
+            background: #eff9ff;
 
+          }
 
         }
 
+        .line {
 
+          margin: 0.32rem auto;
 
+          width: 0.4rem;
 
+          height: 0.03rem;
 
+          background: #d8d8d8;
 
+        }
 
+      }
 
+    }
 
+
 
+    .service {
 
+      margin-top: 0.9rem;
 
+      .cover {
 
+        position: relative;
 
+        width: 6.94rem;
 
+        height: 4.66rem;
 
+        background: #fff;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        margin-top: 0.32rem;
 
 
-        .mt32 {
 
-          margin-top: 32px;
 
+        img {
 
+          position: absolute;
 
+          left: 50%;
 
+          top: 50%;
 
+          -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+          display: block;
 
+          width: 100%;
 
         }
 
+      }
 
+      .content {
 
+        width: 6.08rem;
 
+        margin: 0 auto;
 
+        float: none !important;
 
 
-        .mt16 {
 
-          margin-top: 16px;
 
+        .title {
 
+          padding-top: 24px;
 
+          font-size: 0.34rem;
 
+          text-align: center;
 
+        }
 
+        .line {
 
+          margin: 0.32rem auto;
 
+          width: 0.4rem;
 
+          height: 0.03rem;
 
+          background: #d8d8d8;
 
         }
 
+        .detail {
 
+          font-size: 0.26rem;
 
+          text-align: center;
 
 
-        li {
 
-          .label {
 
-            margin-bottom: 16px;
 
+          .lh40 {
 
+            line-height: 0.4rem;
 
           }
 
-          .text {
 
-            color: #999999;
 
+
 
+          .lh28 {
 
+            line-height: 0.28rem;
 
           }
 
-        }
 
 
-        .description {
 
-          font-size: 16px;
 
+          .mt32 {
 
+            margin-top: 0.32rem;
 
+          }
 
+
 
+          .mt16 {
 
+            margin-top: 0.16rem;
 
+          }
 
+
 
+          li {
 
+            .label {
 
+              margin-bottom: 0.16rem;
 
+              margin-top: 0.32rem;
 
+            }
 
+            .text {
 
+              color: #999999;
 
+              font-size: 0.26rem;
 
+              line-height: 0.4rem;
 
+            }
 
+          }
 
+
 
+          .description {
 
+            font-size: 0.26rem;
 
+            line-height: 0.4rem;
 
+          }
 
         }
 
       }
 
     }

+ 239 - 112
css/product-intradermik.css
Целия файл 

@@ -1,113 +1,240 @@
 
-.main {
 
-  margin-top: -80px;
 
-}
 
-.main .title {
 
-  font-size: 24px;
 
-  font-weight: bold;
 
-}
 
-.main .about {
 
-  margin-bottom: 180px;
 
-}
 
-.main .about .cover {
 
-  width: 614px;
 
-  height: 412px;
 
-  background-color: pink;
 
-}
 
-.main .about .container {
 
-  position: relative;
 
-}
 
-.main .about .content {
 
-  position: absolute;
 
-  bottom: 0;
 
-  right: 0;
 
-  width: 518px;
 
-}
 
-.main .about .content .title {
 
-  font-size: 34px;
 
-  text-transform: uppercase;
 
-}
 
-.main .about .content .detail {
 
-  font-size: 14px;
 
-  line-height: 40px;
 
-  text-align: justify;
 
-}
 
-.main .about .content .tags {
 
-  margin-top: 36px;
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-}
 
-.main .about .content .tags .tag {
 
-  padding: 8px 14px;
 
-  font-size: 16px;
 
-  color: #0688d2;
 
-  background: #eff9ff;
 
-}
 
-.main .about .content .line {
 
-  margin: 32px 0;
 
-  width: 32px;
 
-  height: 2px;
 
-  background: #d8d8d8;
 
-}
 
-.main .service {
 
-  margin: 80px 0;
 
-}
 
-.main .service .cover {
 
-  width: 640px;
 
-  height: 480px;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .service.one .content {
 
-  background-image: url(/img/product-intradermik-service-bg-01.png);
 
-}
 
-.main .service.two .content {
 
-  background-image: url(/img/product-intradermik-service-bg-02.png);
 
-}
 
-.main .service.three .content {
 
-  background-image: url(/img/product-intradermik-service-bg-03.png);
 
-}
 
-.main .service.four .content {
 
-  background-image: url(/img/product-intradermik-service-bg-04.png);
 
-}
 
-.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 .service .content .title {
 
-  color: #fff;
 
-  margin-bottom: 20px;
 
-}
 
-.main .service .content .mb24 {
 
-  margin-bottom: 40px;
 
-}
 
-.main .service .content .mb56 {
 
-  margin-bottom: 56px;
 
-}
 
-.main .service .content .lh40 {
 
-  line-height: 40px;
 
-}
 
-.main .service .content .lh28 {
 
-  line-height: 28px;
 
-}
 
-.main .service .content .subtitle {
 
-  font-size: 16px;
 
-  color: #fff;
 
-}
 
-.main .service .content .detail {
 
-  color: #fff;
 
-  font-size: 16px;
 
-}
 
-.main .service .content .detail li {
 
-  margin-top: 32px;
 
-}
 
-.main .service .content .detail .label {
 
-  margin-bottom: 16px;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    margin-top: -80px;
 
+  }
 
+  .main .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+  }
 
+  .main .about {
 
+    margin-bottom: 180px;
 
+  }
 
+  .main .about .cover {
 
+    width: 614px;
 
+    height: 412px;
 
+    background-color: pink;
 
+  }
 
+  .main .about .container {
 
+    position: relative;
 
+  }
 
+  .main .about .content {
 
+    position: absolute;
 
+    bottom: 0;
 
+    right: 0;
 
+    width: 518px;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 34px;
 
+    text-transform: uppercase;
 
+  }
 
+  .main .about .content .detail {
 
+    font-size: 14px;
 
+    line-height: 40px;
 
+    text-align: justify;
 
+  }
 
+  .main .about .content .tags {
 
+    margin-top: 36px;
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+  }
 
+  .main .about .content .tags .tag {
 
+    padding: 8px 14px;
 
+    font-size: 16px;
 
+    color: #0688d2;
 
+    background: #eff9ff;
 
+  }
 
+  .main .about .content .line {
 
+    margin: 32px 0;
 
+    width: 32px;
 
+    height: 2px;
 
+    background: #d8d8d8;
 
+  }
 
+  .main .service {
 
+    margin: 80px 0;
 
+  }
 
+  .main .service .cover {
 
+    width: 640px;
 
+    height: 480px;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .service.one .content {
 
+    background-image: url(/img/product-intradermik-service-bg-01.png);
 
+  }
 
+  .main .service.two .content {
 
+    background-image: url(/img/product-intradermik-service-bg-02.png);
 
+  }
 
+  .main .service.three .content {
 
+    background-image: url(/img/product-intradermik-service-bg-03.png);
 
+  }
 
+  .main .service.four .content {
 
+    background-image: url(/img/product-intradermik-service-bg-04.png);
 
+  }
 
+  .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 .service .content .title {
 
+    color: #fff;
 
+    margin-bottom: 20px;
 
+  }
 
+  .main .service .content .mb24 {
 
+    margin-bottom: 40px;
 
+  }
 
+  .main .service .content .mb56 {
 
+    margin-bottom: 56px;
 
+  }
 
+  .main .service .content .lh40 {
 
+    line-height: 40px;
 
+  }
 
+  .main .service .content .lh28 {
 
+    line-height: 28px;
 
+  }
 
+  .main .service .content .subtitle {
 
+    font-size: 16px;
 
+    color: #fff;
 
+  }
 
+  .main .service .content .detail {
 
+    color: #fff;
 
+    font-size: 16px;
 
+  }
 
+  .main .service .content .detail li {
 
+    margin-top: 32px;
 
+  }
 
+  .main .service .content .detail .label {
 
+    margin-bottom: 16px;
 
+  }
 
+}
 
+@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;
 
+  }
 
+  .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 .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .about .container {
 
+    position: relative;
 
+  }
 
+  .main .about .content {
 
+    width: 6.14rem;
 
+    float: unset !important;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 0.48rem;
 
+    text-transform: uppercase;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .detail {
 
+    font-size: 0.24rem;
 
+    line-height: 0.4rem;
 
+    text-align: justify;
 
+  }
 
+  .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 .tags .tag {
 
+    padding: 0.08rem 0.41rem;
 
+    font-size: 0.24rem;
 
+    color: #3da5b8;
 
+    background: #e6fcff;
 
+  }
 
+  .main .about .content .line {
 
+    width: 0.4rem;
 
+    height: 0.03rem;
 
+    background: #d8d8d8;
 
+    margin: 0.32rem auto;
 
+  }
 
+  .main .service {
 
+    margin: 1.2rem 0;
 
+  }
 
+  .main .service .cover {
 
+    width: 6.14rem;
 
+    height: 4.66rem;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    float: unset !important;
 
+    margin-top: 0.48rem;
 
+  }
 
+  .main .service .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;
 
+    text-align: center;
 
+  }
 
+  .main .service .content .title {
 
+    margin-bottom: 0.4rem;
 
+  }
 
+  .main .service .content .mb24 {
 
+    margin-bottom: 0.4rem;
 
+  }
 
+  .main .service .content .mb56 {
 
+    margin-bottom: 0.56rem;
 
+  }
 
+  .main .service .content .lh40 {
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content .lh28 {
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content .subtitle {
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .service .content .detail {
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .service .content .detail li {
 
+    margin-top: 0.32rem;
 
+  }
 
+  .main .service .content .detail .label {
 
+    margin-bottom: 0.16rem;
 
+  }
 
 }

+ 247 - 101
css/product-intradermik.scss
Целия файл 

@@ -1,133 +1,279 @@
 
-.main {
 
-  margin-top: -80px;
 
-  .title {
 
-    font-size: 24px;
 
-    font-weight: bold;
 
-  }
 
-
 
-  .about {
 
-    margin-bottom: 180px;
 
-    .cover {
 
-      width: 614px;
 
-      height: 412px;
 
-      background-color: pink;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    margin-top: -80px;
 
+    .title {
 
+      font-size: 24px;
 
+      font-weight: bold;
 
     }
 
-    .container {
 
-      position: relative;
 
+
 
+    .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;
 
+        }
 
+      }
 
     }
 
-    .content {
 
-      position: absolute;
 
-      bottom: 0;
 
-      right: 0;
 
-      width: 518px;
 
-      .title {
 
-        font-size: 34px;
 
-        text-transform: uppercase;
 
+
 
+    .service {
 
+      margin: 80px 0;
 
+
 
+      .cover {
 
+        width: 640px;
 
+        height: 480px;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
       }
 
-      .detail {
 
-        font-size: 14px;
 
-        line-height: 40px;
 
-        text-align: justify;
 
+
 
+      &.one {
 
+        .content {
 
+          background-image: url(/img/product-intradermik-service-bg-01.png);
 
+        }
 
       }
 
-      .tags {
 
-        margin-top: 36px;
 
-        display: -webkit-box;
 
-        display: -ms-flexbox;
 
-        display: flex;
 
-        .tag {
 
-          padding: 8px 14px;
 
-          font-size: 16px;
 
-          color: #0688d2;
 
-          background: #eff9ff;
 
+      &.two {
 
+        .content {
 
+          background-image: url(/img/product-intradermik-service-bg-02.png);
 
         }
 
       }
 
-      .line {
 
-        margin: 32px 0;
 
-        width: 32px;
 
-        height: 2px;
 
-        background: #d8d8d8;
 
+      &.three {
 
+        .content {
 
+          background-image: url(/img/product-intradermik-service-bg-03.png);
 
+        }
 
+      }
 
+      &.four {
 
+        .content {
 
+          background-image: url(/img/product-intradermik-service-bg-04.png);
 
+        }
 
+      }
 
+
 
+      .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;
 
+        }
 
+
 
+        .mb24 {
 
+          margin-bottom: 40px;
 
+        }
 
+
 
+        .mb56 {
 
+          margin-bottom: 56px;
 
+        }
 
+
 
+        .lh40 {
 
+          line-height: 40px;
 
+        }
 
+
 
+        .lh28 {
 
+          line-height: 28px;
 
+        }
 
+
 
+        .subtitle {
 
+          font-size: 16px;
 
+          color: #fff;
 
+        }
 
+
 
+        .detail {
 
+          color: #fff;
 
+          font-size: 16px;
 
+
 
+          li {
 
+            margin-top: 32px;
 
+          }
 
+
 
+          .label {
 
+            margin-bottom: 16px;
 
+          }
 
+        }
 
       }
 
     }
 
   }
 
+}
 
 
-  .service {
 
-    margin: 80px 0;
 
-
 
-    .cover {
 
-      width: 640px;
 
-      height: 480px;
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
+@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;
 
     }
 
 
-    &.one {
 
-      .content {
 
-        background-image: url(/img/product-intradermik-service-bg-01.png);
 
-      }
 
+    .title {
 
+      font-size: 0.48rem;
 
+      font-weight: bold;
 
     }
 
-    &.two {
 
-      .content {
 
-        background-image: url(/img/product-intradermik-service-bg-02.png);
 
+
 
+    .about {
 
+      margin-top: 0.8rem;
 
+      .cover {
 
+        width: 6.14rem;
 
+        height: 4.12rem;
 
+        float: unset !important;
 
+        margin-top: 0.48rem;
 
+
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
-    }
 
-    &.three {
 
-      .content {
 
-        background-image: url(/img/product-intradermik-service-bg-03.png);
 
+      .container {
 
+        position: relative;
 
       }
 
-    }
 
-    &.four {
 
       .content {
 
-        background-image: url(/img/product-intradermik-service-bg-04.png);
 
+        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;
 
+          }
 
+        }
 
+        .line {
 
+          width: 0.4rem;
 
+          height: 0.03rem;
 
+          background: #d8d8d8;
 
+          margin: 0.32rem auto;
 
+        }
 
       }
 
     }
 
 
-    .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;
 
-      }
 
+    .service {
 
+      margin: 1.2rem 0;
 
 
-      .mb24 {
 
-        margin-bottom: 40px;
 
-      }
 
+      .cover {
 
+        width: 6.14rem;
 
+        height: 4.66rem;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        float: unset !important;
 
+        margin-top: 0.48rem;
 
 
-      .mb56 {
 
-        margin-bottom: 56px;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
 
-      .lh40 {
 
-        line-height: 40px;
 
-      }
 
+      .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;
 
 
-      .lh28 {
 
-        line-height: 28px;
 
-      }
 
+        .title {
 
+          margin-bottom: 0.4rem;
 
+        }
 
 
-      .subtitle {
 
-        font-size: 16px;
 
-        color: #fff;
 
-      }
 
+        .mb24 {
 
+          margin-bottom: 0.4rem;
 
+        }
 
 
-      .detail {
 
-        color: #fff;
 
-        font-size: 16px;
 
+        .mb56 {
 
+          margin-bottom: 0.56rem;
 
+        }
 
+
 
+        .lh40 {
 
+          line-height: 0.4rem;
 
+        }
 
 
-        li {
 
-          margin-top: 32px;
 
+        .lh28 {
 
+          line-height: 0.4rem;
 
         }
 
 
-        .label {
 
-          margin-bottom: 16px;
 
+        .subtitle {
 
+          font-size: 0.26rem;
 
+        }
 
+
 
+        .detail {
 
+          font-size: 0.26rem;
 
+
 
+          li {
 
+            margin-top: 0.32rem;
 
+          }
 
+
 
+          .label {
 
+            margin-bottom: 0.16rem;
 
+          }
 
         }
 
       }
 
     }

+ 171 - 77
css/product-kestos.css
Целия файл 

@@ -1,80 +1,174 @@
 
-.main .service {
 
-  margin-top: 140px;
 
-}
 
-.main .service .container {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: justify;
 
-  -ms-flex-pack: justify;
 
-  justify-content: space-between;
 
-}
 
-.main .service .item {
 
-  width: 558px;
 
-}
 
-.main .service .cover {
 
-  width: 558px;
 
-  height: 418px;
 
-}
 
-.main .service .cover img {
 
-  display: block;
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.main .service .content .title {
 
-  font-size: 24px;
 
-  font-weight: bold;
 
-  margin: 40px 0 16px;
 
-}
 
-.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;
 
+@media screen and (min-width: 768px) {
 
+  .main .service {
 
+    margin-top: 140px;
 
+  }
 
+  .main .service .container {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-pack: justify;
 
+    -ms-flex-pack: justify;
 
+    justify-content: space-between;
 
+  }
 
+  .main .service .item {
 
+    width: 558px;
 
+  }
 
+  .main .service .cover {
 
+    width: 558px;
 
+    height: 418px;
 
+  }
 
+  .main .service .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .service .content .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+    margin: 40px 0 16px;
 
+  }
 
+  .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;
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }
 
+@media screen and (max-width: 768px) {
 
+  .main .service .container {
 
+    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-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+  }
 
+  .main .service .item {
 
+    width: 5.58rem;
 
+  }
 
+  .main .service .cover {
 
+    width: 5.58rem;
 
+    height: 4.18rem;
 
+    margin-top: 1.2rem;
 
+  }
 
+  .main .service .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .service .content .title {
 
+    font-size: 0.34rem;
 
+    font-weight: bold;
 
+    margin: 0.32rem 0 0.16rem;
 
+  }
 
+  .main .service .content .detail {
 
+    text-align: justify;
 
+    line-height: 0.48rem;
 
+    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;
 
+    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 .description {
 
+    width: 6.12rem;
 
+    font-size: 0.24rem;
 
+    line-height: 0.48rem;
 
+    margin: 0 auto;
 
+    color: #fff;
 
+    text-align: center;
 
+  }
 
 
-.footer {
 
-  margin-top: 0;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 180 - 71
css/product-kestos.scss
Целия файл 

@@ -1,91 +1,200 @@
 
-.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;
 
-    }
 
+@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;
 
-    }
 
+      .item {
 
+        width: 558px;
 
+      }
 
 
-    .cover {
 
-      width: 558px;
 
-      height: 418px;
 
+      .cover {
 
+        width: 558px;
 
+        height: 418px;
 
 
-      img {
 
-        display: block;
 
-        width: 100%;
 
-        height: 100%;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
+      }
 
+      .content {
 
+        .title {
 
+          font-size: 24px;
 
+          font-weight: bold;
 
+          margin: 40px 0 16px;
 
+        }
 
+        .detail {
 
+          text-align: justify;
 
+          line-height: 32px;
 
+
 
+          .mr40 {
 
+            margin-right: 40px;
 
+          }
 
+
 
+          span {
 
+            color: #505050;
 
+            margin-right: 25px;
 
+
 
+            &::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;
 
+            }
 
+          }
 
+        }
 
       }
 
     }
 
-    .content {
 
+
 
+    .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;
 
-        font-weight: bold;
 
-        margin: 40px 0 16px;
 
+        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;
 
+      }
 
+    }
 
+  }
 
+
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 768px) {
 
+  .main {
 
+    .service {
 
+      .container {
 
+        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-align: center;
 
+        -ms-flex-align: center;
 
+        align-items: center;
 
+      }
 
+
 
+      .item {
 
+        width: 5.58rem;
 
       }
 
-      .detail {
 
-        text-align: justify;
 
-        line-height: 32px;
 
 
-        .mr40 {
 
-          margin-right: 40px;
 
+      .cover {
 
+        width: 5.58rem;
 
+        height: 4.18rem;
 
+        margin-top: 1.2rem;
 
+
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
         }
 
+      }
 
+      .content {
 
+        .title {
 
+          font-size: 0.34rem;
 
+          font-weight: bold;
 
+          margin: 0.32rem 0 0.16rem;
 
+        }
 
+        .detail {
 
+          text-align: justify;
 
+          line-height: 0.48rem;
 
+          font-size: 0.26rem;
 
+
 
+          .mr40 {
 
+            margin-right: 0.4rem;
 
+          }
 
 
-        span {
 
-          color: #505050;
 
-          margin-right: 25px;
 
-
 
-          &::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;
 
+          li {
 
+            margin-top: 0.24rem;
 
+          }
 
+
 
+          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;
 
+            }
 
           }
 
         }
 
       }
 
     }
 
-  }
 
 
-  .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;
 
+    .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;
 
+  .footer {
 
+    margin-top: 0;
 
+  }
 
 }

+ 209 - 96
css/product-mesobiolift.css
Целия файл 

@@ -1,99 +1,212 @@
 
-.main .about {
 
-  margin-top: 100px;
 
-}
 
-.main .about .container {
 
-  position: relative;
 
-}
 
-.main .about .cover {
 
-  position: absolute;
 
-  left: 0;
 
-  top: 0;
 
-  width: 680px;
 
-  height: 452px;
 
-  background: pink;
 
-}
 
-.main .about .content {
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.main .about .content .title {
 
-  font-size: 24px;
 
-  font-weight: bold;
 
-  padding: 10px 0 20px;
 
-  text-align: center;
 
-}
 
-.main .about .content .subtitle {
 
-  font-size: 16px;
 
-  text-align: center;
 
-}
 
-.main .about .content .title,
 
+@media screen and (min-width: 768px) {
 
+  .main .about {
 
+    margin-top: 100px;
 
+  }
 
+  .main .about .container {
 
+    position: relative;
 
+  }
 
+  .main .about .cover {
 
+    position: absolute;
 
+    left: 0;
 
+    top: 0;
 
+    width: 680px;
 
+    height: 452px;
 
+  }
 
+  .main .about .content {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+    padding: 10px 0 20px;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .subtitle {
 
+    font-size: 16px;
 
+    text-align: center;
 
+  }
 
+  .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 .service {
 
-  margin-top: 180px;
 
-}
 
-.main .service.one .content {
 
-  background-image: url(/img/service-title-bg-one.png);
 
-}
 
-.main .service.one .cover {
 
-  height: 578px;
 
-}
 
-.main .service.two .content {
 
-  background-image: url(/img/service-title-bg-two.png);
 
-}
 
-.main .service.two .cover {
 
-  height: 700px;
 
-}
 
-.main .service .cover {
 
-  width: 567px;
 
-  background-color: pink;
 
-}
 
-.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 .service .content .title {
 
-  font-size: 24px;
 
-  font-weight: bold;
 
-}
 
-.main .service .content .line {
 
-  height: 3px;
 
-  width: 32px;
 
-  background-color: #f7f7f7;
 
-  margin: 32px 0;
 
-}
 
-.main .service .content .description {
 
-  font-size: 16px;
 
-  line-height: 40px;
 
-}
 
-.main .service .content .detail {
 
-  margin-top: 32px;
 
-}
 
-.main .service .content .detail li {
 
-  line-height: 40px;
 
-}
 
-.main .service .content .detail .text {
 
-  color: #999;
 
+    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 .service {
 
+    margin-top: 180px;
 
+  }
 
+  .main .service.one .content {
 
+    background-image: url(/img/service-title-bg-one.png);
 
+  }
 
+  .main .service.one .cover {
 
+    height: 578px;
 
+  }
 
+  .main .service.two .content {
 
+    background-image: url(/img/service-title-bg-two.png);
 
+  }
 
+  .main .service.two .cover {
 
+    height: 700px;
 
+  }
 
+  .main .service .cover {
 
+    width: 567px;
 
+    background-color: pink;
 
+  }
 
+  .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 .service .content .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+  }
 
+  .main .service .content .line {
 
+    height: 3px;
 
+    width: 32px;
 
+    background-color: #f7f7f7;
 
+    margin: 32px 0;
 
+  }
 
+  .main .service .content .description {
 
+    font-size: 16px;
 
+    line-height: 40px;
 
+  }
 
+  .main .service .content .detail {
 
+    margin-top: 32px;
 
+  }
 
+  .main .service .content .detail li {
 
+    line-height: 40px;
 
+  }
 
+  .main .service .content .detail .text {
 
+    color: #999;
 
+  }
 
+}
 
+@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;
 
+  }
 
+  .main .about {
 
+    margin-top: 1.2rem;
 
+  }
 
+  .main .about .cover {
 
+    width: 6.14rem;
 
+    height: 4.08rem;
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .about .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .about .content {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    width: 5.82rem;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .title {
 
+    font-size: 0.3rem;
 
+    font-weight: bold;
 
+    text-align: center;
 
+  }
 
+  .main .about .content .subtitle {
 
+    font-size: 0.26rem;
 
+    text-align: center;
 
+    color: #999;
 
+    margin: 0.16rem 0 0.4rem;
 
+  }
 
+  .main .about .content .section .description {
 
+    line-height: 0.4rem;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .about .content .section ul {
 
+    margin-top: 0.24rem;
 
+  }
 
+  .main .about .content .section ul li {
 
+    line-height: 0.48rem;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .service {
 
+    margin-top: 1.2rem;
 
+  }
 
+  .main .service.one .content {
 
+    background-image: url(/img/service-title-bg-one.png);
 
+  }
 
+  .main .service.two .content {
 
+    background-image: url(/img/service-title-bg-two.png);
 
+  }
 
+  .main .service .cover {
 
+    width: 5.68rem;
 
+    margin-top: 0.32rem;
 
+  }
 
+  .main .service .cover img {
 
+    display: block;
 
+    width: 100%;
 
+  }
 
+  .main .service .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;
 
+  }
 
+  .main .service .content .title {
 
+    font-size: 24px;
 
+    font-weight: bold;
 
+    text-align: center;
 
+    margin-top: 0.85rem;
 
+  }
 
+  .main .service .content .line {
 
+    height: 0.03rem;
 
+    width: 0.4rem;
 
+    background-color: #f7f7f7;
 
+    margin: 0.4rem auto 0.32rem;
 
+  }
 
+  .main .service .content .description {
 
+    font-size: 0.26rem;
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content .detail {
 
+    margin-top: 0.32rem;
 
+    font-size: 0.24rem;
 
+  }
 
+  .main .service .content .detail li {
 
+    line-height: 0.48rem;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .service .content .detail .text {
 
+    color: #999;
 
+    font-size: 0.26rem;
 
+  }
 
 }

+ 215 - 82
css/product-mesobiolift.scss
Целия файл 

@@ -1,118 +1,251 @@
 
-.main {
 
-  .about {
 
-    margin-top: 100px;
 
+@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;
 
-      background: pink;
 
+      .container {
 
+        position: relative;
 
+      }
 
+      .cover {
 
+        position: absolute;
 
+        left: 0;
 
+        top: 0;
 
+        width: 680px;
 
+        height: 452px;
 
+      }
 
+
 
+      .content {
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+
 
+        .title {
 
+          font-size: 24px;
 
+          font-weight: bold;
 
+          padding: 10px 0 20px;
 
+          text-align: center;
 
+        }
 
+
 
+        .subtitle {
 
+          font-size: 16px;
 
+          text-align: center;
 
+        }
 
+
 
+        .title,
 
+        .subtitle,
 
+        .section {
 
+          padding-left: 735px;
 
+        }
 
+        .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;
 
+          }
 
+          ul {
 
+            li {
 
+              line-height: 40px;
 
+            }
 
+          }
 
+        }
 
+      }
 
     }
 
 
-    .content {
 
-      -webkit-box-sizing: border-box;
 
-      box-sizing: border-box;
 
+    .service {
 
+      margin-top: 180px;
 
 
-      .title {
 
-        font-size: 24px;
 
-        font-weight: bold;
 
-        padding: 10px 0 20px;
 
-        text-align: center;
 
+      &.one {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-one.png);
 
+        }
 
+
 
+        .cover {
 
+          height: 578px;
 
+        }
 
       }
 
+      &.two {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-two.png);
 
+        }
 
 
-      .subtitle {
 
-        font-size: 16px;
 
-        text-align: center;
 
+        .cover {
 
+          height: 700px;
 
+        }
 
       }
 
 
-      .title,
 
-      .subtitle,
 
-      .section {
 
-        padding-left: 735px;
 
+      .cover {
 
+        width: 567px;
 
+        background-color: pink;
 
       }
 
-      .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;
 
+
 
+      .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 {
 
-          line-height: 32px;
 
+          font-size: 16px;
 
+          line-height: 40px;
 
         }
 
-        ul {
 
+        .detail {
 
+          margin-top: 32px;
 
           li {
 
             line-height: 40px;
 
           }
 
+
 
+          .text {
 
+            color: #999;
 
+          }
 
         }
 
       }
 
     }
 
   }
 
+}
 
 
-  .service {
 
-    margin-top: 180px;
 
+@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;
 
 
-    &.one {
 
-      .content {
 
-        background-image: url(/img/service-title-bg-one.png);
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
 
-      .cover {
 
-        height: 578px;
 
-      }
 
-    }
 
-    &.two {
 
       .content {
 
-        background-image: url(/img/service-title-bg-two.png);
 
-      }
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        width: 5.82rem;
 
+        text-align: center;
 
 
-      .cover {
 
-        height: 700px;
 
+        .title {
 
+          font-size: 0.3rem;
 
+          font-weight: bold;
 
+          text-align: center;
 
+        }
 
+
 
+        .subtitle {
 
+          font-size: 0.26rem;
 
+          text-align: center;
 
+          color: #999;
 
+          margin: 0.16rem 0 0.4rem;
 
+        }
 
+
 
+        .section {
 
+          .description {
 
+            line-height: 0.4rem;
 
+            font-size: 0.26rem;
 
+          }
 
+          ul {
 
+            margin-top: 0.24rem;
 
+            li {
 
+              line-height: 0.48rem;
 
+              font-size: 0.26rem;
 
+            }
 
+          }
 
+        }
 
       }
 
     }
 
 
-    .cover {
 
-      width: 567px;
 
-      background-color: pink;
 
-    }
 
+    .service {
 
+      margin-top: 1.2rem;
 
 
-    .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;
 
+      &.one {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-one.png);
 
+        }
 
       }
 
-      .line {
 
-        height: 3px;
 
-        width: 32px;
 
-        background-color: #f7f7f7;
 
-        margin: 32px 0;
 
+      &.two {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-two.png);
 
+        }
 
       }
 
-      .description {
 
-        font-size: 16px;
 
-        line-height: 40px;
 
+
 
+      .cover {
 
+        width: 5.68rem;
 
+        margin-top: 0.32rem;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+        }
 
       }
 
-      .detail {
 
-        margin-top: 32px;
 
-        li {
 
-          line-height: 40px;
 
+
 
+      .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;
 
+          }
 
 
-        .text {
 
-          color: #999;
 
+          .text {
 
+            color: #999;
 
+            font-size: 0.26rem;
 
+          }
 
         }
 
       }
 
     }

+ 297 - 144
css/product-rollaction.css
Целия файл 

@@ -1,146 +1,299 @@
 
-.main .about {
 
-  margin-top: 100px;
 
+@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 .item:nth-child(1), .main .about .item:nth-child(2) {
 
+    left: 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 .about .item .cover {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .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;
 
+    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-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;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+  }
 
+  .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;
 
+  }
 
 }
 
-.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 .item:nth-child(1), .main .about .item:nth-child(2) {
 
-  left: 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 .about .item .cover {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-.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;
 
-  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-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;
 
-  -webkit-box-sizing: border-box;
 
-  box-sizing: border-box;
 
-}
 
-.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 .about .item:nth-child(1), .main .about .item:nth-child(2) {
 
+    left: 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 .about .item .cover {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .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;
 
+    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 .about .item .active .title {
 
+    font-size: 0.26rem;
 
+    color: #fff;
 
+  }
 
+  .main .about .item .active .line {
 
+    width: 0.32rem;
 
+    height: 0.02rem;
 
+    background-color: #ffffff;
 
+    margin: 0.32rem auto;
 
+  }
 
+  .main .about .item .active .detail {
 
+    font-size: 0.2rem;
 
+    color: #fff;
 
+    line-height: 0.4rem;
 
+    padding: 0 0.18rem;
 
+  }
 
+  .main .service {
 
+    margin-top: 1.2rem;
 
+  }
 
+  .main .service .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;
 
+  }
 
+  .main .service .cover {
 
+    width: 5.68rem;
 
+    height: 5.68rem;
 
+    float: unset !important;
 
+    margin-top: 0.4rem;
 
+  }
 
+  .main .service .cover img {
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  .main .service.one .content {
 
+    background-image: url(/img/service-title-bg-one.png);
 
+  }
 
+  .main .service.two .content {
 
+    background-image: url(/img/service-title-bg-two.png);
 
+  }
 
+  .main .service.three .content {
 
+    background-image: url(/img/service-title-bg-three.png);
 
+  }
 
+  .main .service .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;
 
+  }
 
+  .main .service .content .title {
 
+    font-size: 0.34rem;
 
+    font-weight: bold;
 
+  }
 
+  .main .service .content .line {
 
+    width: 0.4rem;
 
+    height: 0.03rem;
 
+    background-color: #e8e8e8;
 
+    margin: 0.32rem auto;
 
+  }
 
+  .main .service .content .text {
 
+    color: #999;
 
+    font-size: 0.26rem;
 
+  }
 
+  .main .service .content .lh40 {
 
+    line-height: 0.4rem;
 
+  }
 
+  .main .service .content ul > li {
 
+    font-size: 0.26rem;
 
+  }
 
 }

+ 307 - 123
css/product-rollaction.scss
Целия файл 

@@ -1,46 +1,111 @@
 
-.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;
 
+@media screen and (min-width: 768px) {
 
+  .main {
 
+    .about {
 
+      margin-top: 100px;
 
+      .container {
 
         height: 592px;
 
-        margin: 0 auto;
 
+        position: relative;
 
       }
 
+      .item {
 
+        position: absolute;
 
+        width: 286px;
 
+        height: 286px;
 
+        background-color: pink;
 
 
-      &:nth-child(1),
 
-      &:nth-child(2) {
 
-        left: 0;
 
-      }
 
+        &:nth-child(3) {
 
+          position: relative;
 
+          width: 592px;
 
+          height: 592px;
 
+          margin: 0 auto;
 
+        }
 
 
-      &:nth-child(1),
 
-      &:nth-child(4) {
 
-        top: 0;
 
-      }
 
+        &:nth-child(1),
 
+        &:nth-child(2) {
 
+          left: 0;
 
+        }
 
 
-      &:nth-child(4),
 
-      &:nth-child(5) {
 
-        right: 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;
 
+        }
 
 
-      &:nth-child(2),
 
-      &:nth-child(5) {
 
-        bottom: 0;
 
+        .cover {
 
+          width: 100%;
 
+          height: 100%;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
+          }
 
+        }
 
+
 
+        &:hover {
 
+          .active {
 
+            opacity: 1;
 
+          }
 
+        }
 
+
 
+        .active {
 
+          opacity: 0;
 
+          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;
 
+          -webkit-transition: all 0.4s;
 
+          transition: all 0.4s;
 
+          .title {
 
+            font-size: 24px;
 
+            color: #fff;
 
+          }
 
+          .line {
 
+            width: 32px;
 
+            height: 2px;
 
+            background-color: #ffffff;
 
+            margin: 40px auto;
 
+          }
 
+          .detail {
 
+            font-size: 16px;
 
+            color: #fff;
 
+            line-height: 40px;
 
+            padding: 0 70px;
 
+          }
 
+        }
 
       }
 
+    }
 
+
 
+    .service {
 
+      margin-top: 140px;
 
 
       .cover {
 
-        width: 100%;
 
-        height: 100%;
 
+        width: 568px;
 
+        height: 568px;
 
+        background: pink;
 
         img {
 
           display: block;
 
           width: 100%;
 
@@ -48,128 +113,247 @@
 
         }
 
       }
 
 
-      &:hover {
 
-        .active {
 
-          opacity: 1;
 
+      &.one {
 
+        .content {
 
+          padding-top: 113px;
 
+          background-image: url(/img/service-title-bg-one.png);
 
         }
 
       }
 
 
-      .active {
 
-        opacity: 0;
 
-        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;
 
-        -webkit-transition: all 0.4s;
 
-        transition: all 0.4s;
 
+      &.two {
 
+        background: #f7f7f7;
 
+        margin-top: 319px;
 
+
 
+        .container {
 
+          position: relative;
 
+          .cover {
 
+            position: absolute;
 
+            bottom: 76px;
 
+            left: 0;
 
+          }
 
+
 
+          .content {
 
+            padding-top: 173px;
 
+            height: 456px;
 
+            background-image: url(/img/service-title-bg-two.png);
 
+            background-position: left 60px;
 
+          }
 
+        }
 
+      }
 
+
 
+      &.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;
 
-          color: #fff;
 
+          font-weight: bold;
 
         }
 
         .line {
 
           width: 32px;
 
-          height: 2px;
 
-          background-color: #ffffff;
 
-          margin: 40px auto;
 
+          height: 3px;
 
+          background-color: #e8e8e8;
 
+          margin: 32px 0;
 
+        }
 
+
 
+        .text {
 
+          color: #999;
 
         }
 
-        .detail {
 
-          font-size: 16px;
 
-          color: #fff;
 
+
 
+        .lh40 {
 
           line-height: 40px;
 
-          padding: 0 70px;
 
         }
 
       }
 
     }
 
   }
 
+}
 
 
-  .service {
 
-    margin-top: 140px;
 
-
 
-    .cover {
 
-      width: 568px;
 
-      height: 568px;
 
-      background: pink;
 
-      img {
 
-        display: block;
 
-        width: 100%;
 
-        height: 100%;
 
+@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;
 
 
-    &.one {
 
-      .content {
 
-        padding-top: 113px;
 
-        background-image: url(/img/service-title-bg-one.png);
 
-      }
 
-    }
 
+        &:nth-child(3) {
 
+          position: relative;
 
+          width: 3.36rem;
 
+          height: 3.36rem;
 
+          margin: 0 auto;
 
+        }
 
 
-    &.two {
 
-      background: #f7f7f7;
 
-      margin-top: 319px;
 
+        &: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;
 
+        }
 
 
-      .container {
 
-        position: relative;
 
         .cover {
 
-          position: absolute;
 
-          bottom: 76px;
 
-          left: 0;
 
+          width: 100%;
 
+          height: 100%;
 
+          img {
 
+            display: block;
 
+            width: 100%;
 
+            height: 100%;
 
+          }
 
         }
 
 
-        .content {
 
-          padding-top: 173px;
 
-          height: 456px;
 
-          background-image: url(/img/service-title-bg-two.png);
 
-          background-position: left 60px;
 
+        .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 {
 
+            font-size: 0.26rem;
 
+            color: #fff;
 
+          }
 
+          .line {
 
+            width: 0.32rem;
 
+            height: 0.02rem;
 
+            background-color: #ffffff;
 
+            margin: 0.32rem auto;
 
+          }
 
+          .detail {
 
+            font-size: 0.2rem;
 
+            color: #fff;
 
+            line-height: 0.4rem;
 
+            padding: 0 0.18rem;
 
+          }
 
         }
 
       }
 
     }
 
 
-    &.three {
 
-      .content {
 
-        padding-top: 113px;
 
-        background-image: url(/img/service-title-bg-three.png);
 
+    .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;
 
       }
 
-    }
 
 
-    .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;
 
+      .cover {
 
+        width: 5.68rem;
 
+        height: 5.68rem;
 
+        float: unset !important;
 
+        margin-top: 0.4rem;
 
+        img {
 
+          display: block;
 
+          width: 100%;
 
+          height: 100%;
 
+        }
 
       }
 
-      .line {
 
-        width: 32px;
 
-        height: 3px;
 
-        background-color: #e8e8e8;
 
-        margin: 32px 0;
 
+
 
+      &.one {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-one.png);
 
+        }
 
       }
 
 
-      .text {
 
-        color: #999;
 
+      &.two {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-two.png);
 
+        }
 
       }
 
 
-      .lh40 {
 
-        line-height: 40px;
 
+      &.three {
 
+        .content {
 
+          background-image: url(/img/service-title-bg-three.png);
 
+        }
 
+      }
 
+
 
+      .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;
 
+        }
 
+
 
+        .text {
 
+          color: #999;
 
+          font-size: 0.26rem;
 
+        }
 
+
 
+        .lh40 {
 
+          line-height: 0.4rem;
 
+        }
 
+
 
+        ul > li {
 
+          font-size: 0.26rem;
 
+        }
 
       }
 
     }
 
   }

BIN
img/icon-menu-arrow-down.png
Целия файл


BIN
img/icon-menu-arrow-up.png
Целия файл


BIN
img/icon-menu-close.png
Целия файл


BIN
img/icon-menu.png
Целия файл


BIN
img/logo3.png
Целия файл


+ 72 - 48
index.html
Целия файл 

@@ -3,57 +3,72 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/libs/swiper/swiper.min.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
     <link rel="stylesheet" href="/css/index.css" />
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li class="active"><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -122,7 +137,7 @@
 
           <img src="/img/title_brand_activities.png" alt="" />
 
           <h3>品牌活动</h3>
 
         </div>
 
-        <div class="content" id="activity">
 
+        <div class="content scroll-box" id="activity">
 
           <div class="item hover">
 
             <a href="/brand-detail.html">
 
               <img src="/img/brand_activity_01.png" alt="" />
 
@@ -306,8 +321,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -315,12 +338,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -331,7 +354,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -365,8 +388,9 @@
 
     </div>
 
     <!-- 底部区域 end -->
 
 
-    <script src="./libs/swiper/swiper.min.js"></script>
 
-    <script src="./libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/libs/swiper/swiper.min.js"></script>
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
     <script>
 
       var mySwiper = new Swiper('#banner', {
 
         loop: true, // 循环模式选项

+ 68 - 0
js/dist/main.dev.js
Целия файл 

@@ -0,0 +1,68 @@
 
+"use strict";
 
+
 
+function setHtmlFontSize() {
 
+  var width = 750; //如果是尺寸的设计稿在这里修改
 
+
 
+  document.documentElement.style.fontSize = 100 * innerWidth / width + 'px';
 
+}
 
+
 
+setHtmlFontSize();
 
+
 
+function windowReload() {
 
+  var isMiniScreen = innerWidth <= 768;
 
+  window.addEventListener('resize', function () {
 
+    setHtmlFontSize();
 
+    console.log(innerWidth);
 
+
 
+    if (isMiniScreen) {
 
+      if (innerWidth > 768) {
 
+        window.location.reload();
 
+      }
 
+    } else {
 
+      if (innerWidth < 768) {
 
+        window.location.reload();
 
+      }
 
+    }
 
+  });
 
+}
 
+
 
+windowReload();
 
+
 
+function startMenuAction() {
 
+  $(function () {
 
+    var isAnimated = false;
 
+    $('[data-toggle="dropdown"]').on('click', function () {
 
+      if (isAnimated) return;
 
+      isAnimated = true;
 
+      $(this).parent('.dropdown').toggleClass('open');
 
+      $(this).siblings('.dropdown-menu').slideToggle(false, function () {
 
+        isAnimated = false;
 
+      });
 
+    });
 
+    $('[data-toggle="collapse"]').on('click', function () {
 
+      if (isAnimated) return;
 
+      isAnimated = true;
 
+      var target = $(this).attr('data-target');
 
+      var expanded = $(this).attr('aria-expanded');
 
+
 
+      if (expanded === 'true') {
 
+        expanded = 'false';
 
+      } else {
 
+        expanded = 'true';
 
+      }
 
+
 
+      $(this).attr('aria-expanded', expanded);
 
+      $(target).slideToggle(function () {
 
+        if (expanded === 'true') {
 
+          $(this).css('background', 'rgba(0, 0, 0, 0.3)');
 
+        } else {
 
+          $(this).css('background', 'transparent');
 
+        }
 
+
 
+        isAnimated = false;
 
+      });
 
+    });
 
+  });
 
+}
 
+
 
+startMenuAction();

+ 63 - 0
js/main.js
Целия файл 

@@ -0,0 +1,63 @@
 
+function setHtmlFontSize() {
 
+  var width = 750 //如果是尺寸的设计稿在这里修改
 
+  document.documentElement.style.fontSize = (100 * innerWidth) / width + 'px'
 
+}
 
+setHtmlFontSize()
 
+
 
+function windowReload() {
 
+  var isMiniScreen = innerWidth <= 768
 
+  window.addEventListener('resize', function () {
 
+    setHtmlFontSize()
 
+    console.log(innerWidth)
 
+    if (isMiniScreen) {
 
+      if (innerWidth > 768) {
 
+        window.location.reload()
 
+      }
 
+    } else {
 
+      if (innerWidth < 768) {
 
+        window.location.reload()
 
+      }
 
+    }
 
+  })
 
+}
 
+
 
+windowReload()
 
+
 
+function startMenuAction() {
 
+  $(function () {
 
+    var isAnimated = false
 
+    $('[data-toggle="dropdown"]').on('click', function () {
 
+      if (isAnimated) return
 
+      isAnimated = true
 
+      $(this).parent('.dropdown').toggleClass('open')
 
+      $(this)
 
+        .siblings('.dropdown-menu')
 
+        .slideToggle(false, function () {
 
+          isAnimated = false
 
+        })
 
+    })
 
+
 
+    $('[data-toggle="collapse"]').on('click', function () {
 
+      if (isAnimated) return
 
+      isAnimated = true
 
+      var target = $(this).attr('data-target')
 
+      var expanded = $(this).attr('aria-expanded')
 
+      if (expanded === 'true') {
 
+        expanded = 'false'
 
+      } else {
 
+        expanded = 'true'
 
+      }
 
+      $(this).attr('aria-expanded', expanded)
 
+      $(target).slideToggle(function () {
 
+        if (expanded === 'true') {
 
+          $(this).css('background', 'rgba(0, 0, 0, 0.3)')
 
+        } else {
 
+          $(this).css('background', 'transparent')
 
+        }
 
+        isAnimated = false
 
+      })
 
+    })
 
+  })
 
+}
 
+
 
+startMenuAction()

+ 69 - 44
news-detail.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li class="active"><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <div class="container main">
 
@@ -80,8 +95,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -89,12 +112,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -105,7 +128,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -138,5 +161,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 70 - 45
news.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <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="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li>
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li class="active"><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner区域 start -->
 
@@ -113,7 +128,7 @@
 
 
       <div class="container">
 
         <ul class="pagination">
 
-          <li class="prev"><a href="#">上一页</a></li>
 
+          <!-- <li class="prev"><a href="#">上一页</a></li> -->
 
           <li class="active"><a href="#">1</a></li>
 
           <!-- <li class="more"><a href="#">...</a></li> -->
 
           <li><a href="#">2</a></li>
 
@@ -130,8 +145,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -139,12 +162,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -155,7 +178,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -188,5 +211,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 44
product-diactivplvs.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-产品系列-diactivplvs</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -201,8 +216,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="logo" /></div>
 
+          <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>
 
@@ -210,12 +233,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -226,7 +249,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -259,5 +282,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 44
product-intradermik.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-产品系列-INTRADERMIK</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -169,8 +184,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
+          <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>
 
@@ -178,12 +201,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -194,7 +217,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -227,5 +250,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 44
product-kestos.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-产品系列-kestos T2</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -113,8 +128,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="logo" /></div>
 
+          <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>
 
@@ -122,12 +145,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -138,7 +161,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -171,5 +194,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 122 - 97
product-mesobiolift.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-产品系列-mesobiolift</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -131,68 +146,78 @@
 
         </div>
 
       </div>
 
       <!-- 服务二 end -->
 
+    </div>
 
 
-      <!-- 底部区域 start -->
 
-      <div class="footer">
 
-        <div class="container clearfix">
 
-          <div class="section fl">
 
-            <div class="logo"><img src="/img/logo2.png" alt="" /></div>
 
-            <div class="item mobile">
 
-              <span>0755-23769340</span>
 
-              <span>周一至周五：09:00-18:00</span>
 
-            </div>
 
-            <div class="item email">518000</div>
 
-            <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
-          </div>
 
-          <ul class="nav fl">
 
-            <li><a href="#">首页</a></li>
 
-            <li><a href="#">ROS'S</a></li>
 
-            <li><a href="#">系列产品</a></li>
 
-          </ul>
 
-          <ul class="nav fl">
 
-            <li><a href="#">案例展示</a></li>
 
-            <li><a href="#">授权认证</a></li>
 
-            <li><a href="#">联系我们</a></li>
 
-          </ul>
 
-          <div class="qrcode fr">
 
-            <img src="/img/qrcode.png" alt="二维码" />
 
-            <div class="tip">扫一扫加关注</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>
 
-        <div class="line"></div>
 
-        <div class="link">
 
-          <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 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>
 
+          <div class="item email">518000</div>
 
+          <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <div class="copyright">
 
-          <a href="#">本网站使用族蚂技术创建及服务器托管</a>
 
-          <span>Copyright ©2019</span>
 
-          <span>acebelleshenzhen.com</span>
 
-          <span>版权所有 粤ICP备*****号</span>
 
+        <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>
 
+        <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>
 
+          <li><a href="/contact.html">联系我们</a></li>
 
+        </ul>
 
+        <div class="qrcode fr">
 
+          <img src="/img/qrcode.png" alt="二维码" />
 
+          <div class="tip">扫一扫加关注</div>
 
         </div>
 
       </div>
 
-      <!-- 底部区域 end -->
 
+      <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="#">本网站使用族蚂技术创建及服务器托管</a>
 
+        <span>Copyright ©2019</span>
 
+        <span>acebelleshenzhen.com</span>
 
+        <span>版权所有 粤ICP备*****号</span>
 
+      </div>
 
     </div>
 
+    <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>

+ 69 - 44
product-rollaction.html
Целия файл 

@@ -3,7 +3,7 @@
 
   <head>
 
     <meta charset="UTF-8" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
 
     <title>首页-艾斯佰丽官网-产品系列-rollaction</title>
 
     <link rel="stylesheet" href="/css/normalize.css" />
 
     <link rel="stylesheet" href="/css/base.css" />
 
@@ -11,48 +11,63 @@
 
   </head>
 
   <body>
 
     <!-- 顶部导航栏 start -->
 
-    <div class="header">
 
-      <div class="container flex">
 
-        <a href="/">
 
-          <div class="logo">
 
+    <nav class="header navbar">
 
+      <div class="container">
 
+        <div class="navbar-header">
 
+          <a href="/" class="logo">
 
             <h1>艾斯佰丽</h1>
 
-            <img src="/img/logo.png" alt="艾斯佰丽" />
 
+            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
 
+            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
 
+          </a>
 
+          <div
 
+            class="only-mobile navbar-toggle active"
 
+            data-toggle="collapse"
 
+            data-target="#navbar-collapse"
 
+            aria-expanded="false"
 
+          >
 
+            <span class="name">菜单</span>
 
+            <span class="icon-bar"></span>
 
           </div>
 
-        </a>
 
-        <ul class="nav clearfix">
 
-          <li><a href="/">首页</a></li>
 
-          <li><a href="/about.html">艾斯佰丽</a></li>
 
-          <li class="active">
 
-            <a href="/brand.html">品牌中心</a>
 
-            <ul class="menu">
 
-              <li><a href="/brand-ross.html">ROS'S介绍</a></li>
 
-              <li class="dropdown">
 
-                <a href="javascript:void(0)">产品系列</a>
 
-                <ul class="submenu clearfix">
 
-                  <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>
 
-                  <li><a href="/product-rollaction.html">Rollaction</a></li>
 
-                  <li><a href="/product-kestos.html">Kestos T2</a></li>
 
-                </ul>
 
-              </li>
 
-              <li><a href="/case.html">案例展示</a></li>
 
-              <li><a href="#">授权认证</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="/cooperative.html">合作加盟</a></li>
 
-          <li><a href="/news.html">新闻动态</a></li>
 
-          <li>
 
-            <a href="/contact.html">联系我们</a>
 
-            <ul class="menu">
 
-              <li><a href="/contact.html">联系我们</a></li>
 
-              <li><a href="/contact-consult.html">联系方式</a></li>
 
-              <li><a href="/contact-join.html">人才招聘</a></li>
 
-            </ul>
 
-          </li>
 
-        </ul>
 
+        </div>
 
+        <div class="navbar-collapse" id="navbar-collapse">
 
+          <ul class="nav clearfix">
 
+            <li class="active"><a href="/">首页</a></li>
 
+            <li><a href="/about.html">艾斯佰丽</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>
 
+              <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-diactivplvs.html">Diactivplvs</a></li>
 
+                    <li><a href="/product-intradermik.html">Intradermik</a></li>
 
+                    <li><a href="/product-mesobiolift.html">Mesobiolift RF</a></li>
 
+                    <li><a href="/product-rollaction.html">Rollaction</a></li>
 
+                    <li><a href="/product-kestos.html">Kestos T2</a></li>
 
+                  </ul>
 
+                </li>
 
+                <li><a href="/case.html">案例展示</a></li>
 
+                <li><a href="#">授权认证</a></li>
 
+              </ul>
 
+            </li>
 
+            <li><a href="/cooperative.html">合作加盟</a></li>
 
+            <li><a href="/news.html">新闻动态</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>
 
+              <ul class="dropdown-menu">
 
+                <li class="only-mobile"><a href="/contact.html">联系我们</a></li>
 
+                <li><a href="/contact-consult.html">联系方式</a></li>
 
+                <li><a href="/contact-join.html">人才招聘</a></li>
 
+              </ul>
 
+            </li>
 
+          </ul>
 
+        </div>
 
       </div>
 
-    </div>
 
+    </nav>
 
     <!-- 顶部导航栏 end -->
 
 
     <!-- banner图 start -->
 
@@ -158,8 +173,16 @@
 
     <!-- 底部区域 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>
 
         <div class="section fl">
 
-          <div class="logo"><img src="/img/logo2.png" alt="logo" /></div>
 
+          <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>
 
@@ -167,12 +190,12 @@
 
           <div class="item email">518000</div>
 
           <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
 
         </div>
 
-        <ul class="nav fl">
 
+        <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>
 
-        <ul class="nav fl">
 
+        <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>
 
           <li><a href="/contact.html">联系我们</a></li>
 
@@ -183,7 +206,7 @@
 
         </div>
 
       </div>
 
       <div class="line"></div>
 
-      <div class="link">
 
+      <div class="link only-pc">
 
         <a href="#">法律声明</a>
 
         <i></i>
 
         <a href="#">隐私政策</a>
 
@@ -216,5 +239,7 @@
 
       </div>
 
     </div>
 
     <!-- 底部区域 end -->
 
+    <script src="/libs/jquery-3.6.0.min.js"></script>
 
+    <script src="/js/main.js"></script>
 
   </body>
 
 </html>