Merge branch 'master' of http://119.23.72.7/liangjianmin/pcb

# Conflicts:
#	css/login/login.css.map

css/common/base.css

@@ -134,6 +134,13 @@ img {
   font-size: 0 !important;
   *word-spacing: -1px !important;
 }
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
 label,
 dd,
 dd,
@@ -152,7 +159,242 @@ html,
 body {
   width: 100%;
 }
-body {
+.common-header {
+  height: 90px;
+}
+.common-header.common-header-b {
+  background: #0081D2;
+}
+.common-header.common-header-b .title-logo {
+  background: url('../../images/home/title-logo-w.png') 100% 100% no-repeat;
+}
+.common-header.common-header-b .header-nav a {
+  color: #fff;
+}
+.common-header.common-header-b .header-nav a.active {
+  border-bottom: 3px solid #E89721;
+  font-weight: 600;
+}
+.common-header.common-header-b .car {
+  background: url('../../images/home/car-icon-w.png') 100% 100% no-repeat;
+}
+.common-header.common-header-w {
+  background: #fff;
+}
+.common-header.common-header-w .title-logo {
+  background: url('../../images/home/title-logo-b.png') 100% 100% no-repeat;
+}
+.common-header.common-header-w .header-nav a {
+  color: #575E66;
+}
+.common-header.common-header-w .header-nav a.active {
+  border-bottom: 3px solid #E89721;
+  font-weight: 600;
+  color: #0081D2;
+}
+.common-header.common-header-w .car {
+  background: url('../../images/home/car-icon-b.png') 100% 100% no-repeat;
+}
+.common-header .title-logo {
+  width: 129px;
+  height: 39px;
+  margin: 29px 38px 0 0;
+}
+.common-header .header-nav {
+  margin-top: 20px;
+}
+.common-header .header-nav a {
+  font-size: 15px;
+  padding: 14px 0;
+  margin-left: 43px;
+  cursor: pointer;
+}
+.common-header .fr {
+  position: relative;
+}
+.common-header .drop-down-menu {
+  position: absolute;
+  background: #fff;
+  width: 180px;
+  z-index: 99;
+  padding: 20px;
+  right: 0;
+}
+.common-header .drop-down-menu .arrow-top {
+  position: absolute;
+  height: 9px;
+  width: 16px;
+  background: url('../../images/home/arrow-top-icon.png') 100% 100% no-repeat;
+  z-index: 100;
+  top: -8px;
+  right: 40px;
+}
+.common-header .drop-down-menu .menu-title {
+  color: #2B2F33;
+  font-size: 13px;
+}
+.common-header .drop-down-menu .menu-btn {
+  display: block;
+  height: 32px;
+  color: #fff;
+  font-size: 13px ;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.common-header .drop-down-menu .menu-btn.sign-in-btn {
+  background: #0081D2;
+  margin-top: 20px;
+}
+.common-header .drop-down-menu .menu-btn.join-free-btn {
+  background: #E89721;
+  margin-top: 10px;
+}
+.common-header .drop-down-menu ul {
+  padding-top: 12px;
+}
+.common-header .drop-down-menu ul li {
+  padding-top: 8px;
+}
+.common-header .drop-down-menu ul li a {
+  display: block;
+  color: #575E66;
+  font-size: 13px;
+  cursor: pointer;
+}
+.common-header .drop-down-menu ul li a.active {
+  color: #2B2F33;
+  font-weight: 600;
+}
+.common-header .drop-down-menu ul li a:hover {
+  color: #0081D2;
+}
+.common-header .car {
+  height: 24px;
+  width: 24px;
+  position: relative;
+  margin-top: 30px;
+  cursor: pointer;
+}
+.common-header .car .car-msg {
+  color: #fff;
+  background-color: #FF0D0D;
+  font-size: 12px;
+  position: absolute;
+  border-radius: 50% 50%;
+  height: 20px;
+  width: 20px;
+  right: 0;
+  top: 0;
+  line-height: 20px;
+  text-align: center;
+  padding: 0 2px;
+  transform: translate(50%, -50%);
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
+}
+.common-header .account-btn {
+  width: 120px;
+  height: 32px;
+  background-color: #E89721;
+  border-radius: 19px;
+  padding: 0 16px;
+  position: relative;
+  top: -10px;
+  margin-left: 39px;
+  cursor: pointer;
+}
+.common-header .account-btn:hover {
+  background-color: #FFB03D;
+}
+.common-header .account-btn .user-icon {
+  width: 18px;
+  height: 18px;
+  background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
+  position: relative;
+  top: 7px;
+}
+.common-header .account-btn .account-text {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+  position: relative;
+  top: 4px;
+}
+.common-header .account-btn .arrow-down-icon {
+  height: 5px;
+  width: 7px;
+  background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
+  position: relative;
+  top: 2px;
+}
+.common-footer {
+  height: 342px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.common-footer .footer-top {
+  height: 244px;
+}
+.common-footer .footer-top .footer-top-data.footer-top-data-other {
+  margin-left: 59px;
+}
+.common-footer .footer-top .footer-top-data h3 {
+  color: #2B2F33;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 60px 0 7px;
+}
+.common-footer .footer-top .footer-top-data p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 13px;
+  cursor: pointer;
+}
+.common-footer .footer-top .footer-top-right {
+  color: #E89721;
+  font-size: 16px;
+  padding-top: 60px;
+  text-align: right;
+}
+.common-footer .footer-top .footer-top-right span {
+  height: 30px;
+  width: 30px;
+  background-color: #E89721;
+  border-radius: 50%;
+  text-align: center;
+}
+.common-footer .footer-top .footer-top-right span i {
+  height: 20px;
+  width: 20px;
+  background: url('../../images/home/email-icon.png') 100% 100% no-repeat;
+  margin-top: 5px;
+}
+.common-footer .footer-top .footer-top-right p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 80px;
+}
+.common-footer .footer-bottom {
+  height: 98px;
+  background-color: #2B2F33;
+  font-size: 13px;
+  color: #828E99;
+}
+.common-footer .footer-bottom .fl {
+  margin-top: 29px;
+}
+.common-footer .footer-bottom .fl img {
+  height: 38px;
+  width: 190px;
+}
+.common-footer .footer-bottom .fr {
+  margin-top: 37px;
+}
+.common-footer .footer-bottom .fr img {
+  height: 25px;
+  width: 418px;
 }
-/*# sourceMappingURL=base.css.map */
\ No newline at end of file

css/common/base.less

@@ -106,6 +106,14 @@ img {
   *word-spacing: -1px !important;
 }
 
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
+
 label, dd, dd, dt {
   font-weight: normal;
 }
@@ -124,5 +132,266 @@ html, body {
 }
 
 body {
+  // overflow: hidden;
+}
+.common-header{
+  height: 90px;
+  &.common-header-b{
+    background: #0081D2;
+    .title-logo{
+      background: url('../../images/home/title-logo-w.png') 100% 100% no-repeat;
+    }
+    .header-nav{
+      a{
+        color: #fff;
+        &.active {
+          border-bottom: 3px solid #E89721;
+          font-weight: 600;
+        }
+      }
+    }
+    .car {
+      background: url('../../images/home/car-icon-w.png') 100% 100% no-repeat;
+    }
+  }
+  &.common-header-w{
+    background: #fff;
+    .title-logo{
+      background: url('../../images/home/title-logo-b.png') 100% 100% no-repeat;
+    }
+    .header-nav{
+      a{
+        color: #575E66;
+        &.active {
+          border-bottom: 3px solid #E89721;
+          font-weight: 600;
+          color:#0081D2;
+        }
+      }
+    }
+    .car {
+      background: url('../../images/home/car-icon-b.png') 100% 100% no-repeat;
+    }
+  }
+
+  .title-logo {
+    width: 129px;
+    height: 39px;
+    margin: 29px 38px 0 0;
+  }
+
+  .header-nav {
+    margin-top: 20px;
+
+    a {
+      font-size: 15px;
+      padding: 14px 0;
+      margin-left: 43px;
+      cursor: pointer;
+    }
+  }
+  .fr{
+    position: relative;
+  }
+  .drop-down-menu{
+    position: absolute;
+    background: #fff;
+    width: 180px;
+    z-index: 99;
+    padding:20px;
+    right:0;
+    .arrow-top{
+      position: absolute;
+      height:9px;
+      width:16px;
+      background: url('../../images/home/arrow-top-icon.png') 100% 100% no-repeat;
+      z-index:100;
+      top:-8px;
+      right:40px;
+    }
+    .menu-title{
+      color:#2B2F33;
+      font-size: 13px;
+    }
+    .menu-btn{
+      display: block;
+      height:32px;
+      color:#fff;
+      font-size:13px ;
+      text-align: center;
+      line-height: 32px;
+      cursor: pointer;
+      &.sign-in-btn {
+        background: #0081D2;
+        margin-top:20px;
+      }
+      &.join-free-btn{
+        background: #E89721;
+        margin-top:10px;
+      }
+    }
+    ul{
+      padding-top:12px;
+     li{
+       padding-top:8px;
+       a{
+         display: block;
+         color:#575E66;
+         font-size: 13px;
+         cursor: pointer;
+         &.active{
+          color:#2B2F33 ;
+          font-weight: 600;
+         }
+         &:hover{
+          color:#0081D2;
+         }
+       }
+     }
+    }
+  }
+  .car {
+    height: 24px;
+    width: 24px;
+    position: relative;
+    margin-top: 30px;
+    cursor: pointer;
+
+    .car-msg {
+      color: #fff;
+      background-color: #FF0D0D;
+      font-size: 12px;
+      position: absolute;
+      border-radius: 50% 50%;
+      height: 20px;
+      width: 20px;
+      right: 0;
+      top: 0;
+      line-height: 20px;
+      text-align: center;
+      padding: 0 2px;
+      transform: translate(50%, -50%);
+      white-space: nowrap;
       overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .account-btn {
+    width: 120px;
+    height: 32px;
+    background-color: #E89721;
+    border-radius: 19px;
+    padding: 0 16px;
+    position: relative;
+    top: -10px;
+    margin-left: 39px;
+    cursor: pointer;
+    &:hover{
+      background-color: #FFB03D;
+    }
+
+    .user-icon {
+      width: 18px;
+      height: 18px;
+      background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
+      position: relative;
+      top: 7px;
+    }
+
+    .account-text {
+      color: #fff;
+      font-size: 14px;
+      margin: 0 3px;
+      position: relative;
+      top: 4px;
+    }
+
+    .arrow-down-icon {
+      height: 5px;
+      width: 7px;
+      background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
+      position: relative;
+      top: 2px;
+
+    }
+  }
+}
+.common-footer {
+  height: 342px;
+  position: absolute;
+  bottom: 0;
+  left:0;
+  right:0;
+  .footer-top {
+    height: 244px;
+
+    .footer-top-data {
+      &.footer-top-data-other {
+        margin-left: 59px;
+      }
+
+      h3 {
+        color: #2B2F33;
+        font-size: 16px;
+        font-weight: 600;
+        padding: 60px 0 7px;
+      }
+
+      p {
+        color: #828E99;
+        font-size: 13px;
+        padding-top: 13px;
+        cursor: pointer;
+      }
+
+    }
+
+    .footer-top-right {
+      color: #E89721;
+      font-size: 16px;
+      padding-top:60px;
+      text-align: right;
+
+      span {
+        height: 30px;
+        width: 30px;
+        background-color: #E89721;
+        border-radius: 50%;
+        text-align: center;
+        i{
+          height:20px;
+          width:20px;
+          background: url('../../images/home/email-icon.png') 100% 100% no-repeat;
+          margin-top:5px;
+        }
+      }
+      p{
+        color:#828E99;
+        font-size: 13px;
+        padding-top:80px;
+      }
+    }
+  }
+
+  .footer-bottom {
+    height: 98px;
+    background-color: #2B2F33;
+    font-size: 13px;
+    color:#828E99;
+    .fl{
+      margin-top:29px;
+      img{
+        height:38px;
+        width:190px;
+      }
+    }
+    .fr{
+      margin-top:37px;
+      img{
+        height:25px;
+        width:418px;
+      }
+    }
+  }
 }
\ No newline at end of file

css/faq/index.css

+@import '../common/font/iconfont.css';
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+html * {
+  outline: 0;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html,
+body {
+  font-family: sans-serif;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  border: none;
+}
+input[type=button],
+input[type=submit],
+input[type=file],
+button {
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+ol,
+ul,
+dl {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: 500;
+}
+a {
+  text-decoration: none;
+}
+img {
+  border: none;
+}
+.clr {
+  *zoom: 1;
+  clear: both;
+}
+.clr:after {
+  content: ".";
+  clear: both;
+  height: 0;
+  visibility: hidden;
+  display: block;
+}
+.fl {
+  float: left;
+  _display: inline;
+}
+.fr {
+  float: right;
+  _display: inline;
+}
+.va-t {
+  vertical-align: top;
+}
+.va-m {
+  vertical-align: middle;
+}
+.va-b {
+  vertical-align: bottom;
+}
+.i-hide {
+  display: none;
+}
+.i-show {
+  display: block;
+}
+.lineBlock {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+.lbBox {
+  font-size: 0 !important;
+  *word-spacing: -1px !important;
+}
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
+label,
+dd,
+dd,
+dt {
+  font-weight: normal;
+}
+.boxsiz {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+html,
+body {
+  width: 100%;
+}
+body {
+  overflow: hidden;
+}
+.w1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+.faq-head {
+  position: relative;
+  width: 100%;
+  background: #0081D2;
+  padding: 20px 0 73px 0;
+}
+.faq-head .wrap .t1 a {
+  font-size: 13px;
+  color: #ffffff;
+}
+.faq-head .wrap .t1 span {
+  padding: 0 7px;
+  font-size: 13px;
+  color: #ffffff;
+}
+.faq-head .wrap .t2 {
+  font-size: 38px;
+  color: #ffffff;
+  text-align: center;
+}
+.faq-head .wrap .search {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -33px;
+  width: 680px;
+  height: 66px;
+  background: #ffffff;
+  box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+  border-radius: 2px;
+  border: 1px solid #f0f4f7;
+  margin: 0 auto;
+}
+.faq-head .wrap .search input {
+  height: 68px;
+  line-height: 68px;
+  text-indent: 1em;
+}
+.faq-head .wrap .search .iconshousuo {
+  position: absolute;
+  right: 30px;
+  top: 50%;
+  margin-top: -16px;
+  color: #0081D2;
+  font-size: 30px;
+  cursor: pointer;
+}
+.faq-content .l {
+  width: 285px;
+  position: relative;
+  margin-top: 95px;
+  border-right: 1px solid #F0F4F7;
+}
+.faq-content .l .ico {
+  position: absolute;
+  right: 25px;
+  top: 0;
+  width: 14px;
+  height: 14px;
+  background: url("../../images/faq/arrows.png") no-repeat center;
+}
+.faq-content .l dl {
+  margin-bottom: 30px;
+}
+.faq-content .l dl dt {
+  position: relative;
+  color: #2b2f33;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+.faq-content .l dl dd {
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+.faq-content .l dl dd a {
+  font-size: 16px;
+  color: #2b2f33;
+}
+.faq-content .l dl dd.curr {
+  border-left: 3px solid #E89721;
+}
+.faq-content .l dl dd.curr a {
+  color: #0081d2;
+  padding-left: 7px;
+}
+.faq-content .r {
+  margin-top: 95px;
+  width: 858px;
+}
+.faq-content .r .tit {
+  font-size: 30px;
+  color: #2b2f33;
+  margin-bottom: 28px;
+}
+.faq-content .r .t {
+  font-size: 18px;
+  color: #0081d2;
+  line-height: 21px;
+  margin-bottom: 28px;
+  display: block;
+}
+.faq-content .r .t:hover {
+  color: #e89721;
+}
+.chat {
+  position: fixed;
+  right: 160px;
+  bottom: 83px;
+  width: 180px;
+  height: 50px;
+  background: #e89721;
+  box-shadow: 0px -8px 10px 0px rgba(232, 151, 33, 0.2);
+  border-radius: 8px 8px 0px 0px;
+  text-align: center;
+  display: block;
+}
+.chat i {
+  font-size: 28px;
+  color: #FFFFFF;
+}
+.chat span {
+  font-size: 16px;
+  color: #ffffff;
+}
+/*# sourceMappingURL=index.css.map */
\ No newline at end of file

css/faq/index.css.map

+{"version":3,"sources":["index.less","E:/pcb/css/common/base.less"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file

css/faq/index.less

+@import '../common/base.less';
+@import '../common/font/iconfont.css';
+
+.w1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+
+
+.faq-head {
+  position: relative;
+  width: 100%;
+  background: #0081D2;
+  padding: 20px 0 73px 0;
+
+  .wrap {
+    .t1 {
+      a {
+        font-size: 13px;
+        color: #ffffff;
+      }
+
+      span {
+        padding: 0 7px;
+        font-size: 13px;
+        color: #ffffff;
+      }
+    }
+
+    .t2 {
+      font-size: 38px;
+      color: #ffffff;
+      text-align: center;
+    }
+
+    .search {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -33px;
+      width: 680px;
+      height: 66px;
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+      border-radius: 2px;
+      border: 1px solid rgba(240, 244, 247, 1);
+      margin: 0 auto;
+
+      input {
+        height: 68px;
+        line-height: 68px;
+        text-indent: 1em;
+      }
+
+      .iconshousuo {
+        position: absolute;
+        right: 30px;
+        top: 50%;
+        margin-top: -16px;
+        color: #0081D2;
+        font-size: 30px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.faq-content {
+  .l {
+    width: 285px;
+    position: relative;
+    margin-top: 95px;
+    border-right: 1px solid #F0F4F7;
+
+    .ico {
+      position: absolute;
+      right: 25px;
+      top: 0;
+      width: 14px;
+      height: 14px;
+      background: url("../../images/faq/arrows.png") no-repeat center;
+    }
+
+    dl {
+      margin-bottom: 30px;
+
+      dt {
+        position: relative;
+        color: #2b2f33;
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 20px;
+        cursor: pointer;
+      }
+
+      dd {
+        line-height: 20px;
+        margin-bottom: 8px;
+
+        a {
+          font-size: 16px;
+          color: #2b2f33;
+        }
+
+        &.curr {
+          a {
+            color: #0081d2;
+            padding-left: 7px;
+          }
+
+          border-left: 3px solid #E89721;
+        }
+      }
+    }
+  }
+
+  .r {
+    margin-top: 95px;
+    width: 858px;
+
+    .tit {
+      font-size: 30px;
+      color: #2b2f33;
+      margin-bottom: 28px;
+    }
+
+    .t {
+      font-size: 18px;
+      color: #0081d2;
+      line-height: 21px;
+      margin-bottom: 28px;
+      display: block;
+
+      &:hover {
+        color: #e89721;
+      }
+    }
+  }
+}
+
+.chat{
+  position: fixed;
+  right: 160px;
+  bottom: 83px;
+  width:180px;
+  height:50px;
+  background:rgba(232,151,33,1);
+  box-shadow:0px -8px 10px 0px rgba(232,151,33,0.2);
+  border-radius:8px 8px 0px 0px;
+  text-align: center;
+  display: block;
+  i{
+    font-size: 28px;
+    color: #FFFFFF;
+  }
+  span{
+    font-size: 16px;
+    color: #ffffff;
+  }
+}
\ No newline at end of file

css/home/home.css

@@ -134,6 +134,13 @@ img {
   font-size: 0 !important;
   *word-spacing: -1px !important;
 }
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
 label,
 dd,
 dd,
@@ -152,10 +159,948 @@ html,
 body {
   width: 100%;
 }
-body {
+.common-header {
+  height: 90px;
+}
+.common-header.common-header-b {
+  background: #0081D2;
+}
+.common-header.common-header-b .title-logo {
+  background: url('../../images/home/title-logo-w.png') 100% 100% no-repeat;
+}
+.common-header.common-header-b .header-nav a {
+  color: #fff;
+}
+.common-header.common-header-b .header-nav a.active {
+  border-bottom: 3px solid #E89721;
+  font-weight: 600;
+}
+.common-header.common-header-b .car {
+  background: url('../../images/home/car-icon-w.png') 100% 100% no-repeat;
+}
+.common-header.common-header-w {
+  background: #fff;
+}
+.common-header.common-header-w .title-logo {
+  background: url('../../images/home/title-logo-b.png') 100% 100% no-repeat;
+}
+.common-header.common-header-w .header-nav a {
+  color: #575E66;
+}
+.common-header.common-header-w .header-nav a.active {
+  border-bottom: 3px solid #E89721;
+  font-weight: 600;
+  color: #0081D2;
+}
+.common-header.common-header-w .car {
+  background: url('../../images/home/car-icon-b.png') 100% 100% no-repeat;
+}
+.common-header .title-logo {
+  width: 129px;
+  height: 39px;
+  margin: 29px 38px 0 0;
+}
+.common-header .header-nav {
+  margin-top: 20px;
+}
+.common-header .header-nav a {
+  font-size: 15px;
+  padding: 14px 0;
+  margin-left: 43px;
+  cursor: pointer;
+}
+.common-header .fr {
+  position: relative;
+}
+.common-header .drop-down-menu {
+  position: absolute;
+  background: #fff;
+  width: 180px;
+  z-index: 99;
+  padding: 20px;
+  right: 0;
+}
+.common-header .drop-down-menu .arrow-top {
+  position: absolute;
+  height: 9px;
+  width: 16px;
+  background: url('../../images/home/arrow-top-icon.png') 100% 100% no-repeat;
+  z-index: 100;
+  top: -8px;
+  right: 40px;
+}
+.common-header .drop-down-menu .menu-title {
+  color: #2B2F33;
+  font-size: 13px;
+}
+.common-header .drop-down-menu .menu-btn {
+  display: block;
+  height: 32px;
+  color: #fff;
+  font-size: 13px ;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.common-header .drop-down-menu .menu-btn.sign-in-btn {
+  background: #0081D2;
+  margin-top: 20px;
+}
+.common-header .drop-down-menu .menu-btn.join-free-btn {
+  background: #E89721;
+  margin-top: 10px;
+}
+.common-header .drop-down-menu ul {
+  padding-top: 12px;
+}
+.common-header .drop-down-menu ul li {
+  padding-top: 8px;
+}
+.common-header .drop-down-menu ul li a {
+  display: block;
+  color: #575E66;
+  font-size: 13px;
+  cursor: pointer;
+}
+.common-header .drop-down-menu ul li a.active {
+  color: #2B2F33;
+  font-weight: 600;
+}
+.common-header .drop-down-menu ul li a:hover {
+  color: #0081D2;
+}
+.common-header .car {
+  height: 24px;
+  width: 24px;
+  position: relative;
+  margin-top: 30px;
+  cursor: pointer;
+}
+.common-header .car .car-msg {
+  color: #fff;
+  background-color: #FF0D0D;
+  font-size: 12px;
+  position: absolute;
+  border-radius: 50% 50%;
+  height: 20px;
+  width: 20px;
+  right: 0;
+  top: 0;
+  line-height: 20px;
+  text-align: center;
+  padding: 0 2px;
+  transform: translate(50%, -50%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.common-header .account-btn {
+  width: 120px;
+  height: 32px;
+  background-color: #E89721;
+  border-radius: 19px;
+  padding: 0 16px;
+  position: relative;
+  top: -10px;
+  margin-left: 39px;
+  cursor: pointer;
+}
+.common-header .account-btn:hover {
+  background-color: #FFB03D;
+}
+.common-header .account-btn .user-icon {
+  width: 18px;
+  height: 18px;
+  background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
+  position: relative;
+  top: 7px;
+}
+.common-header .account-btn .account-text {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+  position: relative;
+  top: 4px;
+}
+.common-header .account-btn .arrow-down-icon {
+  height: 5px;
+  width: 7px;
+  background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
+  position: relative;
+  top: 2px;
+}
+.common-footer {
+  height: 342px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.common-footer .footer-top {
+  height: 244px;
+}
+.common-footer .footer-top .footer-top-data.footer-top-data-other {
+  margin-left: 59px;
+}
+.common-footer .footer-top .footer-top-data h3 {
+  color: #2B2F33;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 60px 0 7px;
+}
+.common-footer .footer-top .footer-top-data p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 13px;
+  cursor: pointer;
+}
+.common-footer .footer-top .footer-top-right {
+  color: #E89721;
+  font-size: 16px;
+  padding-top: 60px;
+  text-align: right;
+}
+.common-footer .footer-top .footer-top-right span {
+  height: 30px;
+  width: 30px;
+  background-color: #E89721;
+  border-radius: 50%;
+  text-align: center;
+}
+.common-footer .footer-top .footer-top-right span i {
+  height: 20px;
+  width: 20px;
+  background: url('../../images/home/email-icon.png') 100% 100% no-repeat;
+  margin-top: 5px;
+}
+.common-footer .footer-top .footer-top-right p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 80px;
+}
+.common-footer .footer-bottom {
+  height: 98px;
+  background-color: #2B2F33;
+  font-size: 13px;
+  color: #828E99;
+}
+.common-footer .footer-bottom .fl {
+  margin-top: 29px;
+}
+.common-footer .footer-bottom .fl img {
+  height: 38px;
+  width: 190px;
+}
+.common-footer .footer-bottom .fr {
+  margin-top: 37px;
+}
+.common-footer .footer-bottom .fr img {
+  height: 25px;
+  width: 418px;
+}
+.width-1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+.ellipsis {
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -icab-text-overflow: ellipsis;
+  -khtml-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
   overflow: hidden;
 }
 .home {
-  width: 100%;
+  min-width: 1180px;
+  position: relative;
+  padding-bottom: 342px;
+}
+.home .pre-div,
+.home .next-div {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  background: #000000;
+  opacity: 0.5;
+  z-index: 888;
+  border-radius: 50%;
+  top: 151px;
+  cursor: pointer;
+}
+.home .pre-div div,
+.home .next-div div {
+  width: 14px;
+  height: 24px;
+  margin: 12px 0 0 16px;
+}
+.home .pre-div.pre-div,
+.home .next-div.pre-div {
+  left: 10px;
+}
+.home .pre-div.pre-div div,
+.home .next-div.pre-div div {
+  background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
+}
+.home .pre-div.next-div,
+.home .next-div.next-div {
+  right: 10px;
+}
+.home .pre-div.next-div div,
+.home .next-div.next-div div {
+  background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
+}
+.home .home-header {
+  height: 600px;
+  background: #0081D2;
+}
+.home .home-header .width-1180 .home-header-title {
+  width: 550px;
+  height: 98px;
+  font-size: 44px;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  margin: 0 auto;
+  padding-top: 70px;
+}
+.home .home-header .width-1180 .home-header-desc {
+  width: 440px;
+  height: 60px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  margin: 24px auto 0;
+}
+.home .home-header .width-1180 .header-form {
+  background: #fff;
+  height: 241px;
+  margin-top: 87px;
+  box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
+}
+.home .home-custom-desc .width-1180 {
+  padding: 36px 0;
+  position: relative;
+}
+.home .home-custom-desc .section {
+  padding: 14px 0;
+  border-right: 1px solid #F0F4F7;
+}
+.home .home-custom-desc .section.section-1 {
+  width: 330px;
+}
+.home .home-custom-desc .section.section-2 {
+  width: 380px;
+  margin-left: 28px;
+}
+.home .home-custom-desc .section.section-3 {
+  margin-left: 38px;
+  border: none;
+}
+.home .home-custom-desc img {
+  height: 70px;
+  width: 70px;
+}
+.home .home-custom-desc .desc {
+  margin-left: 23px;
+  position: relative;
+  top: -5px;
+}
+.home .home-custom-desc .desc h3 {
+  color: #2B2F33;
+  font-size: 16px;
+}
+.home .home-custom-desc .desc p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 10px;
+}
+.home .home-goods-section {
+  background-color: #F0F4F7;
+  padding-bottom: 80px;
+}
+.home .home-goods-section .goods-title {
+  color: #2B2F33;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 60px;
+  font-weight: 600;
+}
+.home .home-goods-section .goods-desc {
+  color: #575E66;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 16px;
+}
+.home .home-goods-section .goods-desc .goods-desc-span2 {
+  margin: 0 35px;
+}
+.home .home-goods-section .goods-list {
+  margin-top: 60px;
+  width: 1200px;
+  transform: translateX(-20px);
+}
+.home .home-goods-section .goods-list .good-sigle {
+  background-color: #fff;
+  width: 280px;
+  padding: 0 5px 20px;
+  position: relative;
+  margin-left: 20px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-img {
+  width: 146px;
+  height: 102px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, -35%);
+}
+.home .home-goods-section .goods-list .good-sigle .price-div {
+  padding-top: 75px;
+}
+.home .home-goods-section .goods-list .good-sigle .price-div .price {
+  font-size: 30px;
+  color: #E89721;
+  text-align: right;
+  width: 130px;
+  margin-right: 10px;
+}
+.home .home-goods-section .goods-list .good-sigle .price-div .text {
+  color: #828E99;
+  width: 130px;
+  font-size: 13px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-desc {
+  color: #2B2F33;
+  font-size: 16px;
+  text-align: center;
+  padding: 20px 0 8px;
+  font-weight: 600;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param {
+  padding-top: 6px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-text {
+  font-size: 13px;
+  color: #828E99;
+  width: 95px;
+  text-align: right;
+  margin-right: 10px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-value {
+  font-size: 13px;
+  color: #2B2F33;
+  width: 165px;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section {
+  background-color: #0081D2;
+  width: 160px;
+  height: 36px;
+  border-radius: 2px;
+  margin: 40px auto 0;
+  text-align: center;
+  cursor: pointer;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section .img {
+  margin-top: 10px;
+  height: 16px;
+  width: 16px;
+  background: url('../../images/home/js-icon.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section .text {
+  color: #FFFFFF;
+  font-size: 16px;
+  margin-left: 5px;
+  position: relative;
+  top: -2px;
+}
+.home .home-goods-section .goods-bottom {
+  padding: 0 65px;
+  margin-top: 50px;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div {
+  text-align: center;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div.goods-bottom-other {
+  margin-left: 72px;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img {
+  height: 60px;
+  width: 60px;
+  margin: 0 auto;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-1 {
+  background: url('../../images/home/goods-s-1.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-2 {
+  background: url('../../images/home/goods-s-2.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-3 {
+  background: url('../../images/home/goods-s-3.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-4 {
+  background: url('../../images/home/goods-s-4.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-5 {
+  background: url('../../images/home/goods-s-5.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-6 {
+  background: url('../../images/home/goods-s-6.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-7 {
+  background: url('../../images/home/goods-s-7.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-text {
+  color: #828E99;
+  font-size: 13px;
+}
+.home .map-section .map-section-title {
+  font-size: 24px;
+  color: #2B2F33;
+  text-align: center;
+  padding-top: 60px;
+  font-weight: 600;
+}
+.home .map-section .map-section-desc {
+  font-size: 16px;
+  color: #575E66;
+  text-align: center;
+  padding-top: 16px;
+}
+.home .map-section .map-nums {
+  padding: 40px 154px 60px;
+  text-align: center;
+}
+.home .map-section .map-nums .map-num-2 {
+  margin: 0 267px;
+}
+.home .map-section .map-nums h3 {
+  font-size: 40px;
+  color: #0081D2;
+}
+.home .map-section .map-nums p {
+  font-size: 13px;
+  color: #575E66;
+  margin-top: 3px;
+}
+.home .map-section .map-data .map-data-left {
+  width: 410px;
+}
+.home .map-section .map-data .map-data-left .title {
+  padding: 0 20px;
+}
+.home .map-section .map-data .map-data-left .title .title-l {
+  color: #2B2F33;
+  font-size: 16px;
+  width: 92px;
+}
+.home .map-section .map-data .map-data-left .title .title-r {
+  width: 273px;
+  margin-left: 5px;
+  text-align: right;
+}
+.home .map-section .map-data .map-data-left .title .title-r .count-text {
+  color: #828E99;
+  font-size: 13px;
+  width: 118px;
+}
+.home .map-section .map-data .map-data-left .title .title-r .count {
+  font-size: 13px;
+  color: #E89721;
+  max-width: 140px;
+  padding: 0 4px;
+}
+.home .map-section .map-data .map-data-left .title .title-r b {
+  color: #FF0D0D;
+  font-weight: bold;
+  font-size: 14px;
+  width: 7px;
+}
+.home .map-section .map-data .data-table .data-table-header {
+  height: 32px;
+  line-height: 32px;
+  background-color: #F0F4F7;
+  margin-top: 17px;
+}
+.home .map-section .map-data .data-table .data-table-header div {
+  color: #2B2F33;
+  font-size: 13px;
+  font-weight: 600;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-1 {
+  padding-left: 20px;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-2 {
+  padding-left: 36px;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-3,
+.home .map-section .map-data .data-table .data-table-header div.table-header-4 {
+  padding-left: 46px;
+}
+.home .map-section .map-data .data-table .data-table-body .data-table-tr {
+  margin-top: 20px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-1 {
+  color: #828E99;
+  font-size: 13px;
+  width: 37px;
+  margin-left: 20px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 {
+  margin-left: 30px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 img {
+  width: 20px;
+  height: 15px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 span {
+  color: #828E99;
+  font-size: 13px;
+  width: 45px;
+  margin-left: 7px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-3 {
+  color: #E89721;
+  font-size: 13px;
+  margin-left: 46px;
+  width: 65px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 {
+  margin-left: 23px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress {
+  width: 100px;
+  background-color: #DFE2E6;
+  height: 12px;
+  border-radius: 6px;
+  position: relative;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .active-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  background-color: #1DDA74;
+  border-radius: 6px;
+  z-index: 2;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .text-progress {
+  z-index: 3;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  font-size: 11px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 12px;
+}
+.home .map-section .map-data .map-data-right {
+  position: relative;
+  margin: 20px 0 0 57px;
+  width: 700px;
+  height: 342.6px;
+  background: url('../../images/home/map.png') 100% 100% no-repeat;
+  z-index: 2;
+}
+.home .map-section .map-data .map-data-right .point-div {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50% 50%;
+  cursor: pointer;
+}
+.home .map-section .map-data .map-data-right .point-div:hover .point-mark {
+  background-color: #E89721;
+}
+.home .map-section .map-data .map-data-right .point-div:hover .point-desc {
+  display: block;
+}
+.home .map-section .map-data .map-data-right .point-div .point-mark {
+  width: 10px;
+  height: 10px;
+  background-color: #0081D2;
+  border-radius: 50% 50%;
+  position: absolute;
+  z-index: 5;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-1 {
+  top: 81px;
+  left: 123px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-2 {
+  top: 116px;
+  left: 113px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-3 {
+  top: 139px;
+  left: 153px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-4 {
+  top: 222px;
+  left: 199px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-5 {
+  top: 282px;
+  left: 200px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc {
+  width: 223px;
+  height: 132px;
+  background-color: #fff;
+  border: 1px solid #E89721;
+  padding: 16px;
+  position: absolute;
+  left: -218px;
+  top: 5px;
+  display: none;
+  z-index: 6;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc h3 {
+  color: #2B2F33;
+  font-size: 16px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs {
+  margin-top: 4px;
+  font-size: 13px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .desc {
+  margin-top: 6px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .text {
+  color: #828E99;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .num {
+  color: #E89721;
+}
+.home .banner-1-section {
+  background: #F0F4F7;
+}
+.home .banner-1-section .banner-1-section-title {
+  font-size: 24px;
+  color: #2B2F33;
+  text-align: center;
+  padding: 60px 0 40px;
+  font-weight: 600;
+}
+.home .banner-1-section .banner-1-datas-div {
+  overflow: hidden;
+  position: relative;
+}
+.home .banner-1-section .banner-1-datas {
+  width: 999999px;
+  transform: translateX(-20px);
+}
+.home .banner-1-section .banner-1-datas .banner-1-data {
+  margin-left: 20px;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data img {
+  width: 280px;
+  height: 350px;
+  display: block;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text {
+  background: #0081d2;
+  opacity: 0.9;
+  height: 350px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .hover {
+  display: block;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .no-hover {
+  display: none;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(180deg, rgba(0, 129, 210, 0) 0%, #0081d2 100%);
+  transition: all 0.3s ease-in-out;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover {
+  padding: 40px 20px 18px;
+  display: block;
+  overflow: hidden;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover h3 {
+  color: #FFFFFF;
+  font-size: 16px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover {
+  margin: 30px 20px;
+  height: 290px;
+  overflow: hidden;
+  display: none;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover h3 {
+  color: #FFFFFF;
+  font-size: 16px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul {
+  margin-top: 10px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li {
+  margin-top: 10px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li i {
+  height: 7px;
+  width: 7px;
+  border-radius: 50% 50%;
+  background-color: #fff;
+  position: relative;
+  top: 5px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li span {
+  width: 225px;
+  margin-left: 8px;
+  font-size: 13px;
+  color: #FFFFFF;
+}
+.home .banner-2-section {
+  padding-bottom: 80px;
+}
+.home .banner-2-section .banner-2-section-title {
+  color: #2B2F33;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 60px;
+  font-weight: 600;
+}
+.home .banner-2-section .banner-2-section-desc {
+  color: #575E66;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 16px;
+}
+.home .banner-2-section .banner-2-datas-div {
+  overflow: hidden;
+  position: relative;
+  padding: 40px 0 50px;
+}
+.home .banner-2-section .banner-2-datas {
+  width: 999999px;
+  transform: translateX(-20px);
+}
+.home .banner-2-section .banner-2-datas .banner-2-data {
+  margin-left: 20px;
+  position: relative;
+  cursor: pointer;
+  width: 280px;
+  height: 348px;
+  border: 1px solid #F0F4F7;
+  background: #fff;
+  transition: all 0.5s;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data:hover {
+  transform: translatey(-3px);
+  box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-img {
+  width: 280px;
+  height: 200px;
+  display: block;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-desc {
+  color: #575E66;
+  font-size: 13px;
+  height: 51px;
+  margin: 20px 20px 29px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-bottom {
+  padding: 0 20px;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-bottom .banner-2-data-bottom-left {
+  width: 130px;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-bottom .banner-2-data-bottom-left img {
+  width: 20px;
+  height: 13px;
+  position: relative;
+  top: -1px;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-bottom .banner-2-data-bottom-left span {
+  color: #2B2F33;
+  font-size: 13px;
+  margin-left: 8px;
+  width: 100px;
+}
+.home .banner-2-section .banner-2-datas .banner-2-data .banner-2-data-bottom .banner-2-data-bottom-right span {
+  height: 16px;
+  width: 16px;
+  margin-left: 5px;
+  background: url('../../images/home/star-icon.png');
+  background-size: 16px 16px;
+}
+.home .banner-2-section .place-orders {
+  display: block;
+  width: 260px;
+  height: 60px;
+  font-size: 16px;
+  text-align: center;
+  line-height: 60px;
+  color: #fff;
+  background: #189EF2;
+  margin: 0 auto;
+}
+.home .faq-section {
+  background: #F0F4F7;
+  padding-bottom: 60px;
+}
+.home .faq-section h3 {
+  color: #2B2F33;
+  font-size: 24px;
+  padding: 60px 0 30px;
+  text-align: center;
+  font-weight: 600;
+}
+.home .faq-section .faq-datas {
+  background-color: #fff;
+  padding: 0 40px 50px 40px;
+  overflow: hidden;
+}
+.home .faq-section .faq-datas .faq-datas-div {
+  width: 1164px;
+  transform: translateX(-64px);
+}
+.home .faq-section .faq-datas .faq-data {
+  width: 518px;
+  margin-left: 64px;
+}
+.home .faq-section .faq-datas .faq-data .title {
+  color: #2B2F33;
+  font-size: 16px;
+  padding-top: 30px;
+  font-weight: 600;
+}
+.home .faq-section .faq-datas .faq-data .desc {
+  color: #575E66;
+  font-size: 13px;
+  padding-top: 12px;
+}
+.home .faq-section .faq-datas .faq-data .desc span {
+  color: #0081D2;
+  cursor: pointer;
+}
+.home .faq-section .faq-datas .learn-more {
+  color: #2B2F33;
+  font-size: 16px;
+  text-align: right;
+  padding-top: 20px;
+  cursor: pointer;
+  font-weight: 600;
 }
-/*# sourceMappingURL=home.css.map */
\ No newline at end of file

css/home/home.css.map

-{"version":3,"sources":["E:/pcb/css/common/base.less","home.less"],"names":[],"mappings":"AAAA;EACE,8BAAA;EACA,0BAAA;;AAGF,IAAK;EACH,UAAA;EACA,8BAAA;EACA,6CAAA;;AAGF;AAAM;EACJ,uBAAA;;AAGF;AAAM;AAAK;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAK;AAAM;AAAM;AAAU;AAAQ;AAAO;AAAU;AAAG;AAAY;AAAI;AAAI;AAAI;AAAQ;AAAS;AAAO;AAAS;AAAY;AAAQ;AAAQ;AAAQ;AAAM;AAAK;EACxN,SAAA;EACA,UAAA;;AAGF;AAAQ;AAAO;AAAQ;EACrB,eAAA;EACA,YAAA;;AAGF,KAAK;AAAe,KAAK;AAAe,KAAK;AAAa;EACxD,eAAA;EACA,wBAAA;;AAGF;EACE,yBAAA;EACA,iBAAA;;AAGF;AAAI;AAAI;EACN,gBAAA;;AAGF;AAAI;AAAI;AAAI;AAAI;AAAI;EAClB,eAAA;EACA,gBAAA;;AAGF;EACE,qBAAA;;AAGF;EACE,YAAA;;AAGF;EACE,QAAA;EACA,WAAA;;AAGF,IAAI;EACF,SAAS,GAAT;EACA,WAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;;AAGF;EACE,WAAA;EACA,gBAAA;;AAGF;EACE,YAAA;EACA,gBAAA;;AAGF;EACE,mBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,aAAA;;AAGF;EACE,cAAA;;AAGF;EACE,qBAAA;EACA,gBAAA;EACA,OAAA;EACA,sBAAA;EACA,oBAAA;;AAGF;EACE,uBAAA;EACA,mBAAA;;AAGF;AAAO;AAAI;AAAI;EACb,mBAAA;;AAGF;EACE,sBAAA;EACA,8BAAA;;AAGF,CAAC;AAAQ,CAAC;EACR,qBAAA;;AAGF;AAAM;EACJ,WAAA;;AAGF;EACE,gBAAA;;AC5HF;EACE,WAAA","file":"home.css"}
\ No newline at end of file

css/home/home.less

 @import '../common/base.less';
 
-.home{
-  width: 100%;
+.width-1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+
+.ellipsis {
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -icab-text-overflow: ellipsis;
+  -khtml-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.home {
+  // width: 100%;
+  min-width: 1180px;
+  position: relative;
+  padding-bottom: 342px;
+
+  .pre-div,
+  .next-div {
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    background: rgba(0, 0, 0, 1);
+    opacity: 0.5;
+    z-index: 888;
+    border-radius: 50%;
+    top: 151px;
+    cursor: pointer;
+
+    div {
+      width: 14px;
+      height: 24px;
+      margin: 12px 0 0 16px;
+    }
+
+    &.pre-div {
+      left: 10px;
+
+      div {
+        background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
+
+      }
+    }
+
+    &.next-div {
+      right: 10px;
+
+      div {
+        background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
+      }
+
+    }
+  }
+
+
+
+  .home-header {
+    height: 600px;
+    background: #0081D2;
+
+    .width-1180 {
+      .home-header-title {
+        width: 550px;
+        height: 98px;
+        font-size: 44px;
+        color: #fff;
+        line-height: 50px;
+        text-align: center;
+        margin: 0 auto;
+        padding-top: 70px;
+      }
+
+      .home-header-desc {
+        width: 440px;
+        height: 60px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #fff;
+        line-height: 20px;
+        text-align: center;
+        margin: 24px auto 0;
+
+      }
+
+      .header-form {
+        background: #fff;
+        height: 241px;
+        margin-top: 87px;
+        box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
+      }
+    }
+  }
+
+  .home-custom-desc {
+
+    // .chat-with-btn {
+    //   position: absolute;
+    //   right:-180px;
+    //   bottom:0;
+    //   width: 180px;
+    //   height: 39px;
+    //   background: rgba(232, 151, 33, 1);
+    //   box-shadow: 0px -8px 10px 0px rgba(232, 151, 33, 0.2);
+    //   border-radius: 8px 8px 0px 0px;
+    //   font-size: 16px;
+    //   color:#FFFFFF;
+    //   text-align: center;
+    //   padding-top: 11px;
+    //   cursor: pointer;
+    //   span{
+    //     height:28px;
+    //     width:28px;
+    //     background: url('../../images/home/msg-icon.png') 100% 100% no-repeat;
+    //     margin-right: 9px;
+    //   }
+
+    // }
+
+    .width-1180 {
+      padding: 36px 0;
+      position: relative;
+    }
+
+    .section {
+      padding: 14px 0;
+      border-right: 1px solid #F0F4F7;
+
+      &.section-1 {
+        width: 330px;
+      }
+
+      &.section-2 {
+        width: 380px;
+        margin-left: 28px;
+      }
+
+      &.section-3 {
+        margin-left: 38px;
+        border: none
+      }
+    }
+
+    img {
+      height: 70px;
+      width: 70px;
+    }
+
+    .desc {
+      margin-left: 23px;
+      position: relative;
+      top: -5px;
+
+      h3 {
+        color: #2B2F33;
+        font-size: 16px;
+      }
+
+      p {
+        color: #828E99;
+        font-size: 13px;
+        padding-top: 10px;
+      }
+    }
+  }
+
+  .home-goods-section {
+    background-color: #F0F4F7;
+    padding-bottom: 80px;
+
+    .goods-title {
+      color: #2B2F33;
+      font-size: 24px;
+      text-align: center;
+      padding-top: 60px;
+      font-weight: 600;
+    }
+
+    .goods-desc {
+      color: #575E66;
+      font-size: 16px;
+      text-align: center;
+      padding-top: 16px;
+
+      .goods-desc-span2 {
+        margin: 0 35px;
+      }
+    }
+
+    .goods-list {
+      margin-top: 60px;
+      width: 1200px;
+      transform: translateX(-20px);
+
+      .good-sigle {
+        background-color: #fff;
+        width: 280px;
+        padding: 0 5px 20px;
+        position: relative;
+        margin-left: 20px;
+
+        .good-img {
+          width: 146px;
+          height: 102px;
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%, -35%);
+        }
+
+        .price-div {
+          padding-top: 75px;
+
+          .price {
+            font-size: 30px;
+            color: #E89721;
+            text-align: right;
+            width: 130px;
+            margin-right: 10px;
+          }
+
+          .text {
+            color: #828E99;
+            width: 130px;
+            font-size: 13px;
+          }
+        }
+
+        .good-sigle-desc {
+          color: #2B2F33;
+          font-size: 16px;
+          text-align: center;
+          padding: 20px 0 8px;
+          font-weight: 600;
+        }
+
+        .good-sigle-params {
+          .param {
+            padding-top: 6px;
+
+            .param-text {
+              font-size: 13px;
+              color: #828E99;
+              width: 95px;
+              text-align: right;
+              margin-right: 10px;
+            }
+
+            .param-value {
+              font-size: 13px;
+              color: #2B2F33;
+              width: 165px;
+
+            }
+          }
+        }
+
+        .computer-section {
+          background-color: #0081D2;
+          width: 160px;
+          height: 36px;
+          border-radius: 2px;
+          margin: 40px auto 0;
+          text-align: center;
+          cursor: pointer;
+
+          .img {
+            margin-top: 10px;
+            height: 16px;
+            width: 16px;
+            background: url('../../images/home/js-icon.png') 100% 100% no-repeat;
+          }
+
+          .text {
+            color: #FFFFFF;
+            font-size: 16px;
+            margin-left: 5px;
+            position: relative;
+            top: -2px;
+          }
+        }
+      }
+    }
+
+    .goods-bottom {
+      padding: 0 65px;
+      margin-top: 50px;
+
+      .goods-bottom-div {
+        text-align: center;
+
+        &.goods-bottom-other {
+          margin-left: 72px;
+        }
+
+        .goods-bottom-img {
+          height: 60px;
+          width: 60px;
+          margin: 0 auto;
+
+          &.goods-bottom-img-1 {
+            background: url('../../images/home/goods-s-1.png') 100% 100% no-repeat;
+
+          }
+
+          &.goods-bottom-img-2 {
+            background: url('../../images/home/goods-s-2.png') 100% 100% no-repeat;
+
+          }
+
+          &.goods-bottom-img-3 {
+            background: url('../../images/home/goods-s-3.png') 100% 100% no-repeat;
+
+          }
+
+          &.goods-bottom-img-4 {
+            background: url('../../images/home/goods-s-4.png') 100% 100% no-repeat;
+
+          }
+
+          &.goods-bottom-img-5 {
+            background: url('../../images/home/goods-s-5.png') 100% 100% no-repeat;
+          }
+
+          &.goods-bottom-img-6 {
+            background: url('../../images/home/goods-s-6.png') 100% 100% no-repeat;
+
+          }
+
+          &.goods-bottom-img-7 {
+            background: url('../../images/home/goods-s-7.png') 100% 100% no-repeat;
+
+          }
+        }
+
+        .goods-bottom-text {
+          color: #828E99;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  .map-section {
+    .map-section-title {
+      font-size: 24px;
+      color: #2B2F33;
+      text-align: center;
+      padding-top: 60px;
+      font-weight: 600;
+    }
+
+    .map-section-desc {
+      font-size: 16px;
+      color: #575E66;
+      text-align: center;
+      padding-top: 16px;
+
+    }
+
+    .map-nums {
+      padding: 40px 154px 60px;
+      text-align: center;
+
+      .map-num-2 {
+        margin: 0 267px;
+      }
+
+      h3 {
+        font-size: 40px;
+        color: #0081D2
+      }
+
+      p {
+        font-size: 13px;
+        color: #575E66;
+        margin-top: 3px;
+      }
+    }
+
+    .map-data {
+      .map-data-left {
+        width: 410px;
+
+        .title {
+          padding: 0 20px;
+
+          .title-l {
+            color: #2B2F33;
+            font-size: 16px;
+            width: 92px;
+          }
+
+          .title-r {
+            width: 273px;
+            margin-left: 5px;
+            text-align: right;
+
+            .count-text {
+              color: #828E99;
+              font-size: 13px;
+              width: 118px;
+            }
+
+            .count {
+              font-size: 13px;
+              color: #E89721;
+              max-width: 140px;
+              padding: 0 4px;
+            }
+
+            b {
+              color: #FF0D0D;
+              font-weight: bold;
+              font-size: 14px;
+              width: 7px;
+            }
+          }
+        }
+      }
+
+      .data-table {
+        .data-table-header {
+          height: 32px;
+          line-height: 32px;
+          background-color: #F0F4F7;
+          margin-top: 17px;
+
+          div {
+            color: #2B2F33;
+            font-size: 13px;
+            font-weight: 600;
+
+            &.table-header-1 {
+              padding-left: 20px;
+            }
+
+            &.table-header-2 {
+              padding-left: 36px;
+            }
+
+            &.table-header-3,
+            &.table-header-4 {
+              padding-left: 46px;
+            }
+          }
+        }
+
+        .data-table-body {
+          .data-table-tr {
+            margin-top: 20px;
+          }
+
+          .table-td-1 {
+            color: #828E99;
+            font-size: 13px;
+            width: 37px;
+            margin-left: 20px;
+          }
+
+          .table-td-2 {
+            margin-left: 30px;
+
+            img {
+              width: 20px;
+              height: 15px;
+            }
+
+            span {
+              color: #828E99;
+              font-size: 13px;
+              width: 45px;
+              margin-left: 7px;
+            }
+          }
+
+          .table-td-3 {
+            color: #E89721;
+            font-size: 13px;
+            margin-left: 46px;
+            width: 65px
+          }
+
+          .table-td-4 {
+            margin-left: 23px;
+
+            .progress {
+              width: 100px;
+              background-color: #DFE2E6;
+              height: 12px;
+              border-radius: 6px;
+              position: relative;
+
+              .active-progress {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: 40px;
+                background-color: #1DDA74;
+                border-radius: 6px;
+                z-index: 2;
+
+              }
+
+              .text-progress {
+                z-index: 3;
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                top: 0;
+                font-size: 11px;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 12px;
+              }
+            }
+          }
+        }
+      }
+
+      .map-data-right {
+        position: relative;
+        margin: 20px 0 0 57px;
+        width: 700px;
+        height: 342.6px;
+        background: url('../../images/home/map.png') 100% 100% no-repeat;
+        z-index: 2;
+
+        .point-div {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-radius: 50% 50%;
+          cursor: pointer;
+
+          &:hover {
+            .point-mark {
+              background-color: #E89721;
+            }
+
+            .point-desc {
+              display: block;
+            }
+          }
+
+          .point-mark {
+            width: 10px;
+            height: 10px;
+            background-color: #0081D2;
+            border-radius: 50% 50%;
+            position: absolute;
+            z-index: 5;
+          }
+
+          &.point-div-1 {
+            top: 81px;
+            left: 123px;
+          }
+
+          &.point-div-2 {
+            top: 116px;
+            left: 113px;
+          }
+
+          &.point-div-3 {
+            top: 139px;
+            left: 153px;
+          }
+
+          &.point-div-4 {
+            top: 222px;
+            left: 199px;
+          }
+
+          &.point-div-5 {
+            top: 282px;
+            left: 200px;
+          }
+
+
+          .point-desc {
+            width: 223px;
+            height: 132px;
+            background-color: #fff;
+            border: 1px solid #E89721;
+            padding: 16px;
+            position: absolute;
+            left: -218px;
+            top: 5px;
+            display: none;
+            z-index: 6;
+
+            h3 {
+              color: #2B2F33;
+              font-size: 16px;
+            }
+
+            .descs {
+              margin-top: 4px;
+              font-size: 13px;
+
+              .desc {
+                margin-top: 6px;
+              }
+
+              .text {
+                color: #828E99
+              }
+
+              .num {
+                color: #E89721
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .banner-1-section {
+    background: #F0F4F7;
+
+    .banner-1-section-title {
+      font-size: 24px;
+      color: #2B2F33;
+      text-align: center;
+      padding: 60px 0 40px;
+      font-weight: 600;
+    }
+
+    .banner-1-datas-div {
+      overflow: hidden;
+      position: relative;
+    }
+
+    .banner-1-datas {
+      width: 999999px;
+      transform: translateX(-20px);
+
+      .banner-1-data {
+        margin-left: 20px;
+        position: relative;
+        cursor: pointer;
+        overflow: hidden;
+
+        img {
+          width: 280px;
+          height: 350px;
+          display: block;
+        }
+
+        &:hover {
+          .banner-1-data-text {
+            background: rgba(0, 129, 210, 1);
+            opacity: 0.9;
+            height: 350px;
+
+            .hover {
+              display: block;
+            }
+
+            .no-hover {
+              display: none;
+            }
+          }
+        }
+
+        .banner-1-data-text {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 100px;
+          background: linear-gradient(180deg, rgba(0, 129, 210, 0) 0%, rgba(0, 129, 210, 1) 100%);
+          transition: all .3s ease-in-out;
+
+          .no-hover {
+            padding: 40px 20px 18px;
+            display: block;
+            overflow: hidden;
+
+            h3 {
+              color: #FFFFFF;
+              font-size: 16px;
+            }
+          }
+        }
+
+        .hover {
+          margin: 30px 20px;
+          height: 290px;
+          overflow: hidden;
+          display: none;
+
+          h3 {
+            color: #FFFFFF;
+            font-size: 16px;
+          }
+
+          ul {
+            margin-top: 10px;
+
+            li {
+              margin-top: 10px;
+
+              i {
+                height: 7px;
+                width: 7px;
+                border-radius: 50% 50%;
+                background-color: #fff;
+                position: relative;
+                top: 5px;
+
+              }
+
+              span {
+                width: 225px;
+                margin-left: 8px;
+                font-size: 13px;
+                color: #FFFFFF;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .banner-2-section {
+    padding-bottom: 80px;
+
+    .banner-2-section-title {
+      color: #2B2F33;
+      font-size: 24px;
+      text-align: center;
+      padding-top: 60px;
+      font-weight: 600;
+    }
+
+    .banner-2-section-desc {
+      color: #575E66;
+      font-size: 16px;
+      text-align: center;
+      padding-top: 16px;
+    }
+
+    .banner-2-datas-div {
+      overflow: hidden;
+      position: relative;
+      padding: 40px 0 50px;
+    }
+
+    .banner-2-datas {
+      width: 999999px;
+      transform: translateX(-20px);
+
+      .banner-2-data {
+        margin-left: 20px;
+        position: relative;
+        cursor: pointer;
+        width: 280px;
+        height: 348px;
+        border: 1px solid #F0F4F7;
+        background: #fff;
+        transition: all 0.5s;
+
+        &:hover {
+          transform: translatey(-3px);
+          box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+        }
+
+        .banner-2-data-img {
+          width: 280px;
+          height: 200px;
+          display: block;
+        }
+
+        .banner-2-data-desc {
+          color: #575E66;
+          font-size: 13px;
+          height: 51px;
+          margin: 20px 20px 29px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+        }
+
+        .banner-2-data-bottom {
+          padding: 0 20px;
+
+          .banner-2-data-bottom-left {
+            width: 130px;
+
+            img {
+              width: 20px;
+              height: 13px;
+              position: relative;
+              top: -1px;
+            }
+
+            span {
+              color: #2B2F33;
+              font-size: 13px;
+              margin-left: 8px;
+              width: 100px;
+            }
+          }
+
+          .banner-2-data-bottom-right {
+            span {
+              height: 16px;
+              width: 16px;
+              margin-left: 5px;
+              background: url('../../images/home/star-icon.png');
+              background-size: 16px 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .place-orders {
+      display: block;
+      width: 260px;
+      height: 60px;
+      font-size: 16px;
+      text-align: center;
+      line-height: 60px;
+      color: #fff;
+      background: #189EF2;
+      margin: 0 auto;
+    }
+  }
+
+  .faq-section {
+    background: #F0F4F7;
+    padding-bottom: 60px;
+
+    h3 {
+      color: #2B2F33;
+      font-size: 24px;
+      padding: 60px 0 30px;
+      text-align: center;
+      font-weight: 600;
+    }
+
+    .faq-datas {
+      background-color: #fff;
+      padding: 0 40px 50px 40px;
+      overflow: hidden;
+
+      .faq-datas-div {
+        width: 1164px;
+        transform: translateX(-64px);
+      }
+
+      .faq-data {
+        width: 518px;
+        margin-left: 64px;
+
+        .title {
+          color: #2B2F33;
+          font-size: 16px;
+          padding-top: 30px;
+          font-weight: 600;
+        }
+
+        .desc {
+          color: #575E66;
+          font-size: 13px;
+          padding-top: 12px;
+
+          span {
+            color: #0081D2;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .learn-more {
+        color: #2B2F33;
+        font-size: 16px;
+        text-align: right;
+        padding-top: 20px;
+        cursor: pointer;
+        font-weight: 600;
+      }
+    }
+  }
+
+
 }
\ No newline at end of file

css/home/index.css

+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+html * {
+  outline: 0;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html,
+body {
+  font-family: sans-serif;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  border: none;
+}
+input[type=button],
+input[type=submit],
+input[type=file],
+button {
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+ol,
+ul,
+dl {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: 500;
+}
+a {
+  text-decoration: none;
+}
+img {
+  border: none;
+}
+.clr {
+  *zoom: 1;
+  clear: both;
+}
+.clr:after {
+  content: ".";
+  clear: both;
+  height: 0;
+  visibility: hidden;
+  display: block;
+}
+.fl {
+  float: left;
+  _display: inline;
+}
+.fr {
+  float: right;
+  _display: inline;
+}
+.va-t {
+  vertical-align: top;
+}
+.va-m {
+  vertical-align: middle;
+}
+.va-b {
+  vertical-align: bottom;
+}
+.i-hide {
+  display: none;
+}
+.i-show {
+  display: block;
+}
+.lineBlock {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+.lbBox {
+  font-size: 0 !important;
+  *word-spacing: -1px !important;
+}
+label,
+dd,
+dd,
+dt {
+  font-weight: normal;
+}
+.boxsiz {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+html,
+body {
+  width: 100%;
+}
+.width-1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+.ellipsis {
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -icab-text-overflow: ellipsis;
+  -khtml-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+  -webkit-text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.home {
+  width: 100%;
+}
+.home .header {
+  height: 90px;
+  background: #0081D2;
+}
+.home .header .title-logo {
+  width: 121px;
+  height: 31px;
+  margin: 29px 38px 0 0;
+}
+.home .header .header-nav {
+  margin-top: 20px;
+}
+.home .header .header-nav a {
+  color: #fff;
+  font-size: 15px;
+  padding: 14px 0;
+  margin-left: 43px;
+  cursor: pointer;
+}
+.home .header .header-nav a.active {
+  border-bottom: 3px solid #E89721;
+  font-weight: 600;
+}
+.home .header .car {
+  height: 24px;
+  width: 24px;
+  background: url('../../images/home/car-icon.png') 100% 100% no-repeat;
+  position: relative;
+  margin-top: 30px;
+  cursor: pointer;
+}
+.home .header .car .car-msg {
+  color: #fff;
+  background-color: #FF0D0D;
+  font-size: 12px;
+  position: absolute;
+  border-radius: 50% 50%;
+  height: 20px;
+  width: 20px;
+  right: 0;
+  top: 0;
+  line-height: 20px;
+  text-align: center;
+  padding: 0 2px;
+  transform: translate(50%, -50%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.home .header .account-btn {
+  width: 120px;
+  height: 32px;
+  background-color: #E89721;
+  border-radius: 19px;
+  padding: 0 16px;
+  position: relative;
+  top: -10px;
+  margin-left: 39px;
+  cursor: pointer;
+}
+.home .header .account-btn .user-icon {
+  width: 18px;
+  height: 18px;
+  background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
+  position: relative;
+  top: 7px;
+}
+.home .header .account-btn .account-text {
+  color: #fff;
+  font-size: 14px;
+  margin: 0 3px;
+  position: relative;
+  top: 4px;
+}
+.home .header .account-btn .arrow-down-icon {
+  height: 5px;
+  width: 7px;
+  background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
+  position: relative;
+  top: 2px;
+}
+.home .home-header {
+  height: 600px;
+  background: #0081D2;
+}
+.home .home-header .width-1180 .home-header-title {
+  width: 550px;
+  height: 98px;
+  font-size: 44px;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+  margin: 0 auto;
+  padding-top: 70px;
+}
+.home .home-header .width-1180 .home-header-desc {
+  width: 440px;
+  height: 60px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  margin: 24px auto 0;
+}
+.home .home-header .width-1180 .header-form {
+  background: #fff;
+  height: 241px;
+  margin-top: 87px;
+  box-shadow: 0px 4px 10px 0px rgba(0, 129, 210, 0.1);
+}
+.home .home-custom-desc .width-1180 {
+  padding: 36px 0;
+}
+.home .home-custom-desc .section {
+  padding: 14px 0;
+  border-right: 1px solid #F0F4F7;
+}
+.home .home-custom-desc .section.section-1 {
+  width: 330px;
+}
+.home .home-custom-desc .section.section-2 {
+  width: 380px;
+  margin-left: 28px;
+}
+.home .home-custom-desc .section.section-3 {
+  margin-left: 38px;
+  border: none;
+}
+.home .home-custom-desc img {
+  height: 70px;
+  width: 70px;
+}
+.home .home-custom-desc .desc {
+  margin-left: 23px;
+  position: relative;
+  top: -5px;
+}
+.home .home-custom-desc .desc h3 {
+  color: #2B2F33;
+  font-size: 16px;
+}
+.home .home-custom-desc .desc p {
+  color: #828E99;
+  font-size: 13px;
+  padding-top: 10px;
+}
+.home .home-goods-section {
+  background-color: #F0F4F7;
+  padding-bottom: 80px;
+}
+.home .home-goods-section .goods-title {
+  color: #2B2F33;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 60px;
+}
+.home .home-goods-section .goods-desc {
+  color: #575E66;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 16px;
+}
+.home .home-goods-section .goods-desc .goods-desc-span2 {
+  margin: 0 35px;
+}
+.home .home-goods-section .goods-list {
+  margin-top: 60px;
+  width: 1200px;
+  transform: translateX(-20px);
+}
+.home .home-goods-section .goods-list .good-sigle {
+  background-color: #fff;
+  width: 280px;
+  padding: 0 5px 20px;
+  position: relative;
+  margin-left: 20px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-img {
+  width: 146px;
+  height: 102px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, -35%);
+}
+.home .home-goods-section .goods-list .good-sigle .price-div {
+  padding-top: 75px;
+}
+.home .home-goods-section .goods-list .good-sigle .price-div .price {
+  font-size: 30px;
+  color: #E89721;
+  text-align: right;
+  width: 130px;
+  margin-right: 10px;
+}
+.home .home-goods-section .goods-list .good-sigle .price-div .text {
+  color: #828E99;
+  width: 130px;
+  font-size: 13px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-desc {
+  color: #2B2F33;
+  font-size: 16px;
+  text-align: center;
+  padding: 20px 0 8px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param {
+  padding-top: 6px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-text {
+  font-size: 13px;
+  color: #828E99;
+  width: 95px;
+  text-align: right;
+  margin-right: 10px;
+}
+.home .home-goods-section .goods-list .good-sigle .good-sigle-params .param .param-value {
+  font-size: 13px;
+  color: #2B2F33;
+  width: 165px;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section {
+  background-color: #0081D2;
+  width: 160px;
+  height: 36px;
+  border-radius: 2px;
+  margin: 40px auto 0;
+  text-align: center;
+  cursor: pointer;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section .img {
+  margin-top: 10px;
+  height: 16px;
+  width: 16px;
+  background: url('../../images/home/js-icon.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-list .good-sigle .computer-section .text {
+  color: #FFFFFF;
+  font-size: 16px;
+  margin-left: 5px;
+  position: relative;
+  top: -2px;
+}
+.home .home-goods-section .goods-bottom {
+  padding: 0 65px;
+  margin-top: 50px;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div {
+  text-align: center;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div.goods-bottom-other {
+  margin-left: 72px;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img {
+  height: 60px;
+  width: 60px;
+  margin: 0 auto;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-1 {
+  background: url('../../images/home/goods-s-1.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-2 {
+  background: url('../../images/home/goods-s-2.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-3 {
+  background: url('../../images/home/goods-s-3.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-4 {
+  background: url('../../images/home/goods-s-4.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-5 {
+  background: url('../../images/home/goods-s-5.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-6 {
+  background: url('../../images/home/goods-s-6.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-img.goods-bottom-img-7 {
+  background: url('../../images/home/goods-s-7.png') 100% 100% no-repeat;
+}
+.home .home-goods-section .goods-bottom .goods-bottom-div .goods-bottom-text {
+  color: #828E99;
+  font-size: 13px;
+}
+.home .map-section .map-section-title {
+  font-size: 24px;
+  color: #2B2F33;
+  text-align: center;
+  padding-top: 60px;
+}
+.home .map-section .map-section-desc {
+  font-size: 16px;
+  color: #575E66;
+  text-align: center;
+  padding-top: 16px;
+}
+.home .map-section .map-nums {
+  padding: 40px 154px 60px;
+  text-align: center;
+}
+.home .map-section .map-nums .map-num-2 {
+  margin: 0 267px;
+}
+.home .map-section .map-nums h3 {
+  font-size: 40px;
+  color: #0081D2;
+}
+.home .map-section .map-nums p {
+  font-size: 13px;
+  color: #575E66;
+  margin-top: 3px;
+}
+.home .map-section .map-data .map-data-left {
+  width: 410px;
+}
+.home .map-section .map-data .map-data-left .title {
+  padding: 0 20px;
+}
+.home .map-section .map-data .map-data-left .title .title-l {
+  color: #2B2F33;
+  font-size: 16px;
+  width: 92px;
+}
+.home .map-section .map-data .map-data-left .title .title-r {
+  width: 273px;
+  margin-left: 5px;
+  text-align: right;
+}
+.home .map-section .map-data .map-data-left .title .title-r .count-text {
+  color: #828E99;
+  font-size: 13px;
+  width: 118px;
+}
+.home .map-section .map-data .map-data-left .title .title-r .count {
+  font-size: 13px;
+  color: #E89721;
+  max-width: 140px;
+  padding: 0 4px;
+}
+.home .map-section .map-data .map-data-left .title .title-r b {
+  color: #FF0D0D;
+  font-weight: bold;
+  font-size: 14px;
+  width: 7px;
+}
+.home .map-section .map-data .data-table .data-table-header {
+  height: 32px;
+  line-height: 32px;
+  background-color: #F0F4F7;
+  margin-top: 17px;
+}
+.home .map-section .map-data .data-table .data-table-header div {
+  color: #2B2F33;
+  font-size: 13px;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-1 {
+  padding-left: 20px;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-2 {
+  padding-left: 36px;
+}
+.home .map-section .map-data .data-table .data-table-header div.table-header-3,
+.home .map-section .map-data .data-table .data-table-header div.table-header-4 {
+  padding-left: 46px;
+}
+.home .map-section .map-data .data-table .data-table-body .data-table-tr {
+  margin-top: 20px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-1 {
+  color: #828E99;
+  font-size: 13px;
+  width: 37px;
+  margin-left: 20px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 {
+  margin-left: 30px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 img {
+  width: 20px;
+  height: 15px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-2 span {
+  color: #828E99;
+  font-size: 13px;
+  width: 45px;
+  margin-left: 7px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-3 {
+  color: #E89721;
+  font-size: 13px;
+  margin-left: 46px;
+  width: 65px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 {
+  margin-left: 23px;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress {
+  width: 100px;
+  background-color: #DFE2E6;
+  height: 12px;
+  border-radius: 6px;
+  position: relative;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .active-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  background-color: #1DDA74;
+  border-radius: 6px;
+  z-index: 2;
+}
+.home .map-section .map-data .data-table .data-table-body .table-td-4 .progress .text-progress {
+  z-index: 3;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  font-size: 11px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 12px;
+}
+.home .map-section .map-data .map-data-right {
+  position: relative;
+  margin: 20px 0 0 57px;
+  width: 700px;
+  height: 342.6px;
+  background: url('../../images/home/map.png') 100% 100% no-repeat;
+  z-index: 2;
+}
+.home .map-section .map-data .map-data-right .point-div {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50% 50%;
+  cursor: pointer;
+}
+.home .map-section .map-data .map-data-right .point-div:hover .point-mark {
+  background-color: #E89721;
+}
+.home .map-section .map-data .map-data-right .point-div:hover .point-desc {
+  display: block;
+}
+.home .map-section .map-data .map-data-right .point-div .point-mark {
+  width: 10px;
+  height: 10px;
+  background-color: #0081D2;
+  border-radius: 50% 50%;
+  position: absolute;
+  z-index: 5;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-1 {
+  top: 81px;
+  left: 123px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-2 {
+  top: 116px;
+  left: 113px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-3 {
+  top: 139px;
+  left: 153px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-4 {
+  top: 222px;
+  left: 199px;
+}
+.home .map-section .map-data .map-data-right .point-div.point-div-5 {
+  top: 282px;
+  left: 200px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc {
+  width: 223px;
+  height: 132px;
+  background-color: #fff;
+  border: 1px solid #E89721;
+  padding: 16px;
+  position: absolute;
+  left: -218px;
+  top: 5px;
+  display: none;
+  z-index: 6;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc h3 {
+  color: #2B2F33;
+  font-size: 16px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs {
+  margin-top: 4px;
+  font-size: 13px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .desc {
+  margin-top: 6px;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .text {
+  color: #828E99;
+}
+.home .map-section .map-data .map-data-right .point-div .point-desc .descs .num {
+  color: #E89721;
+}
+.home .banner-1-section {
+  background: #F0F4F7;
+}
+.home .banner-1-section .banner-1-section-title {
+  font-size: 24px;
+  color: #2B2F33;
+  text-align: center;
+  padding: 60px 0 40px;
+}
+.home .banner-1-section .banner-1-datas-div {
+  overflow: hidden;
+  position: relative;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div,
+.home .banner-1-section .banner-1-datas-div .next-div {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  background: #000000;
+  opacity: 0.8;
+  z-index: 888;
+  border-radius: 50%;
+  top: 151px;
+  cursor: pointer;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div div,
+.home .banner-1-section .banner-1-datas-div .next-div div {
+  width: 14px;
+  height: 24px;
+  margin: 12px 0 0 16px;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div.pre-div,
+.home .banner-1-section .banner-1-datas-div .next-div.pre-div {
+  left: 10px;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div.pre-div div,
+.home .banner-1-section .banner-1-datas-div .next-div.pre-div div {
+  background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div.next-div,
+.home .banner-1-section .banner-1-datas-div .next-div.next-div {
+  right: 10px;
+}
+.home .banner-1-section .banner-1-datas-div .pre-div.next-div div,
+.home .banner-1-section .banner-1-datas-div .next-div.next-div div {
+  background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
+}
+.home .banner-1-section .banner-1-datas {
+  width: 999999px;
+  transform: translateX(-20px);
+}
+.home .banner-1-section .banner-1-datas .banner-1-data {
+  margin-left: 20px;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data img {
+  width: 280px;
+  height: 350px;
+  display: block;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text {
+  background: #0081d2;
+  opacity: 0.9;
+  height: 350px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .hover {
+  display: block;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data:hover .banner-1-data-text .no-hover {
+  display: none;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(180deg, rgba(0, 129, 210, 0) 0%, #0081d2 100%);
+  transition: all 0.3s ease-in-out;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover {
+  padding: 40px 20px 18px;
+  display: block;
+  overflow: hidden;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .banner-1-data-text .no-hover h3 {
+  color: #FFFFFF;
+  font-size: 16px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover {
+  margin: 30px 20px;
+  height: 290px;
+  overflow: hidden;
+  display: none;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover h3 {
+  color: #FFFFFF;
+  font-size: 16px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul {
+  margin-top: 10px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li {
+  margin-top: 10px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li i {
+  height: 7px;
+  width: 7px;
+  border-radius: 50% 50%;
+  background-color: #fff;
+  position: relative;
+  top: 5px;
+}
+.home .banner-1-section .banner-1-datas .banner-1-data .hover ul li span {
+  width: 225px;
+  margin-left: 8px;
+  font-size: 13px;
+  color: #FFFFFF;
+}

css/home/index.css.map

+{"version":3,"sources":["E:/pcb/css/common/base.less","index.less"],"names":[],"mappings":"AAAA;EACE,8BAAA;EACA,0BAAA;;AAGF,IAAK;EACH,UAAA;EACA,8BAAA;EACA,6CAAA;;AAGF;AAAM;EACJ,uBAAA;;AAGF;AAAM;AAAK;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAK;AAAM;AAAM;AAAU;AAAQ;AAAO;AAAU;AAAG;AAAY;AAAI;AAAI;AAAI;AAAQ;AAAS;AAAO;AAAS;AAAY;AAAQ;AAAQ;AAAQ;AAAM;AAAK;EACxN,SAAA;EACA,UAAA;;AAGF;AAAQ;AAAO;AAAQ;EACrB,eAAA;EACA,YAAA;;AAGF,KAAK;AAAe,KAAK;AAAe,KAAK;AAAa;EACxD,eAAA;EACA,wBAAA;;AAGF;EACE,yBAAA;EACA,iBAAA;;AAGF;AAAI;AAAI;EACN,gBAAA;;AAGF;AAAI;AAAI;AAAI;AAAI;AAAI;EAClB,eAAA;EACA,gBAAA;;AAGF;EACE,qBAAA;;AAGF;EACE,YAAA;;AAGF;EACE,QAAA;EACA,WAAA;;AAGF,IAAI;EACF,SAAS,GAAT;EACA,WAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;;AAGF;EACE,WAAA;EACA,gBAAA;;AAGF;EACE,YAAA;EACA,gBAAA;;AAGF;EACE,mBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,aAAA;;AAGF;EACE,cAAA;;AAGF;EACE,qBAAA;EACA,gBAAA;EACA,OAAA;EACA,sBAAA;EACA,oBAAA;;AAGF;EACE,uBAAA;EACA,mBAAA;;AAGF;EACE,iBAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,sBAAA;;AAGF;AAAO;AAAI;AAAI;EACb,mBAAA;;AAGF;EACE,sBAAA;EACA,8BAAA;;AAGF,CAAC;AAAQ,CAAC;EACR,qBAAA;;AAGF;AAAM;EACJ,WAAA;;AAGF;EACE,gBAAA;;ACpIF;EACE,aAAA;EACA,cAAA","file":"index.css"}
\ No newline at end of file

css/home/index.less

+@import '../common/base.less';
+
+.w1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+

css/login/login.css

@@ -134,6 +134,13 @@ img {
   font-size: 0 !important;
   *word-spacing: -1px !important;
 }
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
 label,
 dd,
 dd,

css/login/login.css.map

-{"version":3,"sources":["D:/lxWork/pcb/css/common/base.less","D:/lxWork/pcb/css/common/font/iconfont.less","login.less"],"names":[],"mappings":"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","file":"login.css"}
\ No newline at end of file
+{"version":3,"sources":["login.less","E:/pcb/css/common/base.less"],"names":[],"mappings":"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","file":"login.css"}
\ No newline at end of file

css/piclist/index.css

@@ -134,6 +134,13 @@ img {
   font-size: 0 !important;
   *word-spacing: -1px !important;
 }
+.emptys {
+  margin-left: -1px;
+  width: 1px;
+  height: 100%;
+  font-size: 0;
+  vertical-align: middle;
+}
 label,
 dd,
 dd,
@@ -155,23 +162,138 @@ body {
 body {
   overflow: hidden;
 }
+.w1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+.pic-banner {
+  width: 100%;
+  background: #0081d2;
+  padding: 60px 0 50px 0;
+}
+.pic-banner p {
+  font-size: 38px;
+  color: #ffffff;
+  line-height: 43px;
+  text-align: center;
+  margin-bottom: 21px;
+}
+.pic-banner a {
+  width: 260px;
+  height: 48px;
+  background: #e89721;
+  border-radius: 2px;
+  display: block;
+  margin: 0 auto;
+  font-size: 16px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 48px;
+}
 .pic-list {
   width: 100%;
+  margin-top: 40px;
+}
+.pic-list .list-wrap ul li {
+  float: left;
+  width: 280px;
+  margin-right: 17px;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  background: #ffffff;
+  box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+  border: 1px solid #f0f4f7;
+}
+.pic-list .list-wrap ul li:nth-of-type(4n) {
+  margin-right: 0;
 }
 .pic-list .list-wrap ul li .pic {
   width: 280px;
   height: 200px;
+  margin-bottom: 20px;
 }
 .pic-list .list-wrap ul li .pic img {
   width: 280px;
   height: 200px;
+  vertical-align: middle;
 }
-.pic-list .list-wrap ul li .l img {
+.pic-list .list-wrap ul li .wrap {
+  padding: 0 20px;
+}
+.pic-list .list-wrap ul li .wrap .l img {
   width: 20px;
   height: 15px;
 }
-.pic-list .list-wrap ul li .l span {
+.pic-list .list-wrap ul li .wrap .l span {
   font-size: 13px;
   color: #2b2f33;
 }
+.pic-list .list-wrap ul li .wrap .r .start {
+  width: 16px;
+  height: 16px;
+  background: url("../../images/pic/star.png") no-repeat center;
+}
+.pic-list .list-wrap ul li .wrap .t1 {
+  margin-top: 10px;
+  margin-bottom: 20px;
+  font-size: 11px;
+  color: #828e99;
+}
+.pic-list .list-wrap ul li .wrap .t2 {
+  color: #575e66;
+  font-size: 13px;
+  min-height: 80px;
+}
+.pic-list .list-wrap ul li .wrap .t3 {
+  font-size: 11px;
+  color: #828e99;
+}
+.pic-detail {
+  background: #FFFFFF;
+}
+.pic-detail .pic-detail-head {
+  padding: 40px 60px 40px 60px;
+  border-bottom: 1px solid #F0F4F7;
+}
+.pic-detail .pic-detail-head .l .pic {
+  width: 60px;
+  height: 60px;
+  margin-right: 30px;
+}
+.pic-detail .pic-detail-head .l .pic img {
+  width: 60px;
+  height: 60px;
+}
+.pic-detail .pic-detail-head .l .txt .t1 {
+  font-size: 16px;
+  color: #2b2f33;
+  margin-bottom: 10px;
+}
+.pic-detail .pic-detail-head .l .txt .t1 img {
+  width: 20px;
+  height: 14px;
+}
+.pic-detail .pic-detail-head .l .txt .t2 {
+  font-size: 13px;
+  color: #828e99;
+}
+.pic-detail .pic-detail-head .r img {
+  width: 24px;
+  height: 24px;
+}
+.pic-detail .pic-detail-head .r .t1 {
+  color: #e89721;
+  font-size: 25px;
+}
+.pic-detail .content {
+  padding: 40px;
+  font-size: 16px;
+  color: #2b2f33;
+}
+.pic-detail .content img {
+  padding: 20px;
+  max-width: 100%;
+  margin: 0 auto;
+  display: block;
+}
 /*# sourceMappingURL=index.css.map */
\ No newline at end of file

css/piclist/index.css.map

-{"version":3,"sources":["E:/pcb/css/common/base.less","index.less"],"names":[],"mappings":"AAAA;EACE,8BAAA;EACA,0BAAA;;AAGF,IAAK;EACH,UAAA;EACA,8BAAA;EACA,6CAAA;;AAGF;AAAM;EACJ,uBAAA;;AAGF;AAAM;AAAK;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAI;AAAK;AAAM;AAAM;AAAU;AAAQ;AAAO;AAAU;AAAG;AAAY;AAAI;AAAI;AAAI;AAAQ;AAAS;AAAO;AAAS;AAAY;AAAQ;AAAQ;AAAQ;AAAM;AAAK;EACxN,SAAA;EACA,UAAA;;AAGF;AAAQ;AAAO;AAAQ;EACrB,eAAA;EACA,YAAA;;AAGF,KAAK;AAAe,KAAK;AAAe,KAAK;AAAa;EACxD,eAAA;EACA,wBAAA;;AAGF;EACE,yBAAA;EACA,iBAAA;;AAGF;AAAI;AAAI;EACN,gBAAA;;AAGF;AAAI;AAAI;AAAI;AAAI;AAAI;EAClB,eAAA;EACA,gBAAA;;AAGF;EACE,qBAAA;;AAGF;EACE,YAAA;;AAGF;EACE,QAAA;EACA,WAAA;;AAGF,IAAI;EACF,SAAS,GAAT;EACA,WAAA;EACA,SAAA;EACA,kBAAA;EACA,cAAA;;AAGF;EACE,WAAA;EACA,gBAAA;;AAGF;EACE,YAAA;EACA,gBAAA;;AAGF;EACE,mBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,sBAAA;;AAGF;EACE,aAAA;;AAGF;EACE,cAAA;;AAGF;EACE,qBAAA;EACA,gBAAA;EACA,OAAA;EACA,sBAAA;EACA,oBAAA;;AAGF;EACE,uBAAA;EACA,mBAAA;;AAGF;AAAO;AAAI;AAAI;EACb,mBAAA;;AAGF;EACE,sBAAA;EACA,8BAAA;;AAGF,CAAC;AAAQ,CAAC;EACR,qBAAA;;AAGF;AAAM;EACJ,WAAA;;AAGF;EACE,gBAAA;;AC5HF;EACE,WAAA;;AADF,SAEE,WACE,GACE,GACE;EACE,YAAA;EACA,aAAA;;AAPV,SAEE,WACE,GACE,GACE,KAGE;EACE,YAAA;EACA,aAAA;;AAVZ,SAEE,WACE,GACE,GASE,GACE;EACE,WAAA;EACA,YAAA;;AAhBZ,SAEE,WACE,GACE,GASE,GAKE;EACE,eAAA;EACA,cAAA","file":"index.css"}
\ No newline at end of file
+{"version":3,"sources":["E:/pcb/css/common/base.less","index.less"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file

css/piclist/index.less

 @import '../common/base.less';
 
-.pic-list{
+.w1180 {
+  width: 1180px;
+  margin: 0 auto;
+}
+
+.pic-banner {
   width: 100%;
-  .list-wrap{
-    ul{
-      li{
-        .pic{
+  background: rgba(0, 129, 210, 1);
+  padding: 60px 0 50px 0;
+
+  p {
+    font-size: 38px;
+    color: #ffffff;
+    line-height: 43px;
+    text-align: center;
+    margin-bottom: 21px;
+  }
+
+  a {
+    width: 260px;
+    height: 48px;
+    background: rgba(232, 151, 33, 1);
+    border-radius: 2px;
+    display: block;
+    margin: 0 auto;
+    font-size: 16px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 48px;
+  }
+}
+
+.pic-list {
+  width: 100%;
+  margin-top: 40px;
+
+  .list-wrap {
+    ul {
+      li {
+        float: left;
+        width: 280px;
+        margin-right: 17px;
+        margin-bottom: 20px;
+        padding-bottom: 12px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
+        border: 1px solid rgba(240, 244, 247, 1);
+
+        &:nth-of-type(4n) {
+          margin-right: 0;
+        }
+
+        .pic {
           width: 280px;
           height: 200px;
-          img{
+          margin-bottom: 20px;
+
+          img {
             width: 280px;
             height: 200px;
+            vertical-align: middle;
           }
         }
-        .l{
-          img{
+
+        .wrap {
+          padding: 0 20px;
+
+          .l {
+            img {
               width: 20px;
               height: 15px;
             }
-          span{
+
+            span {
+              font-size: 13px;
+              color: #2b2f33;
+            }
+          }
+
+          .r {
+            .start {
+              width: 16px;
+              height: 16px;
+              background: url("../../images/pic/star.png") no-repeat center;
+            }
+          }
+
+          .t1 {
+            margin-top: 10px;
+            margin-bottom: 20px;
+            font-size: 11px;
+            color: #828e99;
+          }
+
+          .t2 {
+            color: #575e66;
             font-size: 13px;
+            min-height: 80px;
+          }
+
+          .t3 {
+            font-size: 11px;
+            color: #828e99;
+          }
+        }
+      }
+    }
+  }
+}
+
+.pic-detail {
+  background: #FFFFFF;
+
+  .pic-detail-head {
+    padding: 40px 60px 40px 60px;
+    border-bottom: 1px solid #F0F4F7;
+
+    .l {
+      .pic {
+        width: 60px;
+        height: 60px;
+        margin-right: 30px;
+
+        img {
+          width: 60px;
+          height: 60px;
+        }
+      }
+
+      .txt {
+        .t1 {
+          font-size: 16px;
           color: #2b2f33;
+          margin-bottom: 10px;
+
+          img {
+            width: 20px;
+            height: 14px;
+          }
+        }
+
+        .t2 {
+          font-size: 13px;
+          color: #828e99;
         }
       }
     }
+
+    .r {
+      img {
+        width: 24px;
+        height: 24px;
+      }
+
+      .t1 {
+        color: #e89721;
+        font-size: 25px;
+      }
+    }
+  }
+
+  .content {
+    padding: 40px;
+    font-size: 16px;
+    color: #2b2f33;
+    img{
+      padding: 20px;
+      max-width: 100%;
+      margin: 0 auto;
+      display: block;
     }
   }
 }
\ No newline at end of file

faq.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Instant PCB Quote Online - PCB Cost Calculator - ALLPCB.com</title>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
+    <meta name="keywords" content="pcb quote, pcb quote online, instant pcb quote, pcb calculator, pcb cost calculator"/>
+    <meta name="description" content="The instant online pcb quote calculator helps you estimate the pricing of your standard printed circuit boards manufacturing. Quote Now!"/>
+    <meta http-equiv="Pragma" content="public">
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="google-site-verification" content="XNE5qH9_Odx-8pk7VkeHWk62joNlbqzlBa4DzkhC1U4"/>
+    <link href="./css/faq/index.css" rel="stylesheet" type="text/css"/>
+    <script src="./js/jquery.js" type="text/javascript"></script>
+    <script src="js/layer/layer.js" type="text/javascript"></script>
+</head>
+<body>
+<div class="faq-head">
+    <div class="wrap w1180">
+        <p class="t1">
+            <a href="javascript:;">Home</a>
+            <span>></span>
+            <a href="javascript:;">Help Center</a>
+        </p>
+        <p class="t2">How can we help?</p>
+        <div class="search">
+            <input type="text" placeholder="Type key words to find answers">
+            <i class="iconfont  iconshousuo"></i>
+        </div>
+    </div>
+</div>
+
+<div class="faq-content">
+    <div class="w1180">
+        <div class="fl l">
+            <dl>
+                <dt>My Orders <i class="ico"></i></dt>
+                <dd class="curr"><a href="">Placing Orders</a></dd>
+                <dd><a href="">Cancelling Orders</a>
+                <dd><a href="">Leaving Feedback</a></dd>
+            </dl>
+            <dl>
+                <dt>Balance & Coupons <i class="ico"></i></dt>
+                <dd><a href="">Placing Orders</a></dd>
+                <dd><a href="">Cancelling Orders</a></dd>
+                <dd><a href="">Leaving Feedback</a></dd>
+            </dl>
+        </div>
+        <div class="fr r">
+            <p class="tit">Placing Orders</p>
+            <a href="" class="t">How do I place an order?</a>
+            <a href="" class="t">How do I place a pcb order?</a>
+            <a href="" class="t">How do I place a smt/smd stencil order?</a>
+        </div>
+    </div>
+</div>
+
+<a class="chat" href="javascript:;">
+    <i class="iconfont iconxiaoxi va-m"></i>
+    <span>Chat with us!</span>
+    <b class="emptys lineBlock"></b>
+</a>
+
+</body>
+</html>

index.html

 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title></title>
-    <meta name="keywords" content=""/>
-    <meta name="description" content=""/>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
-    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
+    <meta name="keywords" content="" />
+    <meta name="description" content="" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+    <meta name="viewport"
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <link type="favicon" rel="shortcut icon" href="favicon.ico"/>
-    <link rel="stylesheet" type="text/css" href="./css/home/home.css"/>
+    <link type="favicon" rel="shortcut icon" href="favicon.ico" />
+    <link rel="stylesheet" type="text/css" href="./css/home/home.css" />
 </head>
+
 <body>
 
-<div class="home"></div>
+    <div class="home">
+        <div class="common-header common-header-b">
+            <div class="header-width-1180 width-1180 clr">
+                <span  class="title-logo fl"></span>
+                <div class="header-nav fl lbBox">
+                    <a href="" class="lineBlock boxsiz active">Home</a>
+                    <a href="" class="lineBlock boxsiz">PCB Prototype
+                    </a>
+
+                    <a href="" class="lineBlock boxsiz">PCB Assembly
+                    </a>
+
+                    <a href="" class="lineBlock boxsiz">SMT-Stencil
+                    </a>
+
+                    <a href="" class="lineBlock boxsiz">Membrane Switch
+                    </a>
+
+                </div>
+                <div class="fr lbBox">
+                    <a class="car lineBlock">
+                        <span class="car-msg lineBlock boxsiz">1</span>
+                    </a>
+                    <a class="account-btn lineBlock lbBox boxsiz">
+                        <span class="user-icon lineBlock"></span>
+                        <span class="lineBlock account-text">Account</span>
+                        <span class="arrow-down-icon lineBlock"></span>
+                    </a>
+                    <div class="drop-down-menu">
+                        <i class="arrow-top lineBlock"></i>
+                        <h3 class="menu-title">Get started now</h3>
+                        <a href="" class="sign-in-btn menu-btn">Sign In</a>
+                        <a href="" class="join-free-btn menu-btn">Join Free</a>
+                        <ul>
+                            <li><a href="" class="active">My PCBbuy</a></li>
+                            <li><a href="">My Orders</a></li>
+                            <li><a href="">Shipping Address</a></li>
+                            <li><a href="">Balance</a></li>
+                            <li><a href="">Account Settings</a></li>
+                            <li><a href="">My SNS Profile</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="home-header">
+            <div class="width-1180">
+                <h3 class="home-header-title">Full Function Customized PCB Service</h3>
+                <p class="home-header-desc">24 hours quick turnaround PCB prototype.<br /> Delivered directly from our
+                    factory to your door. <br />Fast
+                    shipping from our factory near Hong Kong Aviation Hub.</p>
+                <div class="header-form">
+
+                </div>
+            </div>
+        </div>
+        <div class="home-custom-desc">
+            <div class="width-1180 clr">
+                <div class="section-1 fl lbBox section">
+                    <img src="./images/home/time-icon.png" alt="" class="lineBlock">
+                    <div class="desc lineBlock">
+                        <h3>Ultrafast</h3>
+                        <p>24 Hours Lead Time<br />2-5 Days Delivery Time</p>
+                    </div>
+                </div>
+                <div class="section-2 fl lbBox section">
+                    <img src="./images/home/zs-icon.png" alt="" class="lineBlock">
+                    <div class="desc lineBlock">
+                        <h3>Quality</h3>
+                        <p>A–grade Military Material and Taiyo Ink<br />Equipped with Advanced Machines</p>
+                    </div>
+                </div>
+                <div class="section-3 fl lbBox section">
+                    <img src="./images/home/user-b-icon.png" alt="" class="lineBlock">
+                    <div class="desc lineBlock">
+                        <h3>Service</h3>
+                        <p>24/7 Customer Service and Technical Support<br />One-stop PCB Assembly Service</p>
+                    </div>
+                </div>
+                <!-- <div class="chat-with-btn">
+                    <span class="lineBlock va-m"></span>
+                    Chat with us!
+                </div> -->
+            </div>
+        </div>
+        <div class="home-goods-section">
+            <div class="width-1180">
+                <h3 class="goods-title">You need a superber manufacturer for PCB orders</h3>
+                <p class="goods-desc">
+                    <span>Ultra-fast</span>
+                    <span class="goods-desc-span2">Customized</span>
+                    <span>Customized</span>
+                </p>
+                <div class="goods-list clr">
+                    <div class="good-sigle fl boxsiz">
+                        <img src="./images/home/good-img.png" alt="" class="good-img">
+                        <div class="price-div lbBox">
+                            <div class="price lineBlock ellipsis">$1.99</div>
+                            <div class="text lineBlock ellipsis va-b">at Minimum</div>
+                        </div>
+                        <h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
+                        <div class="good-sigle-params">
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Layers: </div>
+                                <div class="param-value lineBlock ellipsis">1-6</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quantity: </div>
+                                <div class="param-value lineBlock ellipsis">1-1million pcs</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quality: </div>
+                                <div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Material: </div>
+                                <div class="param-value lineBlock ellipsis">FR4</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Lead Time: </div>
+                                <div class="param-value lineBlock ellipsis">48 Hours</div>
+                            </div>
+                        </div>
+                        <div class="computer-section lbBox">
+                            <span class="img lineBlock"></span>
+                            <span class="text lineBlock">Quote now</span>
+                        </div>
+                    </div>
+                    <div class="good-sigle fl boxsiz">
+                        <img src="./images/home/good-img.png" alt="" class="good-img">
+                        <div class="price-div lbBox">
+                            <div class="price lineBlock ellipsis">$1.99</div>
+                            <div class="text lineBlock ellipsis va-b">at Minimum</div>
+                        </div>
+                        <h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
+                        <div class="good-sigle-params">
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Layers: </div>
+                                <div class="param-value lineBlock ellipsis">1-6</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quantity: </div>
+                                <div class="param-value lineBlock ellipsis">1-1million pcs</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quality: </div>
+                                <div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Material: </div>
+                                <div class="param-value lineBlock ellipsis">FR4</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Lead Time: </div>
+                                <div class="param-value lineBlock ellipsis">48 Hours</div>
+                            </div>
+                        </div>
+                        <div class="computer-section lbBox">
+                            <span class="img lineBlock"></span>
+                            <span class="text lineBlock">Quote now</span>
+                        </div>
+                    </div>
+                    <div class="good-sigle fl boxsiz">
+                        <img src="./images/home/good-img.png" alt="" class="good-img">
+                        <div class="price-div lbBox">
+                            <div class="price lineBlock ellipsis">$1.99</div>
+                            <div class="text lineBlock ellipsis va-b">at Minimum</div>
+                        </div>
+                        <h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
+                        <div class="good-sigle-params">
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Layers: </div>
+                                <div class="param-value lineBlock ellipsis">1-6</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quantity: </div>
+                                <div class="param-value lineBlock ellipsis">1-1million pcs</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quality: </div>
+                                <div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Material: </div>
+                                <div class="param-value lineBlock ellipsis">FR4</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Lead Time: </div>
+                                <div class="param-value lineBlock ellipsis">48 Hours</div>
+                            </div>
+                        </div>
+                        <div class="computer-section lbBox">
+                            <span class="img lineBlock"></span>
+                            <span class="text lineBlock">Quote now</span>
+                        </div>
+                    </div>
+                    <div class="good-sigle fl boxsiz">
+                        <img src="./images/home/good-img.png" alt="" class="good-img">
+                        <div class="price-div lbBox">
+                            <div class="price lineBlock ellipsis">$1.99</div>
+                            <div class="text lineBlock ellipsis va-b">at Minimum</div>
+                        </div>
+                        <h3 class="good-sigle-desc ellipsis">Standard PCB Fabrication</h3>
+                        <div class="good-sigle-params">
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Layers: </div>
+                                <div class="param-value lineBlock ellipsis">1-6</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quantity: </div>
+                                <div class="param-value lineBlock ellipsis">1-1million pcs</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Quality: </div>
+                                <div class="param-value lineBlock ellipsis">Standard IPC2/3</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Material: </div>
+                                <div class="param-value lineBlock ellipsis">FR4</div>
+                            </div>
+                            <div class="param lbBox">
+                                <div class="param-text lineBlock ellipsis">Lead Time: </div>
+                                <div class="param-value lineBlock ellipsis">48 Hours</div>
+                            </div>
+                        </div>
+                        <div class="computer-section lbBox">
+                            <span class="img lineBlock"></span>
+                            <span class="text lineBlock">Quote now</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="goods-bottom lbBox">
+                    <div class="goods-bottom-1 goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-1"></div>
+                        <div class="goods-bottom-text">Online Quote</div>
+
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-2"></div>
+                        <div class="goods-bottom-text">Online Quote</div>
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-3"></div>
+                        <div class="goods-bottom-text">Order Review</div>
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-4"></div>
+                        <div class="goods-bottom-text">Payment</div>
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock" style="position: relative;top:17px;">
+                        <div class="goods-bottom-img goods-bottom-img-5"></div>
+                        <div class="goods-bottom-text">Real-time Fabrication<br />Tracking</div>
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-6"></div>
+                        <div class="goods-bottom-text">Delivery</div>
+                    </div>
+                    <div class="goods-bottom-other goods-bottom-div lineBlock">
+                        <div class="goods-bottom-img goods-bottom-img-7"></div>
+                        <div class="goods-bottom-text">Confirm Received</div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div class="map-section">
+            <div class="width-1180 ">
+                <h3 class="map-section-title">Make innovation simpler, faster and more convenient</h3>
+                <p class="map-section-desc">The best one-stop service for global electronic engineers.</p>
+                <div class="map-nums lbBox">
+                    <div class="map-num lineBlock">
+                        <h3>72626</h3>
+                        <p>Paying Customers</p>
+                    </div>
+                    <div class="map-num lineBlock map-num-2">
+                        <h3>38096</h3>
+                        <p>Paid Customers</p>
+                    </div>
+                    <div class="map-num lineBlock">
+                        <h3>2640</h3>
+                        <p>Last 30 days</p>
+                    </div>
+                </div>
+                <div class="map-data clr">
+                    <div class="map-data-left fl">
+                        <div class="title lbBox">
+                            <div class="title-l lineBlock">Latest order</div>
+                            <div class="title-r lineBlock  lbBox">
+                                <span class="count-text lineBlock">Today's new order: </span>
+                                <span class="count lineBlock ellipsis va-b">1699</span>
+                                <b class="lineBlock va-b">↑</b></div>
+
+                        </div>
+                        <div class="data-table">
+                            <div class="data-table-header lbBox">
+                                <div class="table-header-1 lineBlock">Date</div>
+                                <div class="table-header-2 lineBlock">Buyer name</div>
+                                <div class="table-header-3 lineBlock">Pieces</div>
+                                <div class="table-header-4 lineBlock">Progress</div>
+                            </div>
+                            <div class="data-table-body">
+                                <div class="data-table-tr lbBox">
+                                    <div class="table-td-1 lineBlock va-t">01-14</div>
+                                    <div class="table-td-2 lineBlock lbBox">
+                                        <img src="./images/home/mg.png" alt="">
+                                        <span class="lineBlock ellipsis">1111</span>
+                                    </div>
+                                    <div class="table-td-3 lineBlock ellipsis">1</div>
+                                    <div class="table-td-4 lineBlock">
+                                        <div class="progress">
+                                            <div class="active-progress"></div>
+                                            <div class="text-progress">70%</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data-table-tr lbBox">
+                                    <div class="table-td-1 lineBlock va-t">01-14</div>
+                                    <div class="table-td-2 lineBlock lbBox">
+                                        <img src="./images/home/mg.png" alt="">
+                                        <span class="lineBlock ellipsis">1111</span>
+                                    </div>
+                                    <div class="table-td-3 lineBlock ellipsis">10</div>
+                                    <div class="table-td-4 lineBlock">
+                                        <div class="progress">
+                                            <div class="active-progress"></div>
+                                            <div class="text-progress">70%</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data-table-tr lbBox">
+                                    <div class="table-td-1 lineBlock va-t">01-14</div>
+                                    <div class="table-td-2 lineBlock lbBox">
+                                        <img src="./images/home/mg.png" alt="">
+                                        <span class="lineBlock ellipsis">1111</span>
+                                    </div>
+                                    <div class="table-td-3 lineBlock ellipsis">10</div>
+                                    <div class="table-td-4 lineBlock">
+                                        <div class="progress">
+                                            <div class="active-progress"></div>
+                                            <div class="text-progress">70%</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="data-table-tr lbBox">
+                                    <div class="table-td-1 lineBlock va-t">01-14</div>
+                                    <div class="table-td-2 lineBlock lbBox">
+                                        <img src="./images/home/mg.png" alt="">
+                                        <span class="lineBlock ellipsis">1111</span>
+                                    </div>
+                                    <div class="table-td-3 lineBlock ellipsis">10</div>
+                                    <div class="table-td-4 lineBlock">
+                                        <div class="progress">
+                                            <div class="active-progress"></div>
+                                            <div class="text-progress">70%</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="map-data-right fl">
+                        <div class="point-div-1 point-div">
+                            <div class="point-mark"></div>
+                            <div class="point-desc boxsiz">
+                                <h3 class="ellipsis">China</h3>
+                                <div class="descs">
+                                    <div class="desc">
+                                        <span class="text">Files in production: </span>
+                                        <span class="num">42</span class="text">
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">Total number of files: </span class="text">
+                                        <span class="num">5280</span>
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">User Numbers: </span class="text">
+                                        <span class="num">1248</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="point-div-2 point-div">
+                            <div class="point-mark"></div>
+                            <div class="point-desc boxsiz">
+                                <h3 class="ellipsis">China</h3>
+                                <div class="descs">
+                                    <div class="desc">
+                                        <span class="text">Files in production: </span>
+                                        <span class="num">42</span class="text">
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">Total number of files: </span class="text">
+                                        <span class="num">5280</span>
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">User Numbers: </span class="text">
+                                        <span class="num">1248</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="point-div-3 point-div">
+                            <div class="point-mark"></div>
+                            <div class="point-desc boxsiz">
+                                <h3 class="ellipsis">China</h3>
+                                <div class="descs">
+                                    <div class="desc">
+                                        <span class="text">Files in production: </span>
+                                        <span class="num">42</span class="text">
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">Total number of files: </span class="text">
+                                        <span class="num">5280</span>
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">User Numbers: </span class="text">
+                                        <span class="num">1248</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="point-div-4 point-div">
+                            <div class="point-mark"></div>
+                            <div class="point-desc boxsiz">
+                                <h3 class="ellipsis">China</h3>
+                                <div class="descs">
+                                    <div class="desc">
+                                        <span class="text">Files in production: </span>
+                                        <span class="num">42</span class="text">
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">Total number of files: </span class="text">
+                                        <span class="num">5280</span>
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">User Numbers: </span class="text">
+                                        <span class="num">1248</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="point-div-5 point-div">
+                            <div class="point-mark"></div>
+                            <div class="point-desc boxsiz">
+                                <h3 class="ellipsis">China</h3>
+                                <div class="descs">
+                                    <div class="desc">
+                                        <span class="text">Files in production: </span>
+                                        <span class="num">42</span class="text">
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">Total number of files: </span class="text">
+                                        <span class="num">5280</span>
+                                    </div>
+                                    <div class="desc">
+                                        <span class="text">User Numbers: </span class="text">
+                                        <span class="num">1248</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+        <div class="banner-1-section">
+            <div class="width-1180">
+                <h3 class="banner-1-section-title">Chinese Ultrafast PCB & PCBA Manufacturer</h3>
+                <div class="banner-1-datas-div">
+                    <div class="pre-div">
+                        <div></div>
+                    </div>
+                    <div class="next-div">
+                        <div></div>
+                    </div>
+                    <div class="banner-1-datas clr">
+                        <div class="banner-1-data fl">
+                            <img src="./images/home/banner-1.png" alt="">
+                            <div class="banner-1-data-text">
+                                <div class="no-hover boxsiz">
+                                    <h3>High Precision Drilling Machine</h3>
+                                </div>
+                                <div class="hover">
+                                    <h3>High Precision Drilling Machine</h3>
+                                    <ul>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> High-loaded, high precision ball screw</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> Guarantees the stability during performance</span>
+                                        </li>
+                                    </ul>
+                                </div>
+    
+                            </div>
+                        </div>
+                        <div class="banner-1-data fl">
+                            <img src="./images/home/banner-1.png" alt="">
+                            <div class="banner-1-data-text">
+                                <div class="no-hover boxsiz">
+                                    <h3>High Precision Drilling Machine</h3>
+                                </div>
+                                <div class="hover">
+                                    <h3>High Precision Drilling Machine</h3>
+                                    <ul>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> High-loaded, high precision ball screw</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> Guarantees the stability during performance</span>
+                                        </li>
+                                    </ul>
+                                </div>
+    
+                            </div>
+                        </div>
+                        <div class="banner-1-data fl">
+                            <img src="./images/home/banner-1.png" alt="">
+                            <div class="banner-1-data-text">
+                                <div class="no-hover boxsiz">
+                                    <h3>High Precision Drilling Machine</h3>
+                                </div>
+                                <div class="hover">
+                                    <h3>High Precision Drilling Machine</h3>
+                                    <ul>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> High-loaded, high precision ball screw</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> Guarantees the stability during performance</span>
+                                        </li>
+                                    </ul>
+                                </div>
+    
+                            </div>
+                        </div>
+                        <div class="banner-1-data fl">
+                            <img src="./images/home/banner-1.png" alt="">
+                            <div class="banner-1-data-text">
+                                <div class="no-hover boxsiz">
+                                    <h3>High Precision Drilling Machine</h3>
+                                </div>
+                                <div class="hover">
+                                    <h3>High Precision Drilling Machine</h3>
+                                    <ul>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock">Imported Dongtai drilling machine with AC servo motor</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> High-loaded, high precision ball screw</span>
+                                        </li>
+                                        <li class="lbBox">
+                                            <i class="lineBlock va-t"></i>
+                                            <span class="lineBlock"> Guarantees the stability during performance</span>
+                                        </li>
+                                    </ul>
+                                </div>
+    
+                            </div>
+                        </div>
+                    </div>
+                </div>
+              
+            </div>
+          
+
+        </div>
+        <div class="banner-2-section">
+            <div class="width-1180">
+                <h3 class="banner-2-section-title">Feedback</h3>
+                <p class="banner-2-section-desc">View 30,000+ Customers Reviews here.</p>
+                <div class="banner-2-datas-div">
+                    <div class="pre-div">
+                        <div></div>
+                    </div>
+                    <div class="next-div">
+                        <div></div>
+                    </div>
+                    <div class="banner-2-datas clr">
+                        <div class="banner-2-data fl">
+                          <img src="./images/home/banner-2.png" alt="" class="banner-2-data-img">
+                            <div class="banner-2-data-desc boxsiz">
+                                This is my first project on AllPCB
+                            </div>
+                            <div class="banner-2-data-bottom">
+                                <div class="banner-2-data-bottom-left lbBox lineBlock">
+                                    <img src="./images/home/mg.png" alt="" class="lineBlock">
+                                    <span class="lineBlock ellipsis">11111111111</span>
+                                </div>
+                                <div class="banner-2-data-bottom-right lbBox lineBlock">
+                                    <span class="lineBlock"></span>
+                                    <span class="lineBlock"></span>
+
+                                    <span class="lineBlock"></span>
+
+                                    <span class="lineBlock"></span>
+
+                                    <span class="lineBlock"></span>
+
+                                </div>
+                            </div>
+                        </div>
+                        <div class="banner-2-data fl">
+                            <img src="./images/home/banner-2.png" alt="" class="banner-2-data-img">
+                              <div class="banner-2-data-desc boxsiz">
+                                  This is my first project on AllPCB
+                              </div>
+                              <div class="banner-2-data-bottom">
+                                  <div class="banner-2-data-bottom-left lbBox lineBlock">
+                                      <img src="./images/home/mg.png" alt="" class="lineBlock">
+                                      <span class="lineBlock ellipsis">11111111111</span>
+                                  </div>
+                                  <div class="banner-2-data-bottom-right lbBox lineBlock">
+                                      <span class="lineBlock"></span>
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
   
-<script type="text/javascript" src="js/jquery.js"></script>
-<script type="text/javascript" src="js/base.js"></script>
-<script type="text/javascript" src="js/home.js"></script>
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                  </div>
+                              </div>
+                          </div>
+                          <div class="banner-2-data fl">
+                            <img src="./images/home/banner-2.png" alt="" class="banner-2-data-img">
+                              <div class="banner-2-data-desc boxsiz">
+                                  This is my first project on AllPCB
+                              </div>
+                              <div class="banner-2-data-bottom">
+                                  <div class="banner-2-data-bottom-left lbBox lineBlock">
+                                      <img src="./images/home/mg.png" alt="" class="lineBlock">
+                                      <span class="lineBlock ellipsis">11111111111</span>
+                                  </div>
+                                  <div class="banner-2-data-bottom-right lbBox lineBlock">
+                                      <span class="lineBlock"></span>
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                  </div>
+                              </div>
+                          </div>
+                          <div class="banner-2-data fl">
+                            <img src="./images/home/banner-2.png" alt="" class="banner-2-data-img">
+                              <div class="banner-2-data-desc boxsiz">
+                                  This is my first project on AllPCB
+                              </div>
+                              <div class="banner-2-data-bottom">
+                                  <div class="banner-2-data-bottom-left lbBox lineBlock">
+                                      <img src="./images/home/mg.png" alt="" class="lineBlock">
+                                      <span class="lineBlock ellipsis">11111111111</span>
+                                  </div>
+                                  <div class="banner-2-data-bottom-right lbBox lineBlock">
+                                      <span class="lineBlock"></span>
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                      <span class="lineBlock"></span>
+  
+                                  </div>
+                              </div>
+                          </div>
+                    </div>
+                </div>
+                <a href="" class="place-orders">Place Orders & Comment</a>
+            </div>
+        </div>
+        <div class="faq-section">
+            <div class="width-1180">
+                <h3>FAQ</h3>
+                <div class="faq-datas">
+                    <div class="faq-datas-div clr">
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        <div class="faq-data fl">
+                            <p class="title">Can I quickly re-order what I have already ordered?</p>
+                            <p class="desc">
+                                1. If all parameters except for quantity are the same, you can directly re-order in “My orders - Completed”. But please kindly note that the final price is determined after reviewing. 
+                                <span>+MORE</span>
+                            </p>
+
+                        </div>
+                        
+
+                    </div>
+                    <div class="learn-more">Learn More >></div>
+                </div>
+            </div>
+        </div>
+        <div class="common-footer">
+           
+                <div class="footer-top">
+                    <div class="width-1180 clr">
+                        <div class="footer-top-data-1 footer-top-data fl">
+                            <h3>Products & Service</h3>
+                            <p>PCB Capabilities</p>
+                            <p>Aluminum PCB Service</p>
+                            <p>PCB Assembly Service</p>
+                            <p>SMT-Stencil</p>
+                        </div>
+                        <div class="footer-top-data-other footer-top-data fl">
+                            <h3>Quotation & Feedback</h3>
+                            <p>Online Auto-Quotation</p>
+                            <p>PCB Assembly Quote</p>
+                            <p>Quote by Salesperson</p>
+                            <p>Customer Reviews</p>
+                        </div>
+                        <div class="footer-top-data-other footer-top-data fl">
+                            <h3>Customer Support</h3>
+                            <p>FAQ</p>
+                            <p>Community</p>
+                            <p>Sponsorship</p>
+                            <p>Referral Program</p>
+                        </div>
+                        <div class="footer-top-data-other footer-top-data fl">
+                            <h3>About Us</h3>
+                            <p>About Us</p>
+                            <p>Why Us</p>
+                            <p>Contact Us</p>
+                            <p>News</p>
+                        </div>
+                        <div class="footer-top-data-other footer-top-data fl">
+                            <h3>Resource Details</h3>
+                            <p>PCB Software</p>
+                            <p>Units Conversion</p>
+                        </div>
+                        <div class="fr footer-top-right">
+                            <div>
+                                <span class="lineBlock va-m">
+                                    <i class="lineBlock"></i>
+                                </span>
+                                service@pcbbuy.com
+                            </div>
+                            <p>&#169 2020 PCBbuy. All rights reserved</p>
+                        </div>
+                    </div>
+
+                </div>
+                <div class="footer-bottom">
+                    <div class="width-1180 clr">
+                        <div class="fl">
+                            Certification：
+                            <img src="./images/home/bottom-1-icon.png" alt=""  class="va-m">
+                        </div>
+                        <div class="fr">
+                            Our Preferred Partners:
+                            <img src="./images/home/bottom-2-icon.png" alt="" class="va-m">
+                        </div>
+                    </div>
+                </div>
+            
+        </div>
+    </div>
+
+        <script type="text/javascript" src="js/jquery.js"></script>
+        <script type="text/javascript" src="js/base.js"></script>
+        <script type="text/javascript" src="js/home.js"></script>
 </body>
+
 </html>
\ No newline at end of file

picdetail.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Instant PCB Quote Online - PCB Cost Calculator - ALLPCB.com</title>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
+    <meta name="keywords" content="pcb quote, pcb quote online, instant pcb quote, pcb calculator, pcb cost calculator"/>
+    <meta name="description" content="The instant online pcb quote calculator helps you estimate the pricing of your standard printed circuit boards manufacturing. Quote Now!"/>
+    <meta http-equiv="Pragma" content="public">
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="google-site-verification" content="XNE5qH9_Odx-8pk7VkeHWk62joNlbqzlBa4DzkhC1U4"/>
+    <link href="./css/piclist/index.css" rel="stylesheet" type="text/css"/>
+    <script src="./js/jquery.js" type="text/javascript"></script>
+    <script src="js/layer/layer.js" type="text/javascript"></script>
+</head>
+<body style="background: #F0F4F7;">
+<div class="pic-detail w1180">
+    <div class="pic-detail-head clr">
+        <div class="fl l">
+            <div class="pic lineBlock va-m">
+                <img src="./images/banner/picbanner.jpg" alt="">
+            </div>
+            <div class="txt lineBlock va-m">
+                <p class="t1">
+                    <span>garpunchik</span>
+                    <img src="./images/country/dhl.gif" alt="">
+                </p>
+                <p class="t2">Reviews Time: 09/18/2019 14:29:07 PM</p>
+            </div>
+        </div>
+        <div class="fr r">
+            <div class="lineBlock">
+                <img src="./images/pic/star.png" alt="">
+                <img src="./images/pic/star.png" alt="">
+                <img src="./images/pic/star.png" alt="">
+                <img src="./images/pic/star.png" alt="">
+                <img src="./images/pic/star.png" alt="">
+            </div>
+            <span class="lineBlock t1">5.0</span>
+        </div>
+    </div>
+    <div class="content">
+        <p>Best quality , Best price and Best speed , thank you so much</p>
+        <img src="./images/pic/1.png " alt="">
+    </div>
+</div>
+</body>
+</html>

piclist.html

@@ -15,14 +15,65 @@
     <script src="js/layer/layer.js" type="text/javascript"></script>
 </head>
 <body>
-
+<div class="pic-banner">
+    <p>Unforgettable PCB Starts with PCBBUY!</p>
+    <a href="javascript:;" class="btn">Place Orders & Comment</a>
+</div>
 <div class="pic-list">
-    <div class="list-wrap">
-        <ul>
+    <div class="list-wrap w1180">
+        <ul class="clr">
+            <li>
+                <a href="">
+                    <div class="pic">
+                        <img src="./images/pic/1.png" alt="">
+                    </div>
+                    <div class="wrap">
+                        <div class="clr">
+                            <div class="fl l">
+                                <img src="./images/pic/11.png" alt="" class="lineBlock">
+                                <span class="t1">D****de</span>
+                            </div>
+                            <div class="fr r">
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                            </div>
+                        </div>
+                        <p class="t1">Reviews Time: 09/18/2019 14:29:07 PM</p>
+                        <p class="t2">лучший сервис по изготовлению печатных плат в Китае</p>
+                        <p class="t3">(202 mm * 771 mm ,1.6 ,4 Layers) Number: 15 PCS</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <div class="pic">
+                        <img src="./images/pic/1.png" alt="">
+                    </div>
+                    <div class="wrap">
+                        <div class="clr">
+                            <div class="fl l">
+                                <img src="./images/pic/11.png" alt="" class="lineBlock">
+                                <span class="t1">D****de</span>
+                            </div>
+                            <div class="fr r">
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                            </div>
+                        </div>
+                        <p class="t1">Reviews Time: 09/18/2019 14:29:07 PM</p>
+                        <p class="t2">лучший сервис по изготовлению печатных плат в Китае</p>
+                        <p class="t3">(202 mm * 771 mm ,1.6 ,4 Layers) Number: 15 PCS</p>
+                    </div>
+                </a>
+            </li>
             <li>
+                <a href="">
                     <div class="pic">
                         <img src="./images/pic/1.png" alt="">
                     </div>
+                    <div class="wrap">
                         <div class="clr">
                             <div class="fl l">
                                 <img src="./images/pic/11.png" alt="" class="lineBlock">
@@ -34,6 +85,57 @@
                                 <i class="lineBlock start"></i>
                             </div>
                         </div>
+                        <p class="t1">Reviews Time: 09/18/2019 14:29:07 PM</p>
+                        <p class="t2">лучший сервис по изготовлению печатных плат в Китае</p>
+                        <p class="t3">(202 mm * 771 mm ,1.6 ,4 Layers) Number: 15 PCS</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <div class="pic">
+                        <img src="./images/pic/1.png" alt="">
+                    </div>
+                    <div class="wrap">
+                        <div class="clr">
+                            <div class="fl l">
+                                <img src="./images/pic/11.png" alt="" class="lineBlock">
+                                <span class="t1">D****de</span>
+                            </div>
+                            <div class="fr r">
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                            </div>
+                        </div>
+                        <p class="t1">Reviews Time: 09/18/2019 14:29:07 PM</p>
+                        <p class="t2">лучший сервис по изготовлению печатных плат в Китае</p>
+                        <p class="t3">(202 mm * 771 mm ,1.6 ,4 Layers) Number: 15 PCS</p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="">
+                    <div class="pic">
+                        <img src="./images/pic/1.png" alt="">
+                    </div>
+                    <div class="wrap">
+                        <div class="clr">
+                            <div class="fl l">
+                                <img src="./images/pic/11.png" alt="" class="lineBlock">
+                                <span class="t1">D****de</span>
+                            </div>
+                            <div class="fr r">
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                                <i class="lineBlock start"></i>
+                            </div>
+                        </div>
+                        <p class="t1">Reviews Time: 09/18/2019 14:29:07 PM</p>
+                        <p class="t2">лучший сервис по изготовлению печатных плат в Китае</p>
+                        <p class="t3">(202 mm * 771 mm ,1.6 ,4 Layers) Number: 15 PCS</p>
+                    </div>
+                </a>
             </li>
         </ul>
     </div>