/*羌頵��������*/
::-webkit-scrollbar {width: 5px;height: 5px;}
::-webkit-scrollbar-button:vertical {display: none}
::-webkit-scrollbar-track:vertical {background-color: black}
::-webkit-scrollbar-track-piece {background: #cacaca}
::-webkit-scrollbar-thumb:vertical {background-color: #0051a9;border-radius: 30px}
::-webkit-scrollbar-thumb:vertical:hover {background-color: #0051a9}
::-webkit-scrollbar-corner:vertical {background-color: #535353}
::-webkit-scrollbar-resizer:vertical {background-color: #0051a9}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') 
	  format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') 
	  format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') 
	  format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') 
	  format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') 
	  format('svg');
  font-weight: normal;
  font-style: normal;
}

[class*=icon] {
  font-family: iconfont !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.toutu img {
  width: 100%
}
.clearfix {
  position: relative
}
.clearfix:after {
  content: '';
  display: block;
  clear: both
}
a, body, button, dd, dl, dt, h1, h2, h3, h4, h5, i, img, input, li, ol, p, select, span, strong, textarea, ul {
  margin: 0;
  padding: 0;
  word-wrap: break-word
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400
}
body {
  font-family: Arial, "microsoft yahei";
  font-size: 14px;
  line-height: 1;
  color: #333
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
li {
  list-style-type: none;
  float: left
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
a, area {
  text-decoration: none;
  outline: 0;
  color: #000
}
img {
  border: none;
  vertical-align: middle
}
em, i, var {
  font-style: normal
}
button {
  font-family: Arial, "microsoft yahei";
  font-size: 14px;
  outline: 0;
  cursor: pointer;
  border: none;
  line-height: 1
}
input[type=submit] {
  border: none
}
iframe {
  border: none
}
input, select, textarea {
  outline: 0;
  font-family: Arial, "microsoft yahei";
  font-size: 14px
}
textarea {
  resize: none;
  overflow-y: auto
}
.at {
  margin: 0 auto
}
.fl {
  float: left
}
.fr {
  float: right
}
.clear {
  clear: both
}
.dt {
  display: table;
  width: 100%
}
.fl-w {
  float: left;
  width: 100%
}
.hide {
  display: none
}
.ver-container {
  display: table;
  width: 100%;
  text-align: center
}
.ver-container > * {
  vertical-align: middle;
  display: table-cell
}
.swiper-button-disabled {
  cursor: no-drop !important;
  opacity: .5
}
[class*=icon] {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
[class*=ico] {
  vertical-align: middle;
  display: inline-block
}
.wid {
  width: 1200px;
  margin: 0 auto
}
.top {
  padding-left: 4.583333333333334vw;
  padding-right: 4.583333333333334vw;
  padding-top: 2.135416666666667vw;
  padding-bottom: 2.135416666666667vw;
  position: fixed;
  z-index: 2;
  background: #fff;
  width: 100%;
}
.top .logo {
  float: left;
  margin-top: 4px
}
.top .logo img {
  width: 6.510416666666667vw
}
.top .menu {
  float: right
}
.top .menu ul li {
  margin-left: 3.125vw;
  position: relative
}
.top .menu ul li:hover .sub {
  display: block
}
.top .menu ul li > a {
  font-size: calc(14px + (29 - 18) * ((100vw - 320px)/ (1920 - 320)));
  color: #000;
  transition: color .15s;
  position: relative;
  padding-bottom: 10px
}
.top .menu ul li > a:after {
  content: '';
  background: linear-gradient(90deg, transparent, #cbcbca, transparent);
  height: 2px;
  position: absolute;
  bottom: 0;
  width: 100%;
  display: none
}
.top .menu ul li > a .active, .top .menu ul li > a:hover {
  color: #000
}
.top .menu ul li > a .active:after, .top .menu ul li > a:hover:after {
  display: block
}
.top .menu ul li .sub {
  position: absolute;
  display: none;
  left: 50%;
  transform: translateX(-50%)
}
.top .menu ul li .sub .layout {
  background: linear-gradient(to bottom, #fff, #d2d0d0);
  padding-top: .520833333333333vw;
  padding-bottom: .520833333333333vw;
  box-shadow: 0 0 14px rgba(0, 0, 0, .2);
  margin-top: 10px
}
.top .menu ul li .sub .layout a {
  text-align: center;
  display: block;
  font-size: calc(14px + (20 - 14) * ((100vw - 320px)/ (1920 - 320)));
  color: #5a5a5a;
  line-height: 2;
  transition: color .2s;
  padding: 0 14px;
  white-space: nowrap
}
.top .menu ul li .sub .layout a:hover {
  color: #000
}
.banner img {
  width: 100%
}
.contact {
  text-align: center;
  background: #f7f5f6;
  padding-top: 6.25vw;
  padding-bottom: 8.020833333333334vw
}
.contact h3 {
  font-size: calc(14px + (62 - 20) * ((100vw - 320px)/ (1920 - 320)));
  color: #000
}
.contact .qrcode {
  display: flex;
  justify-content: center;
  margin-top: 3.125vw
}
.contact .qrcode .img:last-child {
  margin-left: 8.489583333333334vw
}
.contact .qrcode .img img {
  width: 9.53125vw
}
.contact .qrcode .img span {
  display: block;
  margin-top: .78125vw;
  font-size: calc(14px + (20 - 14) * ((100vw - 320px)/ (1920 - 320)))
}
.contact .address {
  padding: 0 14%;
  margin-top: 4.114583333333334vw
}
.contact .address img {
  margin-top: 21px;
  width: 100%
}
.contact .address p {
  font-size: calc(14px + (30 - 20) * ((100vw - 320px)/ (1920 - 320)))
}
.footer {
  background: #f8f8f9;
  padding: 5vw 14vw;
  margin-top: 1.8vw;
}
.footer .about {
  float: left;
  width: 12vw;margin-left: 7vw;
}
.footer .about h2 {
  color: #000;
  font-size: calc(12px + (29 - 12) * ((100vw - 320px)/ (1920 - 320)))
}
.footer .about p {
  margin-top: 1.041666666666667vw;
  padding-left: .78125vw
}
.footer .about p a {
  color: #000;
  margin-top: 1.302083333333333vw;
  font-size: calc(12px + (20 - 16) * ((100vw - 320px)/ (1920 - 320)))
}
.footer .qr-code {
  float: left;
  display: flex
}
.footer .qr-code .img {
  text-align: center
}
.footer .qr-code .img:last-child {
  margin-left: 3.541666666666667vw
}
.footer .qr-code .img img {
  width: 4.5vw
}
.footer .qr-code .img span {
  display: block;
  color: #000;
  text-align: center;
  margin-top: .78125vw;
  font-size: calc(12px + (20 - 18) * ((100vw - 320px)/ (1920 - 320)))
}

.footer .link1 {
  float: left;
  display: flex;
  flex-direction: column;
  padding-top: 40px
}
.footer .link1 .logo img {
  width: 10vw
}
.footer .link {
  float: right;
  display: flex;
  flex-direction: column;
  padding-top: 15px
}
.footer .link .logo img {
  width: 22.395833333333336vw
}
.footer .link p {
  display: flex;
  justify-content: space-between;
  margin-top: 20px
}
.footer .link p img {
  width: 2.5vw; margin-left: 2vw;
}
.about-page {
  position: relative;
  padding-left: 7.291666666666667vw
}
.about-page .text {
  display: block;
  z-index: 1;
  width: 50%;
  position: absolute;
 /* left: 13.802083333333334vw;*/
  top: 8.854166666666668vw;
  width: 41vw
}
.about-page .text h1 {
  font-size: calc(14px + (68 - 14) * ((100vw - 320px)/ (1920 - 320)));
  color: #000;
  font-weight: 700
}
.about-page .text p {
  font-size: calc(14px + (27 - 20) * ((100vw - 320px)/ (1920 - 320)));
  line-height: 1.8;
  margin-top: 4.427083333333334vw;
  color: #000
}
.about-page .back {
  position: relative;
  width: 51.71875vw;
  float: right
}
.about-page .back img {
  width: 100%
}
.box-product {
  padding-bottom: 9.375vw
}
.show {
  padding-left: 6.25vw;
  padding-right: 6.25vw;
  margin-top: 5.208333333333334vw
}
.show.mt1 {
  margin-top: 13.125vw
}
.show.mt2 {
  margin-top: 15.625vw
}
.show .mt53 {
  margin-top: 2.760416666666667vw
}
.show .pict {
  width: 51.5625vw;
  position: relative;
  z-index: 1
}
.show .pict img {
  width: 100%
}
.show .text {
  width: 58vw;
  height: 35.677083333333336vw;
  background: #d4cfcf;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 10vw
}
.show .text.fr {
  right: 6.25vw;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  padding-right: 4vw
}
.show .text.fl {
  left: 6.25vw;
  padding-left: 4.0625vw
}
.show .text p {
  font-size: calc(14px + (27 - 22) * ((100vw - 320px)/ (1920 - 320)));
  color: #000
}
.show .text b {
  font-size: calc(14px + (64 - 24) * ((100vw - 320px)/ (1920 - 320)));
  line-height: 2;
  color: #000;
  font-weight: 400;
  display: block
}
.show .text h3 {
  font-size: calc(14px + (64 - 16) * ((100vw - 320px)/ (1920 - 320)));
  color: #000;
  font-weight: 400
}
.product {
  padding-left: 10.572916666666668vw;
  padding-right: 10.572916666666668vw;
  padding-bottom: 8.958333333333334vw
}
.product .item {
  padding-left: 2.291666666666667vw;
  padding-right: 2.291666666666667vw;
  border-radius: 30px;
  margin-top: 8.489583333333334vw;
  position: relative;
  padding-top: 1.666666666666667vw;
  padding-bottom: .9375vw
}
.product .item .title {
  position: absolute;
  top: 3.333333333333333vw
}
.product .item .title .logo {
  font-size: calc(14px + (50 - 14) * ((100vw - 320px)/ (1920 - 320)));
  display: flex;
  align-items: center
}
.product .item .title .logo img {
  width: 10.572916666666668vw;
  margin-right: 10px
}
.product .item .title p {
  font-size: calc(14px + (30 - 14) * ((100vw - 320px)/ (1920 - 320)));
  margin-top: 1vw
}
.product .item.back1 {
  background: linear-gradient(45deg, #fff, #bebebe)
}
.product .item.back2 {
  background: linear-gradient(45deg, #fff, #e1b9ff, #b6d2fc)
}
.product .item.back3 {
  background: linear-gradient(45deg, #fff, #819883)
}
.product .item .pict img {
  width: 100%
}
.loadding {
  text-align: center;
  font-size: calc(14px + (60 - 14) * ((100vw - 320px)/ (1920 - 320)));
  padding: 200px 0
}
.main .item {
  display: flex;
  overflow: hidden
}
.main .pict {
  flex-shrink: 0
}
.main .pict img {
  width: 100%
}
.main .title-text {
  flex-grow: 1
}
.main .title-text h2 {
  font-size: calc(14px + (58 - 18) * ((100vw - 320px)/ (1920 - 320)));
  color: #000
}
.main .title-text p {
  font-size: calc(14px + (33 - 24) * ((100vw - 320px)/ (1920 - 320)));
  color: #000; font-weight:lighter;
  margin-top: 1.875vw; line-height: 1.5;
}
.two-box {
  padding-top: 2.083333333333333vw;
  padding-bottom: 2.083333333333333vw;
  background: linear-gradient(0, #cfcece, #ece8e9)
}
.two-box .title-text {
  padding-top: 19.53125vw
}
.two-box .pict {
  width: 58.07291666666667vw
}
.two-box .pict img {
  width: 100%
}
.three-box {
  background: linear-gradient(0, #cfcdcd, #cfcece);
  padding-top: 9.375vw;
  padding-bottom: 6.041666666666667vw
}
.three-box .title-text {
  padding-left: 7.552083333333334vw;
  margin-top: 14.791666666666668vw
}
.three-box .pict {
  width: 50.989583333333336vw
}
.three-box .pict img {
  width: 100%
}
.one-box {
  background: linear-gradient(0, #ece9e9, #f7f5f7)
}
.one-box .text {
  flex-grow: 1;
  padding-left: 12.5vw;
  padding-top: 9.6875vw
}
.one-box .text h3 {
  font-size: calc(14px + (58 - 18) * ((100vw - 320px)/ (1920 - 320)));
  color: #000
}
.one-box .text .t {
  display: flex;
  align-items: flex-end;
  padding-top: 3.125vw;
  padding-bottom: 3.125vw;
  position: relative
}
.one-box .text .t:after {
  content: '';
  position: absolute;
  width: 20.833333333333336vw;
  height: 3px;
  bottom: 0;
  background: linear-gradient(90deg, transparent, #bebebe, transparent)
}
.one-box .text .t b {
  font-size: calc(14px + (58 - 18) * ((100vw - 320px)/ (1920 - 320)));
  line-height: 1; font-weight: normal;
  color: #000
}
.one-box .text .t span {
  font-size: calc(14px + (40 - 26) * ((100vw - 320px)/ (1920 - 320)));
  line-height: 1;
  color: #000;
  margin-left: 10px
}
.one-box .pict {
  width: 46.71875vw
}
.swiper {
  width: 100%;
  height: 100%
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}