* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #000;
}

html {
  font-size: calc(0.208vw + 12px);
}

img,
video {
  max-width: 100%;
}

video {
  width: 100%;
}

input,
textarea {
  outline: unset;
  resize: none;
  border: 0;
}

.main {
  max-width: calc(73.57% + 200px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-layout {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.position-ab-top {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor-pointer {
  cursor: pointer;
}

.not-select {
  user-select: none;
}

.lay-banner {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.lay-icon {
  width: 48px;
  height: 48px;
  background-color: #f08200;
  border: 1px solid #f08200;
  border-radius: 50%;
  transition: background-color .3s;
}

.lay-icon:hover {
  background-color: transparent;
}

.lay-icon:hover svg path {
  fill: #f08200;
}

.change-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #f08200;
  transition: background-color .3s;
}

.change-icon:hover {
  background-color: #f08200;
}

.change-icon:hover svg path {
  fill: #fff;
}

.lay-btn {
  height: calc(48rem / 16);
  padding: 0 calc(37rem / 16);
  border-radius: calc(24rem / 16);
  color: #f08200;
  background-color: #fff;
  transition: background-color .3s;
}

.lay-btn:hover {
  background-color: #f08200;
  color: #fff;
}

.lay-navigation {
  width: calc(48rem / 16);
  height: calc(48rem / 16);
  border-radius: 50%;
  border: 1px solid #fff;
}


.swiper,
.swiper-wrapper,
.swiper-slide {
  height: 100%;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}

header .logo {
  margin-right: calc(58rem / 16);
  height: 80px;
}

header .nav .f-li {
  height: 100%;
  padding-right: calc(60rem / 16);
  position: relative;
}

header .nav .f-li>a {
  height: 100%;
  display: block;
  line-height: 80px;
}

header .nav .f-li a:hover,
header .nav .f-li a.active {
  color: #f08200;
  /* border-bottom: 2px solid #f08200 ; */
}

header .search {
  line-height: 1;
}

header .search img {
  margin-right: calc(14rem / 16);
}

header .product-sec-ul {
  position: absolute;
  top: 100%;
  left: 0;
  height: 0;
  visibility: hidden;
}

header .product-sec-ul::after {
  content: '';
  background-color: #f6f6f6;
  position: absolute;
  top: 0;
  left: -100vw;
  width: 200vw;
  height: 100%;
  z-index: -1;
}

header .product-sec-ul li {
  position: relative;
  width: 15.5vw;
}

header .product-sec-ul li .pic {
  position: absolute;
  top: calc(20rem / 16);
  left: 140%;
  width: 120%;
}

header .product-sec-ul a {
  padding: calc(20rem / 16) calc(5rem / 16);
  border-bottom: 1px solid #d1d1d1;
  font-size: 14px;
}

header .product-sec-ul a:hover svg path {
  fill: #f08200;
}

header .product-f-li:hover .product-sec-ul {
  height: auto;
  padding-top: calc(20rem / 16);
  padding-bottom: calc(40rem / 16);
  z-index: 10000;
  visibility: visible;
  transition: .3s;
}

footer {
  background-color: #000;
  color: #fff;
}

footer a {
  color: #fff;
}

footer .footer-l {
  padding: calc(100rem / 16) calc(5% + 50px) calc(30rem / 16) 0;
  width: 58%;
  border-right: 1px solid rgba(255, 255, 255, .5);
  position: relative;
}

footer .footer-l::after {
  content: '';
  width: 1px;
  height: 30%;
  position: absolute;
  top: 0;
  right: -1px;
  background-color: #f08200;
}

footer .footer-l .info {
  flex-wrap: wrap;
  margin-bottom: calc(200rem / 16);
}

footer .footer-l .info .item {
  width: 50%;
  margin-bottom: calc(46rem / 16);
  padding-left: calc(20rem / 16);
}

footer .footer-l .info .item .title {
  font-size: calc(18rem / 16);
  margin-bottom: calc(20rem / 16);
}

footer .footer-l .info .item .intro {
  color: #737373;
}

footer .footer-l .share .item {
  background-color: #666;
  margin-right: calc(10rem / 16);
  border: 0;
}

footer .footer-r {
  flex: 1;
  justify-content: space-between;
  padding-left: calc(5% + 50px);
}

footer .footer-r .nav {
  flex-direction: column;
}

footer .footer-r .nav .item {
  font-size: calc(28rem / 16);
  margin-bottom: calc(10rem / 16);
}

footer .footer-r .nav .item.active,
footer .footer-r .nav .item:hover {
  color: #f08200;
}

footer .footer-r .qr .pic img {
  width: calc(140rem / 16);
  margin-top: calc(30rem / 16);
}

.copyright {
  padding: calc(32rem / 16) 0;
  color: rgba(255, 255, 255, .5);
  background-color: #000;
  border-top: 1px solid rgba(255, 255, 255, .5);
}

.copyright a {
  color: rgba(255, 255, 255, .5);
}

.copyright a:hover {
  color: rgba(255, 255, 255, 1);
}



.beark {
  margin-top: 80px;
  color: #999999;
  border-top: 1px solid rgba(0, 0, 0, .2);
}

.beark-l {
  width: 67%;
}

.beark-r {
  padding: calc(23rem / 16) 0;
  padding-left: calc(30rem / 16);
  border-left: 1px solid rgba(0, 0, 0, .2);
}

.beark-r .icon,
.beark-r .icon img {
  margin-right: calc(8rem / 16);
}

.common-banner {
  height: 66vh;
}

.common-banner .txt {
  position: absolute;
  top: 40%;
  left: 10%;
  color: #fff;
}

.common-banner .title {
  font-size: calc(48rem / 16);
  margin-bottom: calc(48rem / 16);
}

.common-banner .intro {
  font-size: calc(24rem / 16);
  max-width: calc(523rem / 16);
  line-height: calc(35rem / 16);
}

.secont-nav {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.secont-nav-cont a {
  color: #666;
  padding: calc(34rem / 16) 0;
  /* margin-right: calc(100rem / 16); */
  margin-right: 6.25%;
  position: relative;
  flex-direction: column;
}

.secont-nav-cont a.active,
.secont-nav-cont a:hover {
  color: #f08200;
}

.secont-nav-cont a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
}

.secont-nav-cont a.active::after {
  background-color: #f08200;
}

.lay-l-r-cont {
  padding: calc(100rem / 16) 0;
  display: flex;
  justify-content: space-between;
}

.lay-l-r .lay-r {
  width: 69%;
}

.lay-l-r .lay-l .title {
  font-size: calc(32rem / 16);
  margin-bottom: calc(35rem / 16);
}

.card {
  width: calc((100% - 30rem / 16 * 2) / 3);
  padding: calc(40rem / 16) calc(30rem / 16);
  margin-right: calc(30rem / 16);
  margin-bottom: calc(30rem / 16);
  background-color: #fff;
}

.card:nth-child(3n) {
  margin-right: 0;
}

.card>div {
  margin-bottom: calc(20rem / 16);
}

.card .title {
  font-weight: bold;
}

.card .pic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgc-1 {
  background-color: #f1f1f1;
}

.color-w {
  color: #fff;
}

.sidebar {
  width: 48px;
  position: fixed;
  bottom: calc(30rem / 16);
  right: calc(24rem / 16);
  z-index: 9999;
}

.sidebar .contact {
  flex-direction: column;
  background-color: #fff;
  margin-bottom: calc(20rem / 16);
  border-radius: calc(24rem / 16);
  padding: calc(30rem / 16) 0;
}

.sidebar .contact .item {
  flex-direction: column;
}

.sidebar .contact .item:first-child {
  margin-bottom: calc(20rem /16);
}

.sidebar .contact .item:last-child {
  margin-bottom: 0;
}

.sidebar .contact .item img {
  margin-bottom: 5px;
}

.sidebar #backToTop {
  visibility: hidden;
  transition: .3s;
}

.bgc-f5 {
  background-color: #f5f5f5;
}


body.wfEditorMode a.wfEditorMode{
  margin-top: 0.7em;
}