@charset "utf-8";

/*-----------------------------------------------------------*/

/*copyright by 动力无限  www.btoe.cn*/

/*邮箱 btoe@btoe.cn*/

/*合作电话 400-0599-360*/

/*版权所有违者必究*/

/*-----------------------------------------------------------*/

/*Generated by wjdhcms 3.0 */

.dx {

  text-transform: uppercase;

}

.clearboth::after,

.clearboth:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.hongbao {

  transform-origin: center bottom;

  animation: upAnimation 2s 0.5s infinite;

}

@keyframes upAnimation {

  0% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  10% {

    transform: rotate(-12deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  20% {

    transform: rotate(12deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  28% {

    transform: rotate(-10deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  36% {

    transform: rotate(10deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  42% {

    transform: rotate(-8deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  48% {

    transform: rotate(8deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  52% {

    transform: rotate(-4deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  56% {

    transform: rotate(4deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  60% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);

  }

  100% {

    transform: rotate(0deg);

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

  }

}

@keyframes jello {

  from,

  11.1%,

  to {

    -webkit-transform: none;

    -moz-transform: none;

    transform: none;

  }

  22.2% {

    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);

    -moz-transform: skewX(-12.5deg) skewY(-12.5deg);

    transform: skewX(-12.5deg) skewY(-12.5deg);

  }

  33.3% {

    -webkit-transform: skewX(6.25deg) skewY(6.25deg);

    -moz-transform: skewX(6.25deg) skewY(6.25deg);

    transform: skewX(6.25deg) skewY(6.25deg);

  }

  44.4% {

    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);

    -moz-transform: skewX(-3.125deg) skewY(-3.125deg);

    transform: skewX(-3.125deg) skewY(-3.125deg);

  }

  55.5% {

    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);

    -moz-transform: skewX(1.5625deg) skewY(1.5625deg);

    transform: skewX(1.5625deg) skewY(1.5625deg);

  }

  66.6% {

    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);

    -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg);

    transform: skewX(-0.78125deg) skewY(-0.78125deg);

  }

  77.7% {

    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);

    -moz-transform: skewX(0.390625deg) skewY(0.390625deg);

    transform: skewX(0.390625deg) skewY(0.390625deg);

  }

  88.8% {

    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

    -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);

  }

}

@-webkit-keyframes hvr-icon-wobble-vertical {

  16.65% {

    -webkit-transform: translateY(6px);

    transform: translateY(6px);

  }

  33.3% {

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

  49.95% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px);

  }

  66.6% {

    -webkit-transform: translateY(-2px);

    transform: translateY(-2px);

  }

  83.25% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px);

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

@keyframes hvr-icon-wobble-vertical {

  16.65% {

    -webkit-transform: translateY(6px);

    transform: translateY(6px);

  }

  33.3% {

    -webkit-transform: translateY(-5px);

    transform: translateY(-5px);

  }

  49.95% {

    -webkit-transform: translateY(4px);

    transform: translateY(4px);

  }

  66.6% {

    -webkit-transform: translateY(-2px);

    transform: translateY(-2px);

  }

  83.25% {

    -webkit-transform: translateY(1px);

    transform: translateY(1px);

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

body {

  height: auto !important;

  padding: 0;

  margin: 0;

  font-family: "Roboto", "Noto Sans", "Arial", sans-serif;

}

body a {

  color: #333;

}

* {

  padding: 0;

  margin: 0;

}

li,

ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}

a {

  text-decoration: none;

  color: #333;

}

.inner-container {

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  width: 94%;

  max-width: 1600px;

  margin: 0 auto;

  position: relative;

  font-size: 18px;

}

.inner-container::after,

.inner-container:after {

  content: "";

  display: block;

  clear: both;

  font-size: 0;

  line-height: 0;

}

.inner-container * {

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

.inner-container *:before,

.inner-container *:after {

  -webkit-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

@media screen and (max-width: 1360px) {

  .inner-container {

    font-size: 16px;

  }

}

@media screen and (max-width: 640px) {

  .inner-container {

    font-size: 14px;

  }

}

.inner-banner {

  background-color: #eee;

  position: relative;

}

.inner-banner .img {

  width: 100%;

}

.inner-banner .img img {

  display: block;

  width: 100%;

  min-height: 214px;

  object-fit: cover;

}

.inner-banner .text {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  display: -webkit-flex;

  display: flex;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-align-items: center;

  align-items: center;

  color: #fff;

}

.inner-banner .text .tit {

  font-size: 44px;

  font-weight: normal;

  line-height: 1;

  margin: 0;

  padding: 0;

}

.inner-banner .text .inner-location {

  font-size: 16px;

  line-height: 22px;

  margin-top: 60px;

}

.inner-banner .text .inner-location i {

  display: inline-block;

  vertical-align: middle;

  width: 21px;

  height: 21px;

  position: relative;

  top: -2px;

  overflow: hidden;

  margin-right: 12px;

}

.inner-banner .text .inner-location i img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.inner-banner .text .inner-location a {

  color: #fff;

  text-decoration: none;

}

.inner-banner .text .inner-location a:hover {

  text-decoration: underline;

}

@media screen and (max-width: 980px) {

  .inner-banner .img img {

    min-height: 160px;

  }

  .inner-banner .text h1 {

    font-size: 32px;

  }

  .inner-banner .text .inner-location {

    font-size: 14px;

    margin-top: 20px;

  }

  .inner-banner .text .inner-location i {

    width: 18px;

    height: 18px;

    margin-right: 10px;

  }

}

@media screen and (max-width: 640px) {

  .inner-banner .img img {

    min-height: 140px;

  }

  .inner-banner .text h1 {

    font-size: 26px;

  }

  .inner-banner .text .inner-location {

    font-size: 12px;

    margin-top: 10px;

  }

  .inner-banner .text .inner-location i {

    width: 14px;

    height: 14px;

    margin-right: 6px;

  }

}

.inner-products-box {

  /* margin: clamp(40px, 6vw, 80px) 0; */

}

.inner-hot-products .hot-tit {

  border-bottom: 1px solid #e0e0e0;

  font-family: "Arial Black";

  font-size: clamp(30px, 7vw, 96px);

  overflow: hidden;

  text-align: center;

  line-height: 1;

  height: 0.82em;

  text-shadow: rgba(210, 217, 221, 0.75) 1px 0 0, rgba(210, 217, 221, 0.75) 0 1px 0, rgba(210, 217, 221, 0.75) -1px 0 0, rgba(210, 217, 221, 0.75) 0 -1px 0;

  color: #fff;

  margin-bottom: 80px;

}

.inner-hot-products .hot-products-box {

  display: flex;

  justify-content: space-between;

}

.inner-hot-products .product-navigation {

  width: 355px;

  background-color: #f7f9fa;

  display: flex;

  justify-content: space-between;

  flex-direction: column;

}

.inner-hot-products .product-navigation .tit {

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 34px;

  line-height: 1;

  text-align: center;

  border-bottom: 1px solid #e3e3e3;

  min-height: 2.94em;

  padding-top: 0.64em;

  padding-bottom: 0.5em;

}

.inner-hot-products .product-navigation .list {

  flex: 1;

  min-width: 0;

  min-height: 0;

  position: relative;

  z-index: 10;

  overflow: hidden;

}

.inner-hot-products .product-navigation .list::after {

  content: "";

  position: absolute;

  z-index: 4;

  left: 0;

  bottom: 0;

  width: 100%;

  display: block;

  background-repeat: no-repeat;

  background-image: -webkit-linear-gradient(top, rgba(247, 249, 250, 0), #f7f9fa);

  background-image: linear-gradient(to bottom, rgba(247, 249, 250, 0), #f7f9fa);

  height: 60px;

  pointer-events: none;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}

.inner-hot-products .product-navigation .list ul {

  padding: 16px 0 18px;

  position: absolute;

  z-index: 2;

  width: 100%;

  background-color: #f7f9fa;

  left: 0;

  top: 0;

}

.inner-hot-products .product-navigation .list ul li {

  margin-top: 4px;

}

.inner-hot-products .product-navigation .list ul li a {

  display: flex;

  justify-content: space-between;

  position: relative;

  z-index: 1;

  align-items: center;

  padding: 15px 0;

  font-size: 20px;

  padding-left: 46px;

  line-height: 1.4em;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.inner-hot-products .product-navigation .list ul li a::before {

  content: "";

  display: block;

  position: absolute;

  left: 0;

  width: 0;

  height: 100%;

  z-index: -1;

  background-color: #1c8851;

}

.inner-hot-products .product-navigation .list ul li a::after {

  content: "";

  display: block;

  width: 0;

  background: url(../images/arrow.svg) center center no-repeat;

  background-size: 8px;

  height: 20px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  opacity: 0;

}

.inner-hot-products .product-navigation .list ul li a:hover {

  color: #1c8851;

}

.inner-hot-products .product-navigation .list ul li.current-menu-item a {

  color: #fff;

}

.inner-hot-products .product-navigation .list ul li.current-menu-item a::before {

  width: 81.7%;

  min-width: calc(100% - 65px);

}

.inner-hot-products .product-navigation .list ul li.current-menu-item a::after {

  opacity: 1;

  max-width: 65px;

  width: 18.3%;

}

.inner-hot-products .product-navigation .list:hover {

  overflow: initial;

}

.inner-hot-products .product-navigation .list:hover::after {

  opacity: 0;

}

.inner-hot-products .recommend-products {

  flex: 1;

  min-width: 0;

  margin-left: 3.375%;

}

.inner-hot-products .recommend-products h3 {

  margin: 20px 0 30px 46px;

  min-height: 26px;

  line-height: 26px;

  padding-left: 38px;

  font-size: 20px;

  color: #7d7d7d;

  font-weight: normal;

  background: url(../images/recommend-products-icon.webp) 0 center no-repeat;

}

.inner-hot-products .recommendSwiper .swiper-container {

  margin: 0 -1.68%;

}

.inner-hot-products .recommendSwiper ul li {

  width: 33.33%;

  padding: 0 1.68%;

}

@media screen and (max-width: 1360px) {

  .inner-hot-products .recommendSwiper ul li {

    width: 50%;

  }

}

.inner-hot-products .recommendSwiper ul li .item {

  background-color: #f7f9fa;

  border-radius: 16px;

  padding: 20px 20px 0;

}

.inner-hot-products .recommendSwiper ul li .item .img {

  display: block;

  position: relative;

  overflow: hidden;

  background-color: #fff;

  padding-top: 79.26%;

}

.inner-hot-products .recommendSwiper ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}

.inner-hot-products .recommendSwiper ul li .item h4 {

  height: 80px;

  margin-top: 6px;

  text-align: center;

  display: flex;

  align-items: center;

  font-weight: normal;

}

.inner-hot-products .recommendSwiper ul li .item h4 a {

  width: 100%;

  display: block;

  font-size: 22px;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.2em;

  max-height: 2.4em;

  text-align: center;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 981px) {

  .inner-hot-products .recommendSwiper ul li .item:hover .img img {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    transform: scale(1.1);

  }

  .inner-hot-products .recommendSwiper ul li .item:hover h4 a {

    color: #1c8851;

  }

}

.hot-products-box{
  margin-bottom: 60px;
}

/* .inner-products-list {

  margin: 60px 0 0;

} */

.inner-products-list ul {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 40px;

  margin-bottom: 80px;

}

.inner-products-list ul li {

  width: calc(50% - 20px);

}

.inner-products-list ul li .item {

  background-color: #ffffff;

  border-radius: 16px;

  border: solid 1px #f2f2f2;

  padding: 25px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.inner-products-list ul li .item .img {

  width: 49.48%;

  max-width: 386px;

  display: block;

  position: relative;

  overflow: hidden;

}

.inner-products-list ul li .item .img i {

  display: block;

  padding-top: 85.5%;

}

.inner-products-list ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}

.inner-products-list ul li .item .txt {

  flex: 1;

  min-width: 0;

  margin-left: 7%;

}

.inner-products-list ul li .item .txt h4 a {

  display: block;

  font-size: 24px;

  font-weight: bold;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.6em;

  max-height: 3.2em;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.inner-products-list ul li .item .txt p {

  margin-top: 10px;

  font-family: Microsoft YaHei Light;

  font-size: 19px;

  color: #6e8494;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  line-height: 1.5em;

  height: 3em;

}

.inner-products-list ul li .item .txt .more {

  display: inline-block;

  vertical-align: top;

  margin-top: 40px;

  background-color: #f2f4f5;

  border-radius: 30px;

  line-height: 1.2;

  font-size: 16px;

  color: #b3b3b3;

  padding: 9px 16px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

@media screen and (min-width: 981px) {

  .inner-products-list ul li .item:hover {

    border-color: #fff;

    box-shadow: 0px 0px 39px 1px rgba(42, 44, 47, 0.06);

  }

  .inner-products-list ul li .item:hover .img img {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -o-transform: scale(1.1);

    transform: scale(1.1);

  }

  .inner-products-list ul li .item:hover .txt h4 a {

    color: #1c8851;

  }

  .inner-products-list ul li .item:hover .txt .more {

    background-color: #1c8851;

    color: #fff;

  }

}

@media screen and (max-width: 1360px) {

  .inner-products-list ul {

    gap: 30px;

  }

  .inner-products-list ul li {

    width: calc(50% - 15px);

  }

  .inner-products-list ul li .item {

    border-radius: 10px;

    padding: 20px;

  }

  .inner-products-list ul li .item .txt {

    margin-left: 6%;

  }

  .inner-products-list ul li .item .txt h4 a {

    font-size: 20px;

  }

  .inner-products-list ul li .item .txt p {

    font-size: 16px;

  }

  .inner-products-list ul li .item .txt .more {

    margin-top: 20px;

  }

}

@media screen and (max-width: 980px) {

  .inner-hot-products .hot-products-box {

    display: block;

  }

  .inner-hot-products .hot-tit {

    display: none;

  }

  .inner-hot-products .product-navigation {

    width: 100%;

    display: block;

  }

  .inner-hot-products .product-navigation .tit {

    font-size: 28px;

  }

  .inner-hot-products .product-navigation .list::after {

    display: none;

  }

  .inner-hot-products .product-navigation .list ul {

    padding: 10px 0;

    position: relative;

  }

  .inner-hot-products .product-navigation .list ul li a {

    padding: 8px 0;

    font-size: 16px;

    padding-left: 30px;

  }

  .inner-hot-products .recommend-products {

    display: none;

  }

  .inner-products-list ul {

    margin-bottom: 50px;

  }

  .inner-products-list ul li .item {

    padding: 20px;

    display: block;
    height: 100%;

  }

  .inner-products-list ul li .item .img {

    width: 100%;

  }

  .inner-products-list ul li .item .txt {

    margin-left: 0;

    margin-top: 20px;

  }

}

@media screen and (max-width: 640px) {

  .inner-hot-products .product-navigation .tit {

    font-size: 26px;

  }

  .inner-hot-products .product-navigation .list ul li {

    margin-top: 0;

  }
  .hot-products-box{
    margin-bottom: 30px;
  }

  /* .inner-products-list {

    margin-top: 30px;

  } */

  .inner-products-list ul {

    gap: 10px;

    margin-bottom: 30px;

  }

  .inner-products-list ul li {

    width: calc(50% - 5px);

  }

  .inner-products-list ul li .item {

    padding: 10px;

    border-radius: 5px;

  }

  .inner-products-list ul li .item .txt {

    margin-top: 10px;

  }

  .inner-products-list ul li .item .txt h4 a {

    font-size: 14px;

  }

  .inner-products-list ul li .item .txt p {

    margin-top: 5px;

    font-size: 12px;

  }

  .inner-products-list ul li .item .txt .more {

    margin-top: 15px;

    font-size: 12px;

    padding: 6px 12px;

  }

}

.detailsTit {

  border-bottom: 1px solid #d4dbde;

}

.detailsTit span {

  background-color: #f7f9fa;

  font-size: 22px;

  display: inline-block;

  padding: 16px 28px;

  font-weight: bold;

  line-height: 1.2;

  margin-bottom: -1px;

}

.inner-product-details {

  padding: clamp(40px, 6vw, 90px) 0;

}

.product-details-box {

  display: flex;

  justify-content: space-between;

}

.product-details-box .detailsLeft {

  flex: 1;

  min-width: 0;

}

.product-details-box .detailsLeft h1 {

  font-size: 30px;

  font-weight: bold;

  line-height: 1.4;

}

.product-details-box .details {

  margin-top: 35px;

  display: flex;

  justify-content: space-between;

}

.product-details-box .details .detailsImg {

  width: 554px;

  border: solid 1px #e8eaeb;

  padding: 10px;

}

.product-details-box .details .detailsImgSwiper {

  position: relative;

  overflow: hidden;

}

.product-details-box .details .detailsImgSwiper::before {

  content: "";

  padding-top: 75%;

  display: block;

}

.product-details-box .details .detailsImgSwiper .swiper-container {

  width: 100%;

  height: 100%;

  position: absolute;

  left: 0;

  top: 0;

}

.product-details-box .details .detailsImgSwiper ul {

  height: 100%;

}

.product-details-box .details .detailsImgSwiper ul li {

  height: 100%;

}

.product-details-box .details .detailsImgSwiper ul li i {

  display: block;

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

}

.product-details-box .details .detailsImgSwiper ul li i img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .details .detailsImgSwiper .detailsImgPrev {

  position: absolute;

  z-index: 4;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  left: 0;

  background-color: rgba(0, 0, 0, 0.2);

  width: 30px;

  height: 50px;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .details .detailsImgSwiper .detailsImgPrev::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  background: url(../images/arrow.svg) center center no-repeat;

  background-size: 10px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  filter: grayscale(100) brightness(6);

}

.product-details-box .details .detailsImgSwiper .detailsImgPrev:hover {

  background-color: #1c8851;

}

.product-details-box .details .detailsImgSwiper .detailsImgNext {

  position: absolute;

  z-index: 4;

  top: 50%;

  -webkit-transform: translateY(-50%);

  transform: translateY(-50%);

  right: 0;

  background-color: rgba(0, 0, 0, 0.2);

  width: 30px;

  height: 50px;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .details .detailsImgSwiper .detailsImgNext::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  background: url(../images/arrow.svg) center center no-repeat;

  background-size: 10px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  filter: grayscale(100) brightness(6);

  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -o-transform: rotate(180deg);

  transform: rotate(180deg);

}

.product-details-box .details .detailsImgSwiper .detailsImgNext:hover {

  background-color: #1c8851;

}

.product-details-box .details .detailsImgThumbs {

  margin: 26px 48px 14px;

}

.product-details-box .details .detailsImgThumbs ul li {

  width: 25%;

}

.product-details-box .details .detailsImgThumbs ul li .img {

  width: 100%;

  position: relative;

  background-color: #ffffff;

  border-radius: 4px;

  border: solid 1px #dadada;

  overflow: hidden;

  padding: 10px;

  cursor: pointer;

  opacity: 0.7;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .details .detailsImgThumbs ul li .img img {

  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  aspect-ratio: 1 / 1;

}

.product-details-box .details .detailsImgThumbs ul li.swiper-slide-thumb-active .img {

  border-color: #1c8851;

  opacity: 1;

}

.product-details-box .details .details-txt {

  flex: 1;

  margin-left: 5.65%;

  display: flex;

  justify-content: space-evenly;

  flex-direction: column;

}

.product-details-box .details .details-txt ul {

  display: table;

  border-collapse: collapse;

}

.product-details-box .details .details-txt ul li {

  font-size: 18px;

  color: #6e8494;

  line-height: 1.6;

  display: table-row;

}

.product-details-box .details .details-txt ul li i {

  font-style: normal;

  display: table-cell;

  width: 34%;

  padding: 10px 10px 10px 0;

}

.product-details-box .details .details-txt ul li span {

  display: table-cell;

  padding: 10px 0;

}

.product-details-box .details .details-txt .contactLink {

  margin-top: 20px;

  width: 188px;

  height: 54px;

  background-color: #f7f9fa;

  border-radius: 50px;

  text-align: center;

  font-size: 20px;

  line-height: 1.2;

  display: flex;

  justify-content: center;

  flex-direction: column;

  align-items: center;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .details .details-txt .contactLink:hover {

  background-color: #1c8851;

  color: #fff;

}

.product-details-box .description {

  margin-top: 60px;

}

.product-details-box .description .descriptionText {

  padding-top: 40px;

  font-size: 18px;

  line-height: 1.8;

}

.product-details-box .description .descriptionText img {

  max-width: 100%;

}

.product-details-box .detailsRight {

  width: 340px;

  margin-left: 6.75%;

  margin-top: 10px;

}

.product-details-box .detailsRight .navigation h3 {

  background-color: #f7f9fa;

  font-size: 24px;

  line-height: 1.2;

  padding: 22px 10px;

  text-align: center;

  font-weight: normal;

}

.product-details-box .detailsRight .navigation .list ul li {

  margin-top: 20px;

}

.product-details-box .detailsRight .navigation .list ul li a {

  font-size: 18px;

  line-height: 1.6;

  display: flex;

  padding-left: 70px;

  font-weight: 100;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .navigation .list ul li a::before {

  content: ">";

  margin-right: 10px;

}

.product-details-box .detailsRight .navigation .list ul li a span {

  flex: 1;

}

.product-details-box .detailsRight .navigation .list ul li a:hover {

  color: #1c8851;

}

.product-details-box .detailsRight .navigation .list ul li.current-menu-item a {

  color: #1c8851;

}

.product-details-box .detailsRight .detailsRecommendSwiper {

  margin-top: 40px;

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendPrev {

  margin: 0 auto;

  width: 45px;

  height: 45px;

  background-color: #f7f9fa;

  border-radius: 50%;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendPrev::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  background: url(../images/arrow.svg) center center no-repeat;

  background-size: 8px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  -webkit-transform: rotate(-90deg);

  -moz-transform: rotate(-90deg);

  -o-transform: rotate(-90deg);

  transform: rotate(-90deg);

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendPrev:hover {

  background-color: #1c8851;

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendPrev:hover::before {

  filter: grayscale(100) brightness(6);

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendNext {

  margin: 0 auto;

  width: 45px;

  height: 45px;

  background-color: #f7f9fa;

  border-radius: 50%;

  cursor: pointer;

  outline: none;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendNext::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  background: url(../images/arrow.svg) center center no-repeat;

  background-size: 8px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  -webkit-transform: rotate(90deg);

  -moz-transform: rotate(90deg);

  -o-transform: rotate(90deg);

  transform: rotate(90deg);

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendNext:hover {

  background-color: #1c8851;

}

.product-details-box .detailsRight .detailsRecommendSwiper .detailsRecommendNext:hover::before {

  filter: grayscale(100) brightness(6);

}

.product-details-box .detailsRight .detailsRecommendSwiper .swiper-container {

  margin: 24px 0;

  height: 994px;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li {

  background-color: #ffffff;

  height: 314px;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item {

  padding: 20px 20px 0;

  border: solid 1px #f0f0f0;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item .img {

  display: block;

  width: 100%;

  padding-top: 75%;

  position: relative;

  overflow: hidden;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item h4 a {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #a9a9a9;

  font-size: 18px;

  line-height: 64px;

  text-align: center;

  font-weight: normal;

  height: 64px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item:hover {

  border-color: #1c8851;

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item:hover .img img {

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  transform: scale(1.1);

}

.product-details-box .detailsRight .detailsRecommendSwiper ul li .item:hover h4 a {

  color: #1c8851;

}

.product-details-box .detailsRight .contact {

  margin-top: 48px;

}

.product-details-box .detailsRight .contact .onlineLink {

  display: block;

  background-color: #f7f9fa;

  line-height: 1.2;

  padding: 22px 10px 22px 30px;

  border-right: 4px solid #1c8851;

  color: #6e8494;

  font-weight: bold;

  font-size: 24px;

  background-repeat: no-repeat;

  background-image: -webkit-linear-gradient(left, #1c8851, #1c8851);

  background-image: linear-gradient(to right, #1c8851, #1c8851);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  background-size: 0% 100%;

  background-position: left center;

}

.product-details-box .detailsRight .contact .onlineLink:hover {

  background-size: 100% 100%;

  color: #fff;

  border-color: #ddd;

}

.product-details-box .detailsRight .contact .text {

  margin-top: 30px;

  background-color: #f7f9fa;

  padding: 38px 10px 38px 30px;

  color: #6e8494;

}

.product-details-box .detailsRight .contact .text h4 {

  font-size: 20px;

  line-height: 1.8;

  font-weight: normal;

}

.product-details-box .detailsRight .contact .text ul {

  margin: 24px 0;

}

.product-details-box .detailsRight .contact .text ul li {

  font-size: 20px;

  line-height: 24px;

  display: flex;

  padding: 10px 0;

}

.product-details-box .detailsRight .contact .text ul li i {

  position: relative;

  overflow: hidden;

  width: 21px;

  height: 20px;

  margin-right: 15px;

}

.product-details-box .detailsRight .contact .text ul li i img {

  position: absolute;

  max-width: 100%;

  max-height: 100%;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.product-details-box .detailsRight .contact .text .contactLink {

  margin-right: 20px;

  display: block;

  text-align: center;

  padding: 15px 5px;

  background-color: #1c8851;

  border-radius: 30px;

  line-height: 24px;

  font-size: 20px;

  color: #fff;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

  position: relative;

  z-index: 2;

}

.product-details-box .detailsRight .contact .text .contactLink::before {

  content: "";

  border-radius: 30px;

  position: absolute;

  z-index: -1;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: 0px;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

  background-color: #fff;

  opacity: 0;

}

.product-details-box .detailsRight .contact .text .contactLink:hover {

  color: #1c8851;

}

.product-details-box .detailsRight .contact .text .contactLink:hover::before {

  opacity: 1;

  margin: 2px;

}

.related-product {

  margin-top: clamp(40px, 5vw, 60px);

}

.related-product .detailsRelatedSwiper {

  margin-top: 15px;

}

.related-product .detailsRelatedSwiper .swiper-container {

  margin: 0 -20px;

}

.related-product .detailsRelatedSwiper ul li {

  width: 25%;

  padding: 20px;

}

@media screen and (max-width: 1360px) {

  .related-product .detailsRelatedSwiper ul li {

    width: 33.33%;

  }

}

.related-product .detailsRelatedSwiper ul li .item {

  padding: 10px 10px 0;

  background-color: #f7f9fa;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.related-product .detailsRelatedSwiper ul li .item .img {

  display: block;

  width: 100%;

  padding-top: 75%;

  background-color: #fff;

  position: relative;

  overflow: hidden;

}

.related-product .detailsRelatedSwiper ul li .item .img img {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  -webkit-transition: all 0.8s ease-out;

  transition: all 0.8s ease-out;

}

.related-product .detailsRelatedSwiper ul li .item .txt {

  padding: 28px 0 22px;

}

.related-product .detailsRelatedSwiper ul li .item .txt h4 a {

  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 20px;

  line-height: 1.5;

  text-align: center;

  font-weight: bold;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.related-product .detailsRelatedSwiper ul li .item .txt .btn {

  margin-top: 16px;

  text-align: center;

}

.related-product .detailsRelatedSwiper ul li .item .txt .more {

  display: inline-block;

  vertical-align: top;

  border-radius: 16px;

  border: solid 1px #cdcdcd;

  line-height: 30px;

  text-align: center;

  font-size: 14px;

  color: #8f8f8f;

  padding: 0 18px;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.related-product .detailsRelatedSwiper ul li .item:hover {

  background-color: #fff;

  box-shadow: 0px 0px 25px 1px rgba(42, 44, 47, 0.06);

}

.related-product .detailsRelatedSwiper ul li .item:hover .img img {

  -webkit-transform: scale(1.1);

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  transform: scale(1.1);

}

.related-product .detailsRelatedSwiper ul li .item:hover .txt h4 a {

  color: #1c8851;

}

.related-product .detailsRelatedSwiper ul li .item:hover .txt .more {

  background-color: #1c8851;

  color: #fff;

}

@media screen and (max-width: 1600px) {

  .product-details-box .details .detailsImg {

    width: 440px;

  }

  .product-details-box .details .detailsImgThumbs {

    margin-left: 20px;

    margin-right: 20px;

    margin-top: 10px;

    margin-bottom: 0;

  }

  .product-details-box .detailsRight {

    margin-left: 5%;

  }

}

@media screen and (max-width: 1360px) {

  .product-details-box .details .detailsImg {

    width: 360px;

  }

  .product-details-box .details .detailsImgThumbs {

    margin-left: 0;

    margin-right: 0;

  }

  .product-details-box .details .detailsImgThumbs ul li .img {

    padding: 6px;

  }

  .product-details-box .details .details-txt ul li {

    font-size: 16px;

  }

  .product-details-box .details .details-txt .contactLink {

    width: 150px;

    height: 44px;

    line-height: 44px;

    font-size: 16px;

  }

  .product-details-box .detailsRight {

    width: 250px;

    margin-left: 4%;

    margin-top: 0;

  }

  .product-details-box .detailsRight .navigation h3 {

    font-size: 20px;

    padding: 18px 10px;

  }

  .product-details-box .detailsRight .navigation .list ul li {

    margin-top: 20px;

  }

  .product-details-box .detailsRight .navigation .list ul li a {

    padding-left: 20px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper {

    margin-top: 40px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper .swiper-container {

    height: 751px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper ul li {

    height: 233px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper ul li .item {

    padding: 10px 10px 0;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper ul li .item h4 a {

    font-size: 16px;

    line-height: 50px;

    height: 50px;

  }

  .product-details-box .detailsRight .contact {

    margin-top: 40px;

  }

  .product-details-box .detailsRight .contact .onlineLink {

    font-size: 20px;

    padding-left: 20px;

    padding-right: 10px;

  }

  .product-details-box .detailsRight .contact .text {

    margin-top: 20px;

    padding: 25px 10px 25px 20px;

  }

  .product-details-box .detailsRight .contact .text h4 {

    font-size: 16px;

    line-height: 1.4;

  }

  .product-details-box .detailsRight .contact .text ul li {

    font-size: 18px;

  }

  .product-details-box .detailsRight .contact .text ul li i {

    margin-right: 8px;

  }

  .product-details-box .detailsRight .contact .text .contactLink {

    margin-right: 10px;

  }

  .related-product .detailsRelatedSwiper ul li {

    width: 33.333%;

  }

}

@media screen and (max-width: 980px) {

  .product-details-box {

    display: block;

  }

  .product-details-box .detailsRight {

    width: 100%;

    margin-left: 0;

    margin-top: 50px;

  }

  .product-details-box .detailsRight .navigation h3 {

    font-size: 20px;

    padding: 18px 10px;

  }

  .product-details-box .detailsRight .navigation .list ul li {

    margin-top: 10px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper {

    display: none;

  }

  .product-details-box .detailsRight .contact {

    margin-top: 40px;

  }

  .related-product .detailsRelatedSwiper ul li {

    width: 50%;

  }

}

@media screen and (max-width: 640px) {

  .detailsTit span {

    font-size: 16px;

  }

  .product-details-box .detailsLeft h1 {

    font-size: 20px;

  }

  .product-details-box .details {

    display: block;

  }

  .product-details-box .details .detailsImg {

    width: 100%;

  }

  .product-details-box .details .details-txt {

    margin-top: 20px;

    margin-left: 0;

  }

  .product-details-box .details .details-txt ul li {

    font-size: 14px;

  }

  .product-details-box .details .details-txt .contactLink {

    margin: 20px auto 0;

  }

  .product-details-box .description .descriptionText {

    font-size: 14px;

  }

  .product-details-box .detailsRight {

    width: 100%;

    margin-left: 0;

    margin-top: 50px;

  }

  .product-details-box .detailsRight .navigation h3 {

    font-size: 20px;

    padding: 18px 10px;

  }

  .product-details-box .detailsRight .navigation .list {

    padding-top: 10px;

  }

  .product-details-box .detailsRight .navigation .list ul li {

    margin-top: 10px;

  }

  .product-details-box .detailsRight .navigation .list ul li a {

    font-size: 16px;

  }

  .product-details-box .detailsRight .detailsRecommendSwiper {

    display: none;

  }

  .product-details-box .detailsRight .contact {

    margin-top: 40px;

  }

  .related-product .detailsRelatedSwiper .swiper-container {

    margin: 0 -6px;

  }

  .related-product .detailsRelatedSwiper ul li {

    width: 50%;

    padding: 6px;

  }

  .related-product .detailsRelatedSwiper ul li .item .txt {

    padding: 15px 0;

  }

  .related-product .detailsRelatedSwiper ul li .item .txt h4 a {

    font-size: 14px;

    white-space: wrap;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    line-height: 1.4em;

    height: 2.8em;

  }

  .related-product .detailsRelatedSwiper ul li .item .txt .btn .more {

    line-height: 26px;

    font-size: 14px;

  }

  .related-product .detailsRelatedSwiper ul li .item:hover {

    box-shadow: none;

    background-color: #f7f9fa;

  }

}

.paging ul {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 6px;

}

.paging ul li {

  width: auto;

}

.paging ul li a {

  display: block;

  background-color: #ffffff;

  border: solid 1px #cdcdcd;

  line-height: 1.2;

  font-size: 16px;

  color: #707070;

  padding: 6px 12px;

  text-transform: capitalize;

  -webkit-transition: all 0.5s ease-out;

  transition: all 0.5s ease-out;

}

.paging ul li a:hover,

.paging ul li a.active {

  background-color: #1c8851;

  border-color: #1c8851;

  color: #fff;

}

.paging ul li a.disabled {

  background-color: #cecece;

  color: #fff;

}

@media screen and (max-width: 640px) {

  .paging ul {

    gap: 4px;

  }

  .paging ul li a {

    font-size: 14px;

    padding: 3px 7px;

  }

}