@charset "utf-8";
 CSS Document 
@font-face {
  src: url("/resource/fonts/OPPOSans-R.ttf");
  font-family: "myfont";
}
@font-face {
  src: url("../font/OPPOSans-M.ttf");
  font-family: "title";
}
@font-face {
  src: url("/resource/fonts/Poppins-Black.otf");
  font-family: "num";
}
* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  list-style: none;
  font-family: "myfont", sans-serif;
  box-sizing: border-box;
}
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot");
  src: url("../font/iconfont.eot") format("embedded-opentype"),
    url("../font/iconfont.woff") format("woff"),
    url("../font/iconfont.ttf") format("truetype"),
    url("../font/iconfont.svg") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  list-style: none;
}
img {
  width: 100%;
  display: block;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
dir,
section {
  margin: 0;
  padding: 0;
  display: block;
}
.clear {
  clear: both;
}
a {
  text-decoration: none;
}
input,
button {
  background: none;
  border: none;
  box-shadow: none;
}
/*index*/
.w_all {
  width: 80%;
  margin: 0 auto;
  position: relative;
}
.w_all2 {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
.w_all3 {
  width: 100%;
  margin: auto;
  position: relative;
}

.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}
.w100p10 {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  position: relative;
}
.pt5 {
  padding-top: 5%;
  padding-bottom: 5%;
}
.font18 p {
  font-size: 1.8rem;
}

html,
body {
  width: 100%;
  position: relative;
  font-size: 62.5%;
  --height: 100px;
  --colors: #FFB202;
}

/* 导航 Strat */
header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

header.active {
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

header.active2 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
header.scroll {
  --height: 80px;
}
header nav {
  width: 100%;
  padding: 0 4rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

header .logo img {
  height: 32px;
  width: auto;
}

header .logo img:last-of-type {
  display: none;
}

header.active .logo img {
  display: none;
}

header.active .logo :last-of-type {
  display: block;
}

header.active2 .logo img {
  display: none;
}

header.active2 .logo :last-of-type {
  display: block;
}

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

header nav ul {
  display: flex;
}

header nav ul li {
  position: relative;
  padding: 0 3rem;
}

header nav ul li > a {
  display: block;
  color: #fff;
  font-size: 1.8rem;
  line-height: var(--height);
  font-family: "title";
  letter-spacing: 1px;
  transition: all 0.4s ease;
}

header nav ul li::before {
  content: "";
  width: 0;
  height: 4px;
  background: var(--colors);
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  transition: all 0.4s ease;
}

header nav ul li:hover::before {
  width: 100%;
}

header nav ul li:hover > a {
  color: var(--colors) !important;
}

header.active ul li > a {
  color: rgba(0, 0, 0, 0.8);
}

header.active2 ul li > a {
  color: rgba(0, 0, 0, 0.8);
}

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

/* header .others .language {
  color: #fff;
  line-height: var(--height);
  font-size: 1.6rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 4rem;
  margin: 0 4rem 0 3rem;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.3s linear;
}

header.active .others .language {
  color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

header.active2 .others .language {
  color: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

header .language span {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #fff;
  margin-left: 2rem;
}

header .language .lls {
  position: absolute;
  left: 0;
  top: var(--height);
  background: #5c3321;
  width: 100%;
  text-align: center;
  padding: 2rem 0;
  display: none;
}

header .language .lls a {
  display: block;
  padding: 1rem 0;
  line-height: 1;
  color: #fff;
}

header .language.active {
  background: #5c3321;
  color: #fff !important;
}

header .language.active span {
  border-top-color: #fff !important;
}

header.active .language span {
  border-top: 6px solid #333;
}

header.active2 .language span {
  border-top: 6px solid #333;
} */
header  .others .language{
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0 4rem;
  margin: 0 4rem 0 3rem;
  line-height: var(--height);
  position: relative;
  cursor: pointer;
}
header  .others .language a {
  display: flex;
  align-items: center;
}
header  .others .language i {
  width: 28px;
  height: 28px;
  display: block;
  margin-right: 10px;
}
header  .others .language i img{
   width: 100%;
   height: 100%;
}
header  .others .language span {
  font-size: 1.6rem;
  color: #fff;
}
header.active .language i img{
  -webkit-filter:  invert(1);
  filter: invert(1);
}
header.active .language span{
  color: #333;
}

header .sBg {
  position: fixed;
  display: none;
  top: var(--height);
  height: 70px;
  left: 0%;
  width: 100%;
  /* background: rgba(255, 255, 255, 0.9); */
}

header .s_menu {
  position: fixed;
  display: none;
  top: var(--height);
  left: 0%;
  width: 100%;
  z-index: 8;
  background: rgba(255, 255, 255, 0.9);
}

header .s_menu dl {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

header .s_menu dd a {
  font-size: 1.6rem;
  padding: 2.2rem 3rem;
  display: block;
  cursor: pointer;
  color: #1a1a1a;
  transition: all 0.3s linear;
}

header .s_menu dd a:hover {
  color: var(--colors);
}

header .navBtn {
  position: relative;
  z-index: 999999;
  cursor: pointer;
  display: block;
}

header.active .navBtn span {
  background: rgba(0, 0, 0, 0.8);
}

header.active2 .navBtn span {
  background: rgba(0, 0, 0, 0.8);
}

header .navBtn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 6px auto;
}

header .nav_btn_active {
  margin-top: 4px;
}
header .nav_btn_active span {
  background: #333;
}
header .nav_btn_active span:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

header .nav_btn_active span:nth-of-type(2) {
  opacity: 0;
}

header .nav_btn_active span:nth-of-type(3) {
  margin-top: -66%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

header .s_menu2 {
  position: fixed;
  display: none;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  background: rgba(255, 255, 255, 1);
}

header .s_menu2 .ss2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}

header .s_menu2 .ss2 dl {
  width: 25%;
  color: #333;
  border-right: 1px solid #eee;
  padding-left: 8%;
}

header .s_menu2 .ss2 dl:last-of-type {
  border-right: none;
}

header .s_menu2 .ss2 h6 {
  color: var(--colors);
  font-size: 2.8rem;
  font-family: "title";
  margin-bottom: 2rem;
}

header .s_menu2 .ss2 dl dt {
  color: #333;
  font-size: 2.4rem;
  font-family: "title";
  margin-bottom: 5rem;
  letter-spacing: 2px;
  font-weight: bold;
}

header .s_menu2 .ss2 dl dd {
  color: #333;
  font-size: 1.8rem;
  margin: 2rem 0;
  letter-spacing: 1px;
  opacity: 0.8;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

header .s_menu2 .ss2 dl dd:hover {
  opacity: 1;
  color: var(--colors);
}

/* 导航 End*/

/* banner Strat */
.banner {
  position: relative;
  width: 100%;
  height: 100vh;
}
.banner .swiper {
  width: 100%;
  height: 100%;
}
.banner .swiper .imgBox {
  width: 100%;
  height: 100%;
}
.banner .swiper .imgBox img {
  width: 100%;
  height: 100%;
}
.banner .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 100%;
  transition: 1s linear 2s;
  transform: scale(1.1, 1.1);
}
.banner .swiper .swiper-slide-active img,
.banner .swiper .swiper-slide-duplicate-active img {
  transition: 6s linear;
  transform: scale(1, 1);
}
.banner .swiper .swiper-pagination-bullet {
  background: #fff;
}
.banner .swiper .swiper-horizontal > .swiper-pagination-bullets,
.banner .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.banner .swiper .swiper-pagination-custom,
.banner .swiper .swiper-pagination-fraction {
  bottom: 24px;
}
.banner .swiper .videoBox{
  width: 100%;
  height: 100%;
  position: relative;
}
.banner .swiper .videoBox video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .txtBox {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
}
.banner .txtBox h1 {
  font-size: 5.4rem;
  color: #fff;
  font-weight: normal;
  padding-bottom: 15px;
  position: relative;
}
.banner .txtBox h1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 2px;
  background: #4d7290;
}
.banner .txtBox h2 {
  font-size: 3.2rem;
  font-weight: normal;
  color: #fff;
  margin-top: 24px;
}
.banner .swiper .mobileImg{
  display: none;
}
/* banner End*/

/* 首页--关于 Strat */
.home {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.home .i_part1 {
  width: 100%;
  position: relative;
  padding-left: 10%;
  /* margin-top: 5%; */
}
.home .i_part1 .box {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home .i_part1 .box::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 48px;
  height: 5px;
  background-color: #333;
}
.home .i_part1 .txtBox {
  width: 26%;
  position: relative;
  z-index: 2;
}
.home .i_part1 .videoBox {
  position: relative;
  width: 70%;
  display: flex;
  z-index: 1;
}
.home .i_part1 .videoBox .ll {
  width: 80%;
  position: relative;
}
.home .i_part1 .videoBox .rr {
  width: 20%;
  position: relative;
}
.home .i_part1 .overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.home .i_part1 .video-popup {
  display: none;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

.home .i_part1 .video-popup video {
  width: 100%;
  height: 100%;
  position: relative;
}
.home .i_part1 .close-button {
  position: absolute;
  top: 5%;
  right: 3%;
  cursor: pointer;
  background-image: url("../image/closeIcon.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 3rem;
  height: 3rem;
}
.home .i_part1 .v_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 5.4rem;
  height: 5.4rem;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1rem rgb(256, 256, 256, 0.3);
}
.home .i_part1 .v_btn img {
  width: 100%;
  height: 100%;
  padding: 1.7rem;
}
.home .i_part1 .videoBox .ll video {
  width: 100%;
  object-fit: cover;
  position: relative;
}
.home .i_part1 .txtBox .tit strong {
  font-size: 3.8rem;
  font-family: "title";
  color: var(--colors);
  line-height: 1.25;
  display: block;
  text-transform: uppercase;
}
.home .i_part1 .txtBox .tit p {
  font-size: 8rem;
  color: #5c3321;
  font-family: "title";
  line-height: 1.25;
}
.home .i_part1 .txtBox .itro {
  margin-top: 42px;
}
.home .i_part1 .txtBox .itro p {
  font-size: 2.8rem;
  color: #333;
  line-height: 1.55;
}
/* 首页--关于 End*/

/* 公共 Strat */
.title h2 {
  font-size: 5.2rem;
  font-family: "title";
  color: var(--colors);
}
.title .text {
  margin-top: 4.2rem;
  margin-bottom: 8rem;
}
/* 公共 End*/

/* 首页--产品 Strat */
.home .i_part2 {
  width: 100%;
  position: relative;
}
.home .i_part2 .box {
  width: 100%;
  position: relative;
}
.home .i_part2 .title h2 {
  text-align: center;
}
.home .i_part2 .title .text p {
  text-align: center;
  color: #333;
}
.home .i_part2 .items {
  display: flex;
  width: 100%;
  /* height: 100vh; */
  height: 65rem;
}
.home .i_part2 .items .item{
  position: relative;
  overflow: hidden;
  height: 100%;
}
/* .home .i_part2 .items .item {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  height: 100%;
  -webkit-transition: min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  -o-transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995),
    -ms-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  min-width: 0px;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
} */
.home .i_part2 .items .item a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.home .i_part2 .items .item .imgBox {
  position: relative;
  width: 100%;
  height: 100%;
}
.home .i_part2 .items .item .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .i_part2 .items .item .txtBox {
  position: absolute;
  left: 10%;
  bottom: 2.4rem;
  color: #fff;
  width: 80%;
  height: auto;
  opacity: 0;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
}
.home .i_part2 .items .item .txtBox h2 {
  font-size: 3.6rem;
  font-family: "title";
  color: #fff;
  margin-bottom: 2.4rem;
}
.home .i_part2 .items .item .txtBox h3 {
  font-weight: normal;
  color: #fff;
}
/* .home .i_part2 .items .item:hover {
  -webkit-box-flex: 1.5;
  -ms-flex: 1.5;
  flex: 1.5;
  -webkit-transition: -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995)
    1200ms;
  transition: -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
  -o-transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
  transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
  transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms,
    -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms,
    -ms-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
} */



.home .i_part2 .items .item:hover .txtBox {
  opacity: 1;
  transform: translateY(-20px);
}
.home .i_part2 .items .item a::before {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 3.2rem;
  width: 24px;
  height: 24px;
  background-image: url("../image/rightIcon2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s;
  -webkit-transition: opacity 1.2s;
}
.home .i_part2 .items .item:hover a::before {
  opacity: 1;
}
/* 首页--产品 End*/

/* 首页--最新产品 Strat */
.home .i_part3 {
  width: 100%;
  position: relative;
}
.home .i_part3 .box {
  width: 100%;
  position: relative;
}

.home .i_part3 .title {
  text-align: center;
}
.home .i_part3 .swiper {
  width: 100%;
  height: 100%;
  position: relative;
}
.home .i_part3 .swiper .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}
.home .i_part3 .swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .i_part3 .swiper .swiper-pagination-bullet-active{
  color: #fff;
  background-color: #fff;
}

/* 首页--最新产品 End*/

/* 品牌动态 Strat */
.i_part4 .box {
  width: 100%;
  position: relative;
}
.i_part4 .title h2 {
  text-align: center;
}
.i_part4 .title .text p {
  text-align: center;
  color: #333;
}
.i_part4 .items{
  position: relative;
}
.i_part4 .items ul {
  display: grid;
  gap: 3.2rem;
  grid-template-columns: repeat(3, 1fr);
}
.i_part4 .items ul li {
  width: 100%;
  overflow: hidden;
}
.i_part4 .items ul li b {
  display: block;
  overflow: hidden;
}
.i_part4 .items ul li b img {
  width: 100%;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.i_part4 .items ul li:hover b img {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}
.i_part4 .items ul li h3 {
  margin: 6% 0 2%;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.i_part4 .items ul li:hover h3 {
  color: var(--colors);
}
.i_part4 .items ul li p {
  font-size: 1.4rem;
  line-height: 2.3rem;
  height: 4.6rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
}
.i_part4 .items ul li .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-top: 1rem;
  margin-top: 3.2rem;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.i_part4 .items ul li .bottom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 1px;
  background: #999;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.i_part4 .items ul li:hover .bottom {
  opacity: 0.7;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
.i_part4 .items ul li:hover .bottom::before {
  width: 100%;
}
.i_part4 .items ul li .bottom h4 {
  font-size: 2.2rem;
  color: #666;
  font-family: "num";
  font-weight: normal;
}
.i_part4 .items ul li .bottom i {
  font-size: 1.2rem;
}
.i_part4 .more{
  position: absolute;
  right: 0;
  top: -4.3rem;
  margin-bottom: 15px;
}
.i_part4 .more div{
  font-size: 1.4rem;
  color: #333;
  transition: all .3s;
  -webkit-transition: all .3s;
}
.i_part4 .more:hover div{
  color: var(--colors);
}
/* 品牌动态 End*/

/* 底部栏 Strat */
.footer {
  padding: 6% 0 0%;
  background: #f7f7f7;
}
.footer .boxs {
  display: flex;
  justify-content: space-between;
  padding-bottom: 3%;
}
.footer .boxs .left img {
  height: 90px;
}
.footer .boxs .right {
  width: 36%;
  display: flex;
  justify-content: space-between;
}
.footer .boxs .right dt {
  font-size: 1.8rem;
  font-family: "title";
  margin-bottom: 2rem;
}
.footer .boxs .right dd {
  font-size: 1.6rem;
  margin: 10px 0;
  color: #999;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  cursor: pointer;
}
.footer .boxs .right dd:hover {
  color: var(--colors);
  -webkit-transform: translateX(5px);
  transform: translateX(5px);
}
.footer .links {
  padding-bottom: 3rem;
}
.footer .links h5 {
  font-size: 1.8rem;
  font-family: "title";
  font-weight: normal;
  margin: 2.5rem 0 0.5rem;
}
.footer .links h5:first-of-type {
  margin-top: 0;
}
.footer .links h6 {
  font-size: 3.4rem;
  font-family: "num";
  font-weight: normal;
  color: var(--colors);
}
.footer .links p {
  margin: 10px 0;
  font-size: 1.4rem;
  color: #333;
}
.footer .links .imgs {
  display: flex;
  align-items: center;
  margin-top: 2rem;
}
.footer .links b {
  cursor: pointer;
  display: block;
  margin-right: 20px;
  position: relative;
  overflow: hidden;
}
.footer .links b img {
  width: 32px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.footer .links b:hover img:first-of-type {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  opacity: 1;
}
.footer .links b img.ewm {
  opacity: 0;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 30px;
  width: 120px;
}
.footer .links b:hover {
  overflow: inherit;
}
.footer .links b:hover .ewm {
  opacity: 1;
  top: 36px;
}
.footer .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
}
.footer .bottom p {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.2;
}
.footer .bottom p a {
  font-size: 1.2rem;
  color: #333;
  margin-left: 20px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.footer .bottom p a:hover {
  color: var(--colors);
}
.footer .totop i {
  font-size: 3rem;
  display: block;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  cursor: pointer;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.footer .totop i:hover {
  color: var(--colors);
}
/* 底部栏 End*/

/* 关于 Strat */
.nyBanner {
  width: 100%;
  position: relative;
}
.nyBanner .box {
  width: 100%;
  position: relative;
  padding: 16% 0;
}
.nyBanner .box img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aboutPage {
  width: 100%;
  position: relative;
}
.about {
  overflow: hidden;
}
.about h6 {
  font-size: 1.8rem;
  margin-bottom: 4%;
  color: #333;
  letter-spacing: 0.1rem;
}
.about h6 strong {
  font-size: 3.6rem;
  display: block;
  margin-bottom: 1rem;
  color: var(--colors);
  font-family: "title";
  letter-spacing: 0.2rem;
}
.about .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about .left {
  width: 48%;
}
.about .left img {
  width: 100%;
}
.about .right {
  width: 46%;
}
.about .right p {
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
.title3 h3 {
  font-size: 3.6rem;
  margin-bottom: 1rem;
  color: var(--colors);
  font-family: "title";
  letter-spacing: 0.2rem;
}
.about2 {
  width: 100%;
  position: relative;
}
.about2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0087ff;
  opacity: 0.55;
}
.about2 ul {
  display: flex;
  position: relative;
  z-index: 2;
}
.about2 ul li {
  width: 33.3%;
  padding: 10% 4%;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  color: #fff;
}
.about2 ul li img {
  width: 76px;
  height: 76px;
  margin: auto;
  margin-bottom: 8%;
  padding: 15px;
  border-radius: 50%;
  background: var(--colors);
}
.about2 ul li h3 {
  font-size: 2.6rem;
  letter-spacing: 0.3rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.about2 ul li h4 {
  font-size: 1.8rem;
  margin: 3% 0 8%;
  letter-spacing: 0.1rem;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.about2 ul li p {
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  font-size: 1.5rem;
  line-height: 1.9;
  text-align: left;
}
.about3 {
  background: #f3f3f3;
}
.about3 ul {
  display: flex;
  flex-wrap: wrap;
}
.about3 ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2%;
  width: 49%;
  background: #fff;
  margin-right: 2%;
  padding: 2%;
}
.about3 ul li:nth-of-type(2n) {
  margin-right: 0;
}
.about3 ul li:last-of-type {
  width: 100%;
  margin-right: 0;
}
.about3 ul li:last-of-type p {
  width: 50%;
  float: left;
}
.about3 ul li .txt {
  width: 64%;
}
.about3 ul li:last-of-type .txt {
  width: 100%;
}
.about3 ul li h3 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-bottom: 2rem;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.about3 ul li:hover h3 {
  color: var(--colors);
}
.about3 ul li p {
  font-size: 1.4rem;
  color: #333;
  position: relative;
  padding-left: 15px;
  margin: 0.4rem 0;
  line-height: 1.8;
}
.about3 ul li p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 2px solid #999;
}
.about3 ul li .img {
  width: 32%;
}
.about3 img {
  display: block;
  width: 100%;
}
.about4 {
  overflow: hidden;
}
.about4 .bb {
  margin: 3% auto 2%;
}
.about4 .gallery-top .swiper-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.about4 .gallery-top .ll {
  width: 60%;
}
.about4 .gallery-top .swiper-slide img {
  width: 100%;
}
.about4 .gallery-top .rr {
  position: relative;
  width: 32%;
}
.about4 .gallery-top h3 {
  font-size: 10rem;
  color: #cccccc;
  font-family: "num";
  position: relative;
  font-weight: normal;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.about4 .gallery-top .swiper-slide.swiper-slide-active h3 {
  color: var(--colors);
}
.about4 .gallery-top p {
  font-size: 1.6rem;
  color: #333;
  line-height: 1.8;
}
.about4 .years {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2rem;
  position: relative;
}
.about4 .years::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.5rem;
  width: 100%;
  height: 1px;
  background: #ddd;
}
.about4 .gallery-thumbs {
  text-align: center;
  width: 100%;
  padding: 3rem 0;
}
.about4 .gallery-thumbs .swiper-slide {
  font-size: 2rem;
  font-weight: bold;
  color: #999999;
  position: relative;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  cursor: pointer;
}
.about4 .gallery-thumbs .swiper-slide::before {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -24px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #ccc;
  box-sizing: border-box;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.about4 .gallery-thumbs .swiper-slide.active,
.about4 .gallery-thumbs .swiper-slide:hover {
  color: var(--colors);
}
.about4 .gallery-thumbs .swiper-slide.active::before {
  border-color: var(--colors);
}

/* 关于 End*/

/* 产品分类 Strat */
.proPage {
  width: 100%;
  position: relative;
}
.proPage .box {
  width: 100%;
  position: relative;
}
.proPage .title {
  text-align: center;
  margin-top: 5%;
}
.proPage .proNav {
  width: 100%;
  position: relative;
  margin-top: 4.2rem;
}
.proPage .proNav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem 3.2rem;
}
.proPage .proNav ul li a {
  font-size: 1.4rem;
  color: #333;
  background: #f7f7f7;
  border-radius: 30px;
  padding: 1rem 2rem;
  display: block;
}
.proPage .items .item {
  width: 100%;
  position: relative;
  background: #fff;
}
.proPage .items .item:nth-of-type(2n) {
  background: #f3f3f3;
}
.proPage .topBox {
  width: 100%;
  position: relative;
  display: flex;
  background: #0087ff;
}
.proPage .items .item:nth-of-type(2n) .topBox {
  background: #33bbd0;
}
.proPage .items .item:nth-of-type(3n) .topBox {
  background: #dfc8ae;
}
.proPage .items .item:nth-of-type(4n) .topBox {
  background: #86b2cd;
}
.proPage .topBox .img {
  width: 67%;
}
.proPage .topBox .tit {
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.proPage .topBox .num {
  font-size: 6.2rem;
  color: #fff;
  font-family: "num";
}
.proPage .topBox h3 {
  font-size: 3.8rem;
  color: #fff;
  font-family: "title";
  margin-top: 2.4rem;
  text-align: center;
}
.proPage .botBox {
  display: grid;
  gap: 2.4rem 1.5rem;
  margin-top: 2.4rem;
  grid-template-columns: repeat(7, 1fr);
}
.proPage .botBox a h3 {
  font-size: 1.5rem;
  font-weight: normal;
  text-align: center;
  margin-top: 1.2rem;
  color: #333;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.proPage .botBox a img {
  width: 100%;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}
.proPage .botBox a:hover img {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}
.proPage .botBox a:hover h3 {
  color: var(--colors);
}
.proPage .items {
  width: 100%;
  position: relative;
}

/* 产品分类 End*/

/* 分页 Strat */
#pages ul {
  margin-top: 5%;
  display: flex;
  justify-content: center;
}
#pages ul li {
  text-align: center;
  width: 30px;
  line-height: 30px;
  height: 30px;
  background: #f3f3f3;
  margin: 0 7px;
  border-radius: 50%;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333;
}
#pages ul li a{
  display: block;
}
#pages ul li:hover,
#pages ul li.active {
  background: var(--colors);
  color: #fff;
}
/* 分页 End*/

/* 新闻详情 Strat */
.newsdPage {
  width: 100%;
  position: relative;
  padding: 5% 20%;
}
.newsdPage .box .date {
  display: flex;
  justify-content: center;
}
.newsdPage .box .date span {
  font-size: 1.6rem;
  color: #333;
  position: relative;
  opacity: 0.8;
}
.newsdPage .box .tit {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.newsdPage .box .tit h2 {
  font-size: 2.8rem;
  font-family: "title";
  color: #feae35;
  text-align: center;
}
.newsdPage .box .text {
  padding-top: 30px;
}
.newsdPage .box .text p {
  font-size: 1.7rem;
  line-height: 2;
  color: #333;
  margin: 20px 0;
  opacity: 0.8;
}
/* 新闻详情 End*/

/* 联系我们 Strat */
.contact .contain {
  display: flex;
  justify-content: space-between;
}
.contact .contain .left {
  width: 50%;
  background: #f5f8fa;
  padding: 5% 5% 3%;
}
.contact .contain h4 {
  font-size: 2.4rem;
  font-family: "title";
  margin-bottom: 10rem;
  color: #333;
  position: relative;
  padding-bottom: 2rem;
}
.contact .contain h4::after {
  content: "";
  width: 3rem;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--colors);
}
.contact .contain .right {
  width: 50%;
  background: #f5f8fa;
}
.contact .contain p {
  margin: 16px 0;
  font-size: 1.4rem;
  color: #333;
  line-height: 1.8;
}
.contact .contain p strong {
  font-style: normal;
  font-weight: normal;
  display: block;
  color: #000;
  font-size: 1.8rem;
}
.contact ul {
  display: flex;
}
.contact ul li {
  margin-right: 15px;
}
.contact ul li img {
  width: 42px;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.contact #mapDiv {
  height: 100%;
  position: relative;
  z-index: 1;
}
.contact2 {
  border-top: 1px solid #dfdede;
}
.contact2 .title3 h3 {
  font-size: 4rem;
  font-family: "title";
  text-align: center;
  font-weight: normal;
  color: var(--colors);
}
.contact2 ul {
  display: flex;
  flex-wrap: wrap;
}
.contact2 ul li {
  width: 31.3%;
  background: #f6f6f6;
  margin-right: 3%;
  margin-top: 3%;
  padding: 5%;
  text-align: center;
  border-radius: 20px;
  position: relative;
}
.contact2 ul li:nth-of-type(3n) {
  margin-right: 0;
}
.contact2 ul li .ewm {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 15rem;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.contact2 ul li:hover .ewm {
  opacity: 1;
}
.contact2 ul li img {
  display: block;
  margin: auto;
  width: 8rem;
}
.contact2 ul li p {
  margin: 3rem 0 0;
  font-size: 1.8rem;
  color: #333;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.contact2 ul li:hover p {
  color: #0087ff;
}
/* 联系我们 End*/

/* 产品详情 Strat */
.prodPage {
  width: 100%;
  position: relative;
}
.prodPage .titBox {
  padding-left: 22%;
  padding-right: 22%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f3f3f3;
}
.prodPage .titBox .img {
  width: 42%;
}
.prodPage .titBox .tit {
  width: 54%;
}
.prodPage .titBox .tit a {
  display: inline-block;
  font-size: 2.4rem;
  border-bottom: 1px solid #999;
  color: #333;
  margin-bottom: 2.4rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.prodPage .titBox .tit h2 {
  font-size: 3.6rem;
  font-family: "title";
  color: var(--colors);
}
.prodPage .titBox .tit a:hover {
  border-bottom: 1px solid transparent;
}
.prodPage .itroBox {
  position: relative;
  background: #fff;
  padding-left: 22%;
  padding-right: 22%;
}
.prodPage .itroBox p {
  color: #333;
}
.prodPage .itroBox p img {
  width: 100%;
}
.prodPage .itroBox p video {
  width: 100%;
  height: auto;
}
/* 产品详情 End*/

.rightFix {
  position: fixed;
  right: 0;
  bottom: 15%;
  z-index: 999;
  overflow: hidden;
}
.rightFix b {
  display: block;
  background: var(--colors);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 8px;
  margin-right: 1rem;
  cursor: pointer;
}
.rightFix b img {
  width: 100%;
  height: 100%;
}
.rightFix .txt {
  position: absolute;
  right: -100%;
  bottom: 48px;
  background: #fff;
  width: 190px;
  font-size: 1.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.rightFix.active .txt {
  right: 0;
  opacity: 1;
}
.rightFix.active {
  overflow: inherit;
}
.rightFix .txt h3 {
  background: #f39800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.8rem 1.2rem 2rem;
  font-weight: normal;
  font-size: 1.4rem;
}
.rightFix .txt img {
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.rightFix .txt p {
  color: #333;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  padding: 1.5rem 2rem 0;
}
.rightFix .txt p img {
  width: 20px;
  height: 20px;
  margin: -2px 15px 0 0;
}
.rightFix .txt a {
  color: #333;
  font-size: 1.4rem;
  display: block;
  padding: 0.3rem 2rem 1.5rem;
}