.otherHeaderBg {
  background: #fff
}

.otherHeaderBg #main-nav>ul>li>a {
  color: #363636;
  font-size: 18px;
}

.otherHeaderBg #main-nav>ul>.current-menu-item>a,.otherHeaderBg #main-nav>ul>li>a:hover {
  color: #10ac8c;
  border-bottom: 2px solid #10ac8c
}

.mobile-button::after,.otherHeaderBg .mobile-button span,.otherHeaderBg .mobile-button::before {
  background-color: #10ac8c
}

.introduceBanner {
  width: 100%;
  height: auto;
  padding-top: 240px;
  background: url('../img/other/introduceBanner.png') center top no-repeat;
  background-size: 100% 80%!important
}
.calculate-bannerCon,
.introduce-bannerCon {
  width: 100%;
  padding: 30px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 15px 30px -8px rgba(30,30,30,.09);
  box-sizing: border-box
}

.intr-Banner:hover img {
  transition: all .5s cubic-bezier(0, 0, .2, 1);
  transform: scale(1.04)
}

.intr-jishu:hover {
  transition: all .5s cubic-bezier(0, 0, .2, 1);
  margin-top: 4px
}

.intr-Banner:hover p,.intr-jishu:hover p {
  color: #10ac8c
}

.introduceBg01 {
  padding: 2px 0;
  background: white;
  /* background: url("../img/other/introduce-img05.png") top left no-repeat;
  background-size: auto 100%!important */
}

.zixunRk{
  width: auto;
  padding: 8px 16px;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0px 2px 9px 1px rgba(171,198,209,0.49);
  border-radius: 26px;
  position: fixed;
  right: 5%;
  top: 55%;
  color: #10AC8C;
  cursor: pointer;
  z-index: 20;
}
.zixunRk img {
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 890px) {
  .otherHeaderBg #main-nav>ul>li>a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 750px) {
  .otherHeaderBg #main-nav>ul>li>a {
      color:#fff!important
  }

  .otherHeaderBg #main-nav>ul>.current-menu-item>a {
      color: #fff;
      border-bottom: 2px solid #fff
  }

  .introduceBanner {
      padding-top: 40px;
      background-size: auto 40%!important
  }

  .fs-28 {
      font-size: 22px!important;
      line-height: 1.1
  }

  .marBtn26 {
      margin-bottom: 14px
  }

  .introduceBg01 {
      padding: 2px 0 10px 0;
      /* background: url("../img/other/introduce-img05.png") bottom left no-repeat;
      background-size: 100% auto!important */
  }

  .introduce-bannerCon {
      margin-top: 4px;
      padding: 24px
  }
  .calculate-bannerCon {
      margin-top: 4px;
      padding: 24px 12px
  }
}

.productBanner {
  width: 100%;
  height: auto;
  padding-top: 180px;
  background: url('../img/product/productBanner.jpg') center top no-repeat;
  background-size: 100% 86%!important
}

.smNone {
  display: block
}

.smShow {
  display: none
}

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

  .smNone {
      display: none
  }

  .smShow {
      display: block
  }
}

.newsTrendsBanner {
  width: 100%;
  height: auto;
  padding-top: 180px;
  background: url('../img/other/newsTrendsBanner.jpg') center top no-repeat;
  background-size: 100% 86%!important
}

.newsDetailHead {
  width: 100%;
  height: auto;
  background: #10AC8C;
  padding: 120px 4% 84px 4%;
}
.news-pagination {
  color: #3A3A3A;
  margin: 100px 0 30px 0;
}
.news-pagination div {
  margin-top: 20px;
}

.articleCon {
  margin: 60px auto!important
}

.articleCon p {
  margin: 24px 0;
  line-height: 2;
  text-indent: 36px;
  color: #3a3a3a
}

.contactusBanner {
  width: 100%;
  height: auto;
  padding-top: 180px;
  background: url('../img/other/contactusBanner.jpg') center top no-repeat;
  background-size: 100% 400px!important;
  color: #3a3a3a
}

.contactTitle {
  padding-top: 46px
}

.contactus-COn img {
  width: 18px;
  height: auto;
  margin-right: 6px;
  flex-shrink: 0;
  object-fit: contain
}

.contactus-COn {
  margin: 14px 0;
  width: 100%
}

.contactus-COn p {
  max-width: calc(100% - 50px);
  font-size: 14px
}

.hydrogenSiteBanner {
  background: #10ac8c;
  padding: 90px 0;
  width: 100%
}

.hydrogenSiteBanner-Con {
  width: 92%;
  margin: 0 auto;
  max-width: 600px;
  align-items: center;
  justify-content: center
}

.borderLeft {
  border-left: 1px solid #fff;
  margin-left: 34px;
  padding-left: 34px;
  color: #fff
}

.borderLeft p {
  margin: 0;
  color: #fff
}

.marBtn36 {
  margin-bottom: 36px!important
}

.hydrogenCon img {
  margin: 12px auto;
  display: block;
  max-width: 100px
}

.hydrogenCon p {
  width: 80%;
  margin: 0 auto
}

.siteBtn {
  width: 260px;
  height: auto;
  padding: 16px 0;
  text-align: center;
  background: #10ac8c;
  border-radius: 32px;
  color: #fff;
  margin: 140px auto 60px auto
}

.videoCon {
  margin: 40px 0;
  width: 100%;
  position: relative;
  height: 594px
}

.videoCon video {
  width: 100%;
  height: 100%;
  object-fit: fill
}

.VideoBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  cursor: pointer;
  z-index: 10
}

@media only screen and (max-width: 750px) {
  .contactusBanner,.newsTrendsBanner,.productBanner {
      background-size:auto 55%!important;
      padding-top: 120px
  }

  .contactTitle {
      padding-top: 36px
  }

  .homeCon.articleCon {
      margin: 0 auto!important
  }

  .borderLeft {
      margin-left: 18px;
      padding-left: 18px;
      max-width: calc(100% - 80px)
  }

  .hydrogenCon {
      margin-bottom: 40px
  }

  .siteBtn {
      margin: 100px auto 60px auto
  }

  .videoCon {
      height: 280px
  }
}

.calculateBanner {
  width: 100%;
  height: auto;
  padding-top: 200px;
  background: url('../img/other/calculateBanner.jpg') center top no-repeat;
  background-size: 100% auto !important
}
.calculateTitle {
  font-size: 28px;
  color: #10AC8C;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 100%;
}
@media (max-width: 768px) {
  .calculateTitle {
    font-size: 20px;
  }
}
.inpDiv,
.resultDiv {
  margin: 30px auto;
  height: 60px;
}
.inpDiv,
.resultDiv,
.formCon-textareaCon,
.formCon-inpCon {
  border-radius: 8px;
  border: 1px solid #CADBDA;
  background: #FFFFFF;
  align-items: center;
  color: #363636;
  padding: 0 12px;
}

.inpDiv,
.formCon-inpCon,
.formCon-textareaCon,
.formCon-title,
.errorHint {
  width: 100%;
  max-width: 610px;
}
.inpDiv .inpLabel {
  width: 130px;
}
.resultDiv {
  width: 100%;
  max-width: 440px;
  justify-content: space-between;
}
.resultDiv .inpLabel {
  width: 180px;
}
.resultDiv p,.resultDiv p:hover,
.inpDiv p,.inpDiv p:hover {
  color: #363636 !important;
  cursor: text;
}
.resultDiv p.resultTextCls,
.resultDiv p.resultTextCls:hover {
  text-align: right;
  color: #10AC8C !important;
  width: calc(100% - 210px);
}
.formCon-textareaCon textarea,
.formCon-textareaCon textarea:focus,
.formCon-inpCon input,
.formCon-inpCon input:focus,
.inpDiv input,
.inpDiv input:focus {
  width: calc(100% - 160px);
  border: none;
  outline: 0;
  color: #363636 !important;
  &::-webkit-input-placeholder {
    color: #B1BBC9 !important;
  }
  &::-moz-placeholder {
    color: #B1BBC9 !important;
  }
  &:-moz-placeholder {
    color: #B1BBC9 !important;
  }
  &:-ms-input-placeholder {
    color: #B1BBC9 !important;
  }
}
.danwei{
  width: 30px;
  text-align: right;
}
.calculateBtn {
  width: 190px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background: #10AC8C;
  border-radius: 8px;
  margin: 16px auto;
  font-size: 18px;
}
.fengeLine {
  width: 100%;
  height: 30px;
  border-bottom: 1px dashed #979797;
  margin-bottom: 30px;
}
.calculateExplain p {
  line-height: 1.7;
  margin: 4px 0;
}

/* 计算页弹框 */
.modelBgCls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  /* pointer-events: none; */
}
.modelConCls,
.resultConCls{
  position: absolute;
  left: 49.5%;
  padding: 14px;
  border-radius: 8px;
}
.resultConCls {
  width: auto;
  padding: 14px 30px;
  color: #fff;
  background: #333;
  bottom: 10%;
  transform: translate(-50%, 0%);
}
.modelConCls {
  width: 92%;
  max-width: 940px;
  padding: 12px 0 24px 0;
  background: white;
  top: 50%;
  transform: translate(-50%, -50%);
}
.model-close {
  text-align: right;
  width: 100%;
  padding-right: 10px;
}
.model-close img {
  width: 24px;
  cursor: pointer;
}
.formCon {
  width: 94%;
  margin: 0 auto;
  max-width: 700px;
  padding: 0 3% 20px 3%;
  max-height: 80vh;
  overflow-y: auto;
}
.formCon-title {
  color: #10AC8C;
  text-align: center;
  width: 100%;
  max-width: 610px;
  text-align: center;
  letter-spacing: 1px;
  font-size: 18px;
  margin: 0 auto;
  margin-bottom: 16px;
}
.formCon-inpCon {
  height: 54px;
  margin: 0 auto;
}
.formCon-textareaCon{
  height: auto;
  margin: 0 auto;
  padding: 16px 12px;
}
.formCon-textareaCon textarea,
.formCon-textareaCon textarea:focus {
  margin-top: 10px;
  width: 100% !important;
}
.submitBtn {
  width: 140px;
  height: 50px;
  line-height: 50px;
  color: white;
  text-align: center;
  background: #10AC8C;
  border-radius: 6px;
  margin: 0 auto;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 2px;
}
.errorHint {
  margin: 0 auto;
  font-size: 12px;
  color: red;
  height: 20px;
  line-height: 20px;
}
.dengjiIconCls {
  position: fixed;
  bottom: 4%;
  right: 12%;
  width:100px;
  animation: dongIcon 1.4s ease infinite both;
  cursor: pointer;
}
@keyframes dongIcon{
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}