浏览器兼容性处理

contact.html

@@ -171,7 +171,7 @@
           position: new AMap.LngLat(...lnglat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
           title: '深圳市福田区卓越世纪中心四号楼32层',
         })
-        const div = document.createElement('div')
+        var div = document.createElement('div')
         div.classList.add('map-tip')
         // div.innerText = '深圳艾斯佰丽生物科技有限公司'
         div.innerHTML =

css/about.css

@@ -14,16 +14,28 @@
   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;
@@ -80,7 +92,11 @@
   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;
 }
@@ -139,8 +155,14 @@
 .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 {
@@ -171,9 +193,11 @@
 .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 {
@@ -201,6 +225,7 @@
   position: absolute;
   width: 10px;
   height: 10px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #999999;
   background: #fff;
@@ -230,6 +255,7 @@
   position: absolute;
   left: -16px;
   top: 0;
+  -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
 }
 .main .development .content .item.with-time-left .node {
@@ -243,6 +269,7 @@
 }
 .main .development .content .item.with-time-right .node {
   position: relative;
+  -webkit-transform: translate(-100%);
   transform: translate(-100%);
   text-align: right;
   padding-right: 44px;
@@ -254,6 +281,7 @@
   white-space: nowrap;
   padding: 20px 24px;
   height: 100%;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .development .content .item .time span {
@@ -263,6 +291,7 @@
 .main .development .content .item .node {
   width: 526px;
   margin: 0;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 20px 24px;
 }

css/about.scss

@@ -16,15 +16,27 @@
     }
 
     .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 {
+        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;
@@ -87,7 +99,11 @@
         }
       }
       .tags {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
         font-size: 0;
 
@@ -152,8 +168,14 @@
         &: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 {
@@ -196,11 +218,13 @@
         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);
           }
         }
@@ -234,6 +258,7 @@
           position: absolute;
           width: 10px;
           height: 10px;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           border: 1px solid #999999;
           background: #fff;
@@ -271,6 +296,7 @@
             position: absolute;
             left: -16px;
             top: 0;
+            -webkit-transform: translateX(-100%);
             transform: translateX(-100%);
           }
 
@@ -289,6 +315,7 @@
 
           .node {
             position: relative;
+            -webkit-transform: translate(-100%);
             transform: translate(-100%);
             text-align: right;
             padding-right: 44px;
@@ -302,6 +329,7 @@
           white-space: nowrap;
           padding: 20px 24px;
           height: 100%;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
 
           span {
@@ -312,6 +340,7 @@
         .node {
           width: 526px;
           margin: 0;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           padding: 20px 24px;
 

css/appliance.css

@@ -10,11 +10,13 @@
 
 .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;
 }
@@ -39,10 +41,13 @@
   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 {
@@ -64,6 +69,7 @@
   background: url(/img/appliance-lbg.png);
   background-size: cover;
   float: right;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 48px 38px;
 }
@@ -77,6 +83,7 @@
 }
 .main .appliance-content .appliance-li .appliance-lir .appliance-lir-text {
   width: 100%;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding-left: 10px;
 }

css/appliance.scss

@@ -1,87 +1,94 @@
 .banner {
-	width: 100%;
-	height: 530px;
-	img {
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
+  width: 100%;
+  height: 530px;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
 }
 .main {
-	height: auto;
-	box-sizing: border-box;
-	.appliance-title {
-		width: 100%;
-		height: 244px;
-		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;
-		}
-	}
-	.appliance-content {
-		width: 100%;
-		height: auto;
-		.appliance-li {
-			width: 100%;
-			height: 380px;
-			margin-bottom: 80px;
-			transition: all 0.5s;
-			&:hover {
-				transform: translateY(-10px);
-				box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
-			}
-			&:last-child {
-				margin-bottom: 0;
-			}
-			.appliance-lil {
-				width: 570px;
-				height: 100%;
-				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;
-				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%;
-					box-sizing: border-box;
-					padding-left: 10px;
-					p {
-						font-size: 16px;
-						color: #505050;
-						text-align: justify;
-						line-height: 35px;
-					}
-				}
-			}
-		}
-	}
+  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;
+    }
+  }
+  .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%;
+        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;
+          }
+        }
+      }
+    }
+  }
 }

css/base.css

@@ -55,8 +55,14 @@ a {
 }
 
 .flex {
+  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;
 }
 
@@ -101,10 +107,12 @@ a {
   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;
@@ -149,6 +157,7 @@ a {
   background: #0688d2;
   left: 50%;
   bottom: 0;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .header .nav > li.active > a {
@@ -164,6 +173,7 @@ a {
   min-width: 128px;
   left: 50%;
   top: 68px;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 .header .nav .menu > li:hover {
@@ -196,7 +206,9 @@ a {
   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;
 }
@@ -247,6 +259,7 @@ a {
   position: absolute;
   left: 0;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   background-repeat: no-repeat;
   background-position: center;
@@ -304,8 +317,14 @@ a {
   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 {
@@ -336,6 +355,16 @@ a {
   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);
@@ -346,6 +375,16 @@ a {
     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);

css/base.scss

@@ -55,9 +55,15 @@ a {
 }
 
 .flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .fl {
@@ -99,12 +105,14 @@ a {
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
   }
 }
 
 // 导航菜单
 .header {
+  position: -webkit-sticky;
   position: sticky;
   width: 100%;
   left: 0;
@@ -159,7 +167,8 @@ a {
         background: #0688d2;
         left: 50%;
         bottom: 0;
-        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+                transform: translateX(-50%);
       }
 
       &.active {
@@ -181,7 +190,8 @@ a {
       min-width: 128px;
       left: 50%;
       top: 68px;
-      transform: translateX(-50%);
+      -webkit-transform: translateX(-50%);
+              transform: translateX(-50%);
       & > li {
         &:hover {
           background: #0688d2;
@@ -219,8 +229,10 @@ a {
         min-height: 200px;
         border-left: 1px solid #f8f8f8;
         border-left-color: #e8e8e8;
-        transform: translateX(100%) translateX(-1px);
-        box-sizing: border-box;
+        -webkit-transform: translateX(100%) translateX(-1px);
+                transform: translateX(100%) translateX(-1px);
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
         padding: 16px 24px;
         & > li {
           float: left;
@@ -278,7 +290,8 @@ a {
           position: absolute;
           left: 0;
           top: 50%;
-          transform: translateY(-50%);
+          -webkit-transform: translateY(-50%);
+                  transform: translateY(-50%);
           background-repeat: no-repeat;
           background-position: center;
           background-size: 20px;
@@ -354,9 +367,15 @@ a {
   }
 
   .link {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    -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;
@@ -388,6 +407,17 @@ a {
   }
 }
 
+@-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);
@@ -398,6 +428,16 @@ a {
     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);

css/brand-ross.css

@@ -1,6 +1,7 @@
 .advertising {
   width: 100%;
   height: 1055px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #f2f2f2;
   overflow: hidden;
@@ -23,6 +24,7 @@
   z-index: 2;
   bottom: 155px;
   left: 50%;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   cursor: pointer;
 }
@@ -55,6 +57,7 @@
   position: absolute;
   left: 0;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 48px;
   height: 72px;
@@ -117,6 +120,7 @@
   height: 100%;
   position: relative;
   overflow: hidden;
+  -webkit-transition: width 0.4s;
   transition: width 0.4s;
 }
 .main .therapy .content .item.hover {
@@ -133,17 +137,21 @@
 }
 .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;
@@ -167,12 +175,14 @@
   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;
@@ -190,9 +200,18 @@
   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 {
@@ -232,6 +251,7 @@
   display: block;
   width: 100%;
   height: 100%;
+  -webkit-transition: all 0.4s;
   transition: all 0.4s;
 }
 .main .application .content .item:nth-child(-n+3) {
@@ -252,14 +272,25 @@
   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;
@@ -277,8 +308,14 @@
   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;
@@ -292,6 +329,7 @@
   opacity: 1;
 }
 .main .application .content .item:hover img {
+  -webkit-transform: scale(1.06);
   transform: scale(1.06);
 }
 .main .distribution .content img {
@@ -299,7 +337,11 @@
   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;
 }
@@ -307,12 +349,22 @@
   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 {
@@ -345,12 +397,14 @@
   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;
@@ -366,6 +420,7 @@
   line-height: 48px;
   margin-top: 26px;
   cursor: pointer;
+  -webkit-transition: all 0.4s;
   transition: all 0.4s;
 }
 .main .contact .content .form-container .submit:hover {

css/brand-ross.scss

@@ -1,6 +1,7 @@
 .advertising {
   width: 100%;
   height: 1055px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #f2f2f2;
   overflow: hidden;
@@ -23,6 +24,7 @@
       z-index: 2;
       bottom: 155px;
       left: 50%;
+      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
       cursor: pointer;
     }
@@ -61,6 +63,7 @@
           position: absolute;
           left: 0;
           top: 50%;
+          -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
           width: 48px;
           height: 72px;
@@ -132,6 +135,7 @@
         height: 100%;
         position: relative;
         overflow: hidden;
+        -webkit-transition: width 0.4s;
         transition: width 0.4s;
 
         &.hover {
@@ -152,6 +156,7 @@
 
         .cover,
         .active {
+          -webkit-transition: opacity 0.4s;
           transition: opacity 0.4s;
         }
 
@@ -159,11 +164,14 @@
           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;
@@ -189,6 +197,7 @@
             height: 128px;
             bottom: 44px;
             left: 50%;
+            -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
           }
         }
@@ -197,6 +206,7 @@
           position: absolute;
           left: 50%;
           top: 0;
+          -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
           opacity: 0;
           width: 480px;
@@ -215,9 +225,18 @@
             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;
@@ -264,6 +283,7 @@
           display: block;
           width: 100%;
           height: 100%;
+          -webkit-transition: all 0.4s;
           transition: all 0.4s;
         }
 
@@ -290,16 +310,29 @@
           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;
 
           .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;
@@ -317,8 +350,14 @@
               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;
@@ -337,6 +376,7 @@
           }
 
           img {
+            -webkit-transform: scale(1.06);
             transform: scale(1.06);
           }
         }
@@ -352,7 +392,11 @@
       }
 
       .section {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
         justify-content: space-between;
         margin-top: 80px;
 
@@ -360,12 +404,22 @@
           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 {
@@ -410,11 +464,13 @@
       }
 
       .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;
@@ -431,6 +487,7 @@
           line-height: 48px;
           margin-top: 26px;
           cursor: pointer;
+          -webkit-transition: all 0.4s;
           transition: all 0.4s;
 
           &:hover {

css/brand.css

@@ -16,14 +16,25 @@
   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;
 }
@@ -39,6 +50,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
+  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
 .main .brand .content .name {
@@ -56,6 +68,7 @@
   text-align: center;
   line-height: 48px;
   cursor: pointer;
+  -webkit-transition: all 0.4s;
   transition: all 0.4s;
 }
 .main .brand .content .link:hover {

css/brand.scss

@@ -20,14 +20,25 @@
       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 {
@@ -42,6 +53,7 @@
           position: absolute;
           left: 50%;
           top: 50%;
+          -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
         }
       }
@@ -62,6 +74,7 @@
         text-align: center;
         line-height: 48px;
         cursor: pointer;
+        -webkit-transition: all 0.4s;
         transition: all 0.4s;
 
         &:hover {

css/case.css

@@ -5,6 +5,7 @@
 }
 
 .main .case {
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .case:nth-child(1) {
@@ -45,6 +46,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
+  -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
 .main .case .cover img {

css/case.scss

@@ -5,6 +5,7 @@
 }
 .main {
   .case {
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
 
     &:nth-child(1) {
@@ -46,6 +47,7 @@
         position: absolute;
         left: 50%;
         top: 50%;
+        -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
       }
     }

css/contact-form.css

@@ -1,5 +1,9 @@
 .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;
 }
@@ -16,6 +20,8 @@
   margin-right: 4px;
 }
 .form .form-item .form-control {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
   flex: 1;
   color: #505050;
   font-size: 16px;
@@ -25,6 +31,7 @@
   width: 100%;
   line-height: 40px;
   border: 1px solid #dedede;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0 16px;
   border-radius: 4px;
@@ -34,17 +41,24 @@
   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;
@@ -62,6 +76,8 @@
   padding: 0 16px;
   padding-right: 40px;
   color: #272727;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   appearance: none;
   border-radius: 2px;
 }
@@ -95,6 +111,7 @@
   height: 120px;
   border: 1px solid #dedede;
   margin-top: 10px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding-top: 80px;
   text-align: center;
@@ -114,9 +131,11 @@
   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] {
@@ -130,6 +149,7 @@
   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 {
@@ -143,10 +163,12 @@
   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] {

css/contact-form.scss

@@ -1,6 +1,10 @@
 .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;
 
@@ -17,6 +21,8 @@
       }
     }
     .form-control {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
       flex: 1;
       color: #505050;
       font-size: 16px;
@@ -27,6 +33,7 @@
           width: 100%;
           line-height: 40px;
           border: 1px solid #dedede;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           padding: 0 16px;
           border-radius: 4px;
@@ -39,6 +46,7 @@
           width: 100%;
           line-height: 26px;
           border: 1px solid #dedede;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           padding: 8px 16px;
           border-radius: 2px;
@@ -47,10 +55,16 @@
       }
 
       &.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;
@@ -67,6 +81,8 @@
             padding: 0 16px;
             padding-right: 40px;
             color: #272727;
+            -webkit-appearance: none;
+            -moz-appearance: none;
             appearance: none;
             border-radius: 2px;
           }
@@ -107,6 +123,7 @@
           height: 120px;
           border: 1px solid #dedede;
           margin-top: 10px;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           padding-top: 80px;
           text-align: center;
@@ -128,10 +145,12 @@
           }
 
           &::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);
           }
         }
@@ -149,6 +168,7 @@
           text-align: center;
           margin-left: 16px;
           cursor: pointer;
+          -webkit-transition: all 0.4s;
           transition: all 0.4s;
 
           &:hover {
@@ -166,10 +186,12 @@
       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;
     }
 

css/contact.css

@@ -7,11 +7,18 @@ body {
   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;
 }
@@ -30,6 +37,7 @@ body {
   position: absolute;
   left: 0;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 .main .container .head ul > li {
@@ -110,12 +118,14 @@ body {
   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;
 }
@@ -129,6 +139,7 @@ body {
   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;
 }
@@ -154,6 +165,18 @@ body {
   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;
 }
@@ -182,8 +205,10 @@ body {
   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;

css/contact.scss

@@ -7,11 +7,18 @@ body {
     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;
 
@@ -30,6 +37,7 @@ body {
           position: absolute;
           left: 0;
           top: 50%;
+          -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
         }
       }
@@ -124,12 +132,14 @@ body {
           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;
 
@@ -143,6 +153,7 @@ body {
             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;
           }
@@ -184,6 +195,22 @@ body {
               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;
             }
@@ -224,8 +251,10 @@ body {
             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;

css/cooperative.css

@@ -10,6 +10,7 @@
 
 .main {
   height: auto;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .cooperative-tab {
@@ -22,6 +23,7 @@
   width: 300px;
   float: left;
   height: 100%;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 25px 0;
   position: relative;
@@ -43,6 +45,7 @@
   width: 300px;
   float: left;
   height: 100%;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 25px 0;
   position: relative;
@@ -89,6 +92,7 @@
 .main .cooperative-main {
   width: 100%;
   min-width: 1000px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 60px 0;
 }
@@ -135,12 +139,14 @@
   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 {
@@ -158,31 +164,38 @@
   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);
@@ -216,6 +229,7 @@
 .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;
 }
@@ -232,6 +246,7 @@
   width: 100px;
   height: 28px;
   text-align: center;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #e8e8e8;
   color: #999999;
@@ -243,16 +258,20 @@
 .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) {

css/cooperative.scss

@@ -1,293 +1,312 @@
 .banner {
-	width: 100%;
-	height: 530px;
-	img {
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
+  width: 100%;
+  height: 530px;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
 }
 .main {
-	height: auto;
-	box-sizing: border-box;
-	.cooperative-tab {
-		width: 100%;
-		height: 100px;
-		background-color: #f7f7f7;
-		.tab-item-last {
-			display: block;
-			width: 300px;
-			float: left;
-			height: 100%;
-			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%;
-			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;
-		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: 592px;
-					float: left;
-					.item {
-						width: 286px;
-						height: 286px;
-						overflow: hidden;
-						&:hover {
-							img {
-								transform: scale(1.2);
-							}
-						}
-						img {
-							width: 286px;
-							height: 286px;
-							display: block;
-							transition: all 0.4s;
-						}
-						&.first {
-							margin-bottom: 18px;
-						}
-					}
-				}
-				.main-content-mids {
-					width: 592px;
-					height: 592px;
-					float: left;
-					margin: 0 18px;
-					.item {
-						width: 592px;
-						height: 592px;
-						overflow: hidden;
-						&:hover {
-							img {
-								transform: scale(1.2);
-							}
-						}
-						img {
-							width: 592px;
-							height: 592px;
-							display: block;
-							transition: all 0.4s;
-						}
-					}
-				}
-				.main-content-serve {
-					width: 400px;
-					height: auto;
-					padding: 30px 32px;
-					box-sizing: border-box;
-					transition: all 0.4s;
-					cursor: pointer;
-					float: left;
-					&:hover {
-						background-color: #fff;
-						transform: translateY(-10px);
-						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
-					}
-					.server-title {
-						width: 336px;
-						height: 216px;
-						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;
-						}
-					}
-					.server-text {
-						width: 100%;
-						height: auto;
-						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;
-							box-sizing: border-box;
-							border: 1px solid #e8e8e8;
-							color: #999999;
-							font-size: 12px;
-							line-height: 28px;
-							float: left;
-							margin-top: 20px;
-						}
-					}
-				}
-				.main-content-mode {
-					width: 580px;
-					height: 180px;
-					box-sizing: border-box;
-					padding: 24px 12px;
-					border: 1px solid #e8e8e8;
-					margin-right: 40px;
-					margin-bottom: 40px;
-					transition: all 0.5s;
-					float: left;
-					&:hover {
-						transform: translateY(-10px);
-						box-shadow: 0px 6px 30px rgba(39, 39, 39, 0.1);
-					}
-					&:nth-child(2n) {
-						margin-right: 0;
-					}
-					.mode-label {
-						width: 56px;
-						height: 100%;
-						float: left;
-						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;
-						}
-					}
-				}
-			}
-		}
-	}
+  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: 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;
+    -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: 592px;
+          float: left;
+          .item {
+            width: 286px;
+            height: 286px;
+            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 {
+            width: 592px;
+            height: 592px;
+            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;
+            -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;
+            }
+          }
+          .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;
+            }
+          }
+        }
+        .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;
+          &: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;
+          }
+          .mode-label {
+            width: 56px;
+            height: 100%;
+            float: left;
+            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;
+            }
+          }
+        }
+      }
+    }
+  }
 }

css/index.css

@@ -14,6 +14,7 @@
   position: absolute;
   left: 50%;
   bottom: 0;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   font-size: 34px;
   font-weight: normal;
@@ -61,11 +62,21 @@
   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 {
@@ -88,7 +99,11 @@
   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 {
@@ -96,7 +111,9 @@
   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 {
@@ -108,6 +125,7 @@
   position: absolute;
   top: 0;
   left: 50%;
+  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   display: block;
   width: 640px;
@@ -131,8 +149,10 @@
   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 {
@@ -158,6 +178,7 @@
 .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;
@@ -171,11 +192,13 @@
   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 {
@@ -209,6 +232,7 @@
 .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;
@@ -224,6 +248,7 @@
   width: 390px;
   margin-right: 15px;
   margin-bottom: 15px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -231,6 +256,7 @@
   width: 100%;
   height: 100%;
   opacity: 1;
+  -webkit-transition: all 0.4s;
   transition: all 0.4s;
 }
 .main .container.company-values .content .item.no-mb {
@@ -243,6 +269,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 {
@@ -269,9 +296,18 @@
   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);
 }
@@ -280,6 +316,7 @@
   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 {
@@ -313,21 +350,30 @@
   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;
@@ -342,5 +388,6 @@
   position: absolute;
   left: 0;
   top: 50%;
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
 }

css/index.scss

@@ -20,6 +20,7 @@
     position: absolute;
     left: 50%;
     bottom: 0;
+    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     font-size: 34px;
     font-weight: normal;
@@ -78,11 +79,21 @@
             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 {
@@ -111,7 +122,11 @@
 
     &.brand-activity {
       .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
         justify-content: center;
 
         .item {
@@ -120,7 +135,9 @@
           width: 280px;
           height: 600px;
           overflow: hidden;
+          -ms-flex-negative: 0;
           flex-shrink: 0;
+          -webkit-transition: all 0.4s;
           transition: all 0.4s;
 
           a {
@@ -133,6 +150,7 @@
             position: absolute;
             top: 0;
             left: 50%;
+            -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
             display: block;
             width: 640px;
@@ -173,8 +191,10 @@
             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;
@@ -196,6 +216,7 @@
             &::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;
@@ -211,11 +232,13 @@
             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;
@@ -241,6 +264,7 @@
             &::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;
@@ -263,6 +287,7 @@
           width: 390px;
           margin-right: 15px;
           margin-bottom: 15px;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           overflow: hidden;
 
@@ -270,6 +295,7 @@
             width: 100%;
             height: 100%;
             opacity: 1;
+            -webkit-transition: all 0.4s;
             transition: all 0.4s;
           }
 
@@ -288,6 +314,7 @@
 
           &:hover {
             img {
+              -webkit-transform: scale(1.2);
               transform: scale(1.2);
             }
           }
@@ -324,9 +351,18 @@
             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);
 
@@ -335,6 +371,7 @@
               position: absolute;
               left: 50%;
               top: 50%;
+              -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
               transform: translate(-50%, -50%) rotateZ(-45deg);
 
               &::after,
@@ -381,23 +418,32 @@
         width: 100%;
         overflow: hidden;
         .row {
+          display: -webkit-box;
+          display: -ms-flexbox;
           display: flex;
 
           &:last-child {
+            -webkit-box-orient: horizontal;
+            -webkit-box-direction: reverse;
+            -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
+            -webkit-animation: 20s rowup-right linear infinite normal;
             animation: 20s rowup-right linear infinite normal;
             margin-top: 10px;
           }
 
           &:first-child {
+            -webkit-animation: 20s rowup-left linear infinite normal;
             animation: 20s rowup-left linear infinite normal;
           }
         }
         .item {
+          -ms-flex-negative: 0;
           flex-shrink: 0;
           position: relative;
           width: 232px;
           height: 100px;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           border: 1px solid #d8d8d8;
           overflow: hidden;
@@ -413,6 +459,7 @@
             position: absolute;
             left: 0;
             top: 50%;
+            -webkit-transform: translateY(-50%);
             transform: translateY(-50%);
           }
         }

css/news.css

@@ -5,6 +5,7 @@
 }
 .main .container.news-list .new {
   display: block;
+  -webkit-transition: all 0.4s;
   transition: all 0.4s;
   margin-bottom: 40px;
 }
@@ -18,6 +19,7 @@
   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 {
@@ -26,11 +28,13 @@
 .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 {
@@ -49,8 +53,14 @@
   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;
 }
@@ -86,6 +96,7 @@
   font-size: 12px;
   color: #505050;
   min-width: 32px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   text-align: center;
 }

css/news.scss

@@ -9,6 +9,7 @@
 
       .new {
         display: block;
+        -webkit-transition: all 0.4s;
         transition: all 0.4s;
         margin-bottom: 40px;
         .cover {
@@ -22,6 +23,7 @@
         }
 
         &: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;
@@ -30,10 +32,12 @@
         .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 {
@@ -56,8 +60,14 @@
     }
 
     .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;
 
@@ -78,7 +88,7 @@
             color: #505050 !important;
             min-width: unset !important;
             padding: 0 !important;
-          } 
+          }
         }
 
         &:hover {
@@ -96,6 +106,7 @@
           font-size: 12px;
           color: #505050;
           min-width: 32px;
+          -webkit-box-sizing: border-box;
           box-sizing: border-box;
           text-align: center;
         }

css/product-diactivplvs.css

@@ -30,6 +30,8 @@
 }
 .main .about .content .tags {
   margin-top: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 .main .about .content .tags .tag {
@@ -53,12 +55,14 @@
   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;

css/product-diactivplvs.scss

@@ -30,6 +30,8 @@
       }
       .tags {
         margin-top: 36px;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
         .tag {
           padding: 8px 14px;
@@ -55,12 +57,14 @@
       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;

css/product-intradermik.css

@@ -33,6 +33,8 @@
 }
 .main .about .content .tags {
   margin-top: 36px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
 }
 .main .about .content .tags .tag {
@@ -53,6 +55,7 @@
 .main .service .cover {
   width: 640px;
   height: 480px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .service.one .content {
@@ -70,6 +73,7 @@
 .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;

css/product-intradermik.scss

@@ -31,6 +31,8 @@
       }
       .tags {
         margin-top: 36px;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
         .tag {
           padding: 8px 14px;
@@ -54,6 +56,7 @@
     .cover {
       width: 640px;
       height: 480px;
+      -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
 
@@ -81,6 +84,7 @@
     .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;

css/product-kestos.css

@@ -2,7 +2,11 @@
   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 {
@@ -49,6 +53,7 @@
   background-size: auto 600px;
   padding-top: 128px;
   text-align: center;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin-top: 140px;
 }

css/product-kestos.scss

@@ -2,7 +2,11 @@
   .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;
     }
 
@@ -59,6 +63,7 @@
     background-size: auto 600px;
     padding-top: 128px;
     text-align: center;
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin-top: 140px;
     .title {

css/product-mesobiolift.css

@@ -13,6 +13,7 @@
   background: pink;
 }
 .main .about .content {
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .about .content .title {
@@ -67,6 +68,7 @@
 }
 .main .service .content {
   width: 560px;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding-top: 113px;
   background-repeat: no-repeat;

css/product-mesobiolift.scss

@@ -15,6 +15,7 @@
     }
 
     .content {
+      -webkit-box-sizing: border-box;
       box-sizing: border-box;
 
       .title {
@@ -84,6 +85,7 @@
 
     .content {
       width: 560px;
+      -webkit-box-sizing: border-box;
       box-sizing: border-box;
       padding-top: 113px;
 

css/product-rollaction.css

@@ -50,10 +50,20 @@
   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 {
@@ -115,6 +125,7 @@
   width: 560px;
   text-align: justify;
   background-repeat: no-repeat;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .main .service .content .title {

css/product-rollaction.scss

@@ -63,10 +63,20 @@
         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;
@@ -141,6 +151,7 @@
       width: 560px;
       text-align: justify;
       background-repeat: no-repeat;
+      -webkit-box-sizing: border-box;
       box-sizing: border-box;
       .title {
         font-size: 24px;