@media screen and (max-width: 1920px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1340px;
  }
}
@media screen and (max-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1340px;
  }
}
@media screen and (max-width: 1366px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1200px;
  }
}
@redc: #0000fe;
@bluec: #0000fe;
@yellowc: #fdda04;
@leftBg: #1f6bb9;
@fcolor:#205498;
:root {
  --base-color: #0000fe;
  --second-color: #3a3ae9;
  --three-color: #dbdee3;
  --half-black: #333333;
}
.carousel {
  .carousel-inner {
    .carousel-item {
      position: relative;
      .carousel-caption {
        /**/
        position: absolute;
        left: 20%;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-self: center;
        h3 {
          font-size: 64px;
        }
        p {
          font-size: 16px;
        }
      }

      .imgactive {
        transition: 1s 2.7s;
        transform: perspective(1000px) translate3d(0, 0, 110px);
      }
      &.active {
        .imgactive {
          transition: 3s 0s;
          transform: perspective(1000px) translate3d(0, 0, 0px);
        }
      }
    }
  }
  button {
    &.carousel-control-prev {
      background: transparent;
      border: none;
    }
    &.carousel-control-next {
      background: transparent;
      border: none;
    }
  }
}
.card {
  transition: all ease-out 0.5s;
  &:hover {
    transform: translateY(-20px);
    cursor: pointer;
  }
}
.media {
  transition: all ease-out 0.5s;
  &:hover {
    transform: translateY(-20px);
    cursor: pointer;
  }
}
.w100m0autop0 {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.w100m0auto {
  width: 100%;
  margin: 0 auto;
}
header {
  .header-top {
    background: #f4f4f4;
    @media screen and (max-width: 768px){
      display: none;
    }
    .col-md-4 {
      .slogan {
        h2 {
          font-size: 18px;
          color: #2e4670;
          text-align: center;
        }
      }


    }
    .col-md-5{
      .slogan {
        h2 {
          font-size: 18px;
          color: #2e4670;
          text-align: center;
        }
      }
    }
    .col-md-3{
      .contact {
        p {
          color: #666666;
          text-align: left;
          margin: 0 auto;
          padding: 0;
          font-size: 14px;
          line-height: 1.4em;
          &:first-child{
            margin-top: 10px;
          }
          i {
            margin-right: 6px;
            color: @redc;
          }
        }
        .form {
          width: 230px;
          margin: 10px auto;
          form {
            width: 230px;
            height: 40px;
            position: relative;
            input {
              width: 230px;
              background: #ffffff;
              border: #d1d1d1 solid 1px;
              height: 38px;
              padding-left: 15px;
            }
            button {
              height: 39px;
              border: transparent solid 1px;
              position: absolute;
              right: 0px;
              top: 0px;
              background-color: transparent;
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
  .navbar {
    height: 50px;
    background-image:linear-gradient(to bottom, rgba(78, 160, 214, 1), rgba(16, 76, 134, 1)) ;

    @media screen and(max-width: 768px) {
      display: none;
      height: 50px;
      background: rgba(255, 255, 255, 0.5);
    }

    .w100m0auto();
    padding: 0px 10%;
    .navbar-collapse {
      height: 100%;
      .navbar-nav {
        height: 100%;
        .nav-item {
          margin: 0 auto;
          height: 100%;
          line-height: 100%;
          display: flex;
          align-items: center;
          padding: 0 30px;
          &.active {
          }
          &:hover {
          }
          .nav-link {
            line-height: 100%;
            color: #ffffff;
            text-decoration: none;
            &.dropdown-toggle{
              position: relative;
              &::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 0;
                width: 100%;
                height: 15px;
                background: transparent;
                pointer-events: auto;
                opacity: 0;
              }
            }
          }
          .dropdown-menu{
            a{
              line-height: 30px;
            }
          }
        }
      }
      .navbar-text {
        margin-left: 20px;
        ul {
          .w100m0autop0();
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          @media screen and(max-width: 768px) {
            li {
              &:nth-child(4) {
                width: 100%;
              }
            }
          }
          li {
            list-style-type: none;
            margin-right: 4px;
            a {
              img {
                border: rgba(255, 255, 255, 0.1) solid 1px;
                vertical-align: bottom;
                margin-top: 5px;
              }
            }
            i {
              color: #ffffff;
            }
            form {
              position: relative;
              @media screen and (min-width: 1366px) and (max-width: 1600px) {
                display: none;
              }

              input {
                width: 100%;
              }
              button {
                position: absolute;
                right: 0px;
                border: transparent;
                &:hover {
                  background: transparent;
                }
                i {
                  color: #333333;
                }
              }
            }
          }
        }
      }
      @media screen and(max-width: 768px) {
        background: #333333;
      }
    }

    .menu-sub {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      background: rgba(250, 250, 250, 0.9);
      height: 360px;
      padding-top: 10px;  /* 可选：保持视觉间距 */
      &.show{
        display: block;
      }
      &::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
        pointer-events: auto;
      }
      @media screen and(max-width: 768px) {
        height: auto;
      }
      .container {
        .content {
          width: 100%;
          display: flex;
          @media screen and(max-width: 768px) {
            flex-direction: column;
          }
          .left {
            width: 33.33%;
            @media screen and(max-width: 768px) {
              width: 50%;
            }
            /* box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
            ul {
              width: 100%;
              margin: 0 auto;
              padding: 0px;
              margin-top: 20px;
              li {
                list-style-type: none;
                margin-right: 4px;
                line-height: 2em;
                a {
                  color: #666666;
                  text-decoration: none;
                  font-weight: bold;
                }
              }
            }
          }
          .right {
            width: 66.66%;
            @media screen and(max-width: 768px) {
              width: 50%;
            }
            .content {
              display: none;
              &.active {
                display: block;
              }
              ul {
                width: 100%;
                margin: 0 auto;
                padding: 0;
                display: flex;
                margin-top: 20px;
                flex-wrap: wrap;
                li {
                  width: 33.33%;
                  list-style-type: none;
                  line-height: 2em;
                  @media screen and(max-width: 768px) {
                    width: 100%;
                  }
                  a {
                    color: #666666;
                    text-decoration: none;
                    &:hover{
                      color: @redc;
                    }
                  }
                }
              }
            }

          }
        }
      }
    }


  }
}
.mobile_nav {
  width: 100%;
  height: auto;
  overflow: hidden;
  ul, li, i {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sp_header {
    height: 90px;
    overflow: hidden;
    top: 0;
    background: #fff;
    position: fixed;
    z-index: 999;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .sp_logo {
    padding: 10px;
    float: left;
    height: auto;
    img {
      margin: auto;
      width: 220px;
    }
  }
  .sp_nav {
    width: 50px;
    float: right;
    position: relative;
    cursor: pointer;
    height: 30px;
    margin-top: 15px;
    span {
      display: block;
      background: var(--base-color);
      width: 30px;
      height: 2px;
      position: absolute;
      left: 10px;
      transition: all ease 0.35s;
      &:nth-of-type(1) {
        top: 0px;
      }
      &:nth-of-type(2) {
        top: 10px;
      }
      &:nth-of-type(3) {
        top: 20px;
      }
    }
  }
  .sp_nav_se {
    span {
      &:nth-of-type(1) {
        top: 10px;
        transform: rotate(45deg);
      }
      &:nth-of-type(2) {
        width: 0;
      }
      &:nth-of-type(3) {
        top: 10px;
        transform: rotate(-45deg);
      }
    }
  }
  .sjj_nav {
    position: fixed;
    z-index: 9999;
    background: #eee;
    width: 100%;
    font-size: 16px;
    line-height: 50px;
    top: -100%;
    left: 0;
    overflow: auto;
    overflow-x: hidden;
    transition: top ease 0.35s;
    ul {
      padding-left: 0 !important;
      li {
        border-top: 1px #ddd solid;
        padding-left: 20px;
        position: relative;
        line-height: 50px;
        font-size: 16px;
        i {
          height: 50px;
          padding: 0 7px;
          position: absolute;
          right: 0px;
          border-left: 1px #ddd solid;
          svg {
            transform: rotate(-90deg);
            transition: all ease 0.35s;
            width: 20px;
            height: 20px;
            fill: #555;
          }
        }
        .sjj_nav_i_se {
          svg {
            transform: rotate(0deg);
            fill: var(--base-color);
          }
        }
        ul {
          display: none;
          li {
            a {
              color: #999;
              display: block;
              text-align: left;
            }
            & > ul {
              margin-left: 10px;
            }
          }
        }
        a {
          color: #666;
          width: 80%;
        }
      }
    }
    & > ul {
      & > li {
        &:first-child {
          overflow: hidden;
          border-top: 0;
          & > a {
            float: left;
            width: calc(100% - 70px);
          }
          .language {
            float: right;
            width: 70px;
            overflow: hidden;
            line-height: 30px;
            margin-top: 5px;
            a {
              width: 35px;
              float: left;
              border-left: 1px #ddd solid;
              text-align: center;
              color: #999;
            }
          }
        }
        &:last-child {
          border-bottom: 1px #ddd solid;
        }
      }
    }
    .search {
      width: 100%;
      .box {
        width: 100%;
        margin: 0 auto;
        padding: 5px;
        display: flex;
        input {
          border: none;
          width: calc(~"100% - 60px");
          padding-left: 3px;
        }
        button {
          width: 60px;
          background: #e1e1e1;
          border: none;
        }
      }

    }
  }
  .nav_show {
    top: 90px;
  }

}
.space {
  height: 90px;
}
.my-box{
  width: 100%;
  height: 340px;
  @media screen and (max-width: 768px){
    height: auto;
  }
  .title{
    height: 38px;
    background-image: linear-gradient(to bottom, #f4f4f4,#e6e6e6);
    position: relative;
    z-index: 8;
    &::before{
      content: '';
      position: absolute;
      width: 60px;
      height: 100%;
      right: 1px;
      top: 1px;
      background-image: linear-gradient(to bottom, #68b6e7,#00468e);
      clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 90%, 0% 70%,);
      z-index: -1;
    }
    &.no{
      &::before{
        background-image: linear-gradient(to bottom, #f4f4f4,#e6e6e6);
      }
    }
    h2{
      color: @fcolor;
      font-size: 18px;
      line-height: 38px;
      z-index: 9;
      i{
        margin: 0 4px;
      }
      span{
        float: right;
        position: relative;
        top:-5px;
        right: 15px;
        font-weight: 400;
        a{
          color: #ffffff;
          font-size: 14px;
          text-decoration: none;
        }
      }
    }
  }
  border: #d1d1d1 solid 1px;
  .content{
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    .contact{
      p{
        i{
          margin-right: 4px;
        }
      }
    }
  }
}
.index-page {
  ._title {
    .title {

      padding: 0;
      margin-top: 30px;
      margin-bottom: 20px;
      @media screen and(max-width: 768px) {
        margin-top: 10px;
      }
      h2 {
        text-align: center;
        font-size: 30px;
        line-height: 2em;
        color: @redc;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 100px;
          height: 2px;
          bottom: 0;
          left: 50%;
          background: @redc;

          transform: translateX(-50%);
        }
      }
      p {
        text-align: center;
        font-size: 14px;
        color: #333333;
        margin-bottom: 40px;
      }
    }
  }
  .desc {
    width: 70%;
    margin: 0 auto;
    @media screen and(max-width: 768px) {
      width: 95%;
    }
  }
  .index-about {
    width: 100%;
    padding: 80px 0;
    background: #f2f3f4;
    @media screen and (max-width: 768px){
      padding: 30px 0;
    }
    .container {
        .row{
          .news{
            margin: 0 auto;
            padding: 0;
            li{
              list-style: none;
              padding-left: 5px;
              border-bottom: 1px solid #d1d1d1;
              &:last-child{
                border-bottom: none;
              }
              a{
                text-decoration: none;
                color: #666666;
                line-height: 1.8em;
              }
            }
          }
          &>div{
            @media screen and (max-width: 768px){
              margin-bottom: 20px;
            }
          }
        }
    }
  }
  .index-product-recommendations {
    width: 100%;
    margin: 0px 0 0 0;
    padding: 30px 0px;
    background: url("../images/g2.jpg") center top no-repeat #fff;
    overflow: hidden;
    ._title();
    .container {
      .products-list{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .item{
          width: 33.33%;
          box-sizing: border-box;
          border: #d1d1d1 solid 1px;
          margin-right: -1px;
          margin-bottom: -1px;
          @media screen and (max-width: 768px){
            width: 50%;
          }
          .pic{
            height: 400px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            align-self: center;
            @media screen and (max-width: 768px){
              height: 260px;
            }
            img{
              max-width: 90%;
              max-height: 90%;
            }
          }
          p{
            color: #666666;
            text-decoration: none;
            text-align: center;
            a{
              text-decoration: none;
            }
          }
          a{
            text-decoration: none;
          }
        }
      }
    }
  }
  .index-factory {
    width: 100%;
    margin: 0px 0 0 0;
    padding: 30px 0px;
    background: #f2f3f4;
    overflow: hidden;
    ._title();
    .title {
      h2 {
        color: @redc;
        &::before {
          background: @redc;
        }
      }
      p {
        color: #ffffff;
      }
    }
    .container {
      .swiper-button-next {
        background: @redc;
        color: #ffffff;
        font-size: 14px;
        font-weight: lighter;
      }
      .swiper-button-prev {
        background: @redc;
        color: #ffffff;
        font-size: 14px;
        font-weight: lighter;
      }
      .swiper-slide{
        align-self: center;
        .card {
          overflow: hidden;
          border: none;
          .card-title {
            text-align: center;
          }
          .text {
            text-align: center;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            height: 50px;
            line-height: 50px;
            color: #666666;
            transition: bottom 0.5s ease-in-out;
            a {
              color: #666666;
              text-decoration: none;
            }
          }
        }
      }

    }
  }
}
footer {
  width: 100%;
  background: url("../images/footer-bg2.jpg") top center no-repeat #111111;
  border-top: #f1f1f1 solid 1px;
  /*  height: 60px;*/
  @footer-color: #e1e1e1;
  margin: 0 auto;
  padding: 0;
  @media screen and(max-width: 768px) {
    background: url("../images/footer-bg-m2.jpg") top center no-repeat #111111;
    padding-bottom: 80px;
  }
  .footer-link {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    .container {
      .row {
        .col-md-4 {
          p {
            line-height: 2em;
            &:nth-child(2) {
              color: @footer-color;
              margin-top: 30px;
            }
          }
          h3 {
            font-size: 22px;
            color: @footer-color;
            background: url("../images/fa-t.png") left center no-repeat;
            padding-left: 10px;
          }
          h4{
            font-size: 20px;
            color: @footer-color;
            padding-left: 10px;
          }
          ul {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li {
              list-style-type: none;
              color: @footer-color;
              padding-left: 15px;
              a {
                color: @footer-color;
              }
              i {
                color: @redc;
                margin-right: 10px;
              }
            }
          }
        }
        .col-md-2 {
          h3 {
            font-size: 22px;
            color: @footer-color;
            background: url("../images/fa-t.png") left center no-repeat;
            padding-left: 10px;
          }
          ul {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li {
              list-style-type: none;
              color: @footer-color;
              padding-left: 15px;
              a {
                color: @footer-color;
              }
            }
          }
          img {
            max-width: 110px;
            margin-bottom: 5px;
            border-radius: 4px;
          }
        }
        .col-md-6 {
          display: flex;
          @media screen and(max-width: 768px) {
            flex-direction: column;
          }
          .link {
            width: 50%;
            @media screen and(max-width: 768px) {
              width: 100%;
            }
            h3 {
              font-size: 22px;
              color: @footer-color;
              padding-left: 10px;
            }
            ul {
              margin: 0 auto;
              padding: 0;
              width: 100%;
              li {
                list-style-type: none;
                color: @footer-color;
                padding-left: 15px;
                a {
                  color: @footer-color;
                }
                i {
                  color: @redc;
                  margin-right: 10px;
                }
              }
            }
          }
        }
        & > div {
          h3 {
            margin-bottom: 20px;
          }
          ul {
            li {
              line-height: 2em;
            }
          }
          @media screen and(max-width: 768px) {
            margin-bottom: 30px;
          }
        }
      }
    }
  }
  .footer-copyright {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    border-top: 1px solid #333333;
  }
  .container {
    p {
      text-align: left;
      padding: 0;
      margin: 0 auto;
      color: @footer-color;
      line-height: 60px;
      font-size: 15px;
      @media screen and(max-width: 768px) {
        span {
          display: none;
        }
      }
    }
  }
}
.about-page {
  background: #f2f4f6;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .crumbs {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    height: 80px;
    @media screen and(max-width: 768px) {
      height: auto;
    }
    .crumbsSwiper {
      .swiper-slide {
        position: relative;
        line-height: 80px;
        text-align: center;
        border-bottom: transparent 2px solid;
        a {
          color: #666666;
          text-decoration: none;
        }

        &.active {
          border-bottom: @redc 2px solid;
        }
        &::after {
          content: "";
          width: 1px;
          height: 15px;
          right: 0px;
          top: 50%;
          transform: translateY(-50%);
          background: #666666;
          position: absolute;
        }
        &:hover {
          border-bottom: @redc 2px solid;
          cursor: pointer;
        }

      }
    }
    p {
      line-height: 80px;
      a {
        color: #666666;
      }
      i {
        margin-right: 8px;
      }
    }
  }
  & > div {
    padding: 80px 0; /* 70px -> 80px */
    width: 100%;
    margin: 0 auto;
    & > .container {
      & > .title {
        h2 {
          color: #212529;
          font-size: 32px; /* 36px -> 32px */
          text-align: center;
          position: relative;
          margin-bottom: 48px; /* 40px -> 48px */
          &::before {
            content: "";
            position: absolute;
            width: 50px; /* 60px -> 50px */
            height: 3px; /* 4px -> 3px */
            background: @redc;
            left: 50%;
            transform: translateX(-50%);
            bottom: -12px; /* -16px -> -12px */
          }
        }
        p {
          font-size: 16px;
          color: #212529;
          text-align: center;
          line-height: 1.6; /* 添加行高 */
          margin-bottom: 20px; /* 添加间距 */
        }
      }
    }
  }
  .about_desc {
    .container {
      .row {
        .desc {
          h4 {
            color: #afafaf;
            font-size: 36px; /* 40px -> 36px */
            margin-bottom: 15px; /* 添加间距 */
          }
          h5 {
            font-size: 30px; /* 36px -> 30px */
            color: @redc;
            margin-bottom: 20px; /* 添加间距 */
          }
          h3 {
            color: #333333;
            font-size: 24px; /* 添加字体大小 */
            margin-bottom: 25px; /* 添加间距 */
          }
          p {
            line-height: 1.8; /* 1.9em -> 1.8 */
            margin-top: 25px; /* 30px -> 25px */
            font-size: 16px; /* 添加字体大小 */
          }
        }
        .col-md-6 {
          img {
            max-width: 100%;
          }
        }
      }
      .advantage {
        width: 100%;
        margin: 0 auto;
        padding: 20px 0; /* 20px -> 30px */
        display: flex;
        margin-top: 60px; /* 50px -> 60px */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        @media screen and(max-width: 768px) {
          flex-wrap: wrap;
        }
        li {
          list-style: none;
          width: 25%;
          text-align: center;
          border-right: #f1f1f1 1px solid;
          padding: 15px; /* 添加内边距 */
          @media screen and(max-width: 768px) {
            width: 50%;
          }
          .item {
            .logo {
              i {
                font-size: 40px;
                color: @redc;
              }
            }
            .text {
              h3 {
                font-size: 20px;
                line-height: 1.6em;
                em {
                  font-style: normal;
                }
              }
            }
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
  .about_ad {
    background: url("../images/about_ad_bg.jpg") top center no-repeat fixed;
    padding: 120px 0; /* 150px -> 120px */
    .container {
      color: #f1f1f1;
      h3 {
        font-size: 28px; /* 24px -> 28px */
        font-weight: 500; /* 400 -> 500 */
        margin-bottom: 20px; /* 添加间距 */
      }
      p {
        font-size: 18px;
        line-height: 1.6; /* 添加行高 */
      }
    }
  }
  .about_video {
    background: #ffffff;
    .container {
      .video {
        text-align: center;
        video {
          margin: 0 auto;
          padding: 0;
          max-width: 100%;
          margin-top: 40px; /* 30px -> 40px */
        }
      }

    }

  }
  .about_advantage {
    background: #f1f1f1;
    .container {
      ul {
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;

        li {
          list-style: none;
          width: 25%;
          padding: 0 20px; /* 15px -> 20px */
          margin-bottom: 40px; /* 30px -> 40px */
          @media screen and(max-width: 768px) {
            width: 50%;
          }
          h3 {
            text-align: center;
            margin-bottom: 20px; /* 添加间距 */
            i {
              font-size: 80px; /* 90px -> 80px */
              color: @redc;
            }
          }
          h2 {
            font-size: 20px; /* 18px -> 20px */
            color: #333333;
            padding-bottom: 18px; /* 15px -> 18px */
            border-bottom: 1px solid #e1e1e1;
            margin-bottom: 15px; /* 添加间距 */
            text-align: center;
          }
          p {
            font-size: 15px; /* 14px -> 15px */
            line-height: 1.6; /* 添加行高 */
            text-align: center;
          }
        }
      }
    }
  }
  .about_partner {
    background: url("../images/about_partner_bg.jpg") top center no-repeat;
    .container {
      .title {
        h2 {
          color: #f1f1f1;
          &::before {
            background: #f1f1f1;
          }
        }
      }
    }
    .swiper-slide {
      height: 70px; /* 80px -> 70px */
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .swiper-button-next {
      &::after {
        color: @redc;
        font-size: 32px; /* 40px -> 32px */
      }
    }
    .swiper-button-prev {
      &::after {
        color: @redc;
        font-size: 32px; /* 40px -> 32px */
      }
    }
  }
  .about_certificate {
    background: #f5f5f5;
    .certificateSwiper {
      margin-top: 50px; /* 60px -> 50px */
    }
    .swiper-slide {
      height: 450px; /* 500px -> 450px */
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .swiper-button-next {
      width: 36px; /* 30px -> 36px */
      height: 36px; /* 30px -> 36px */
      border: @redc 2px solid;
      border-radius: 18px; /* 15px -> 18px */
      &::after {
        color: @redc;
        font-size: 18px; /* 20px -> 18px */
      }
    }
    .swiper-button-prev {
      width: 36px; /* 30px -> 36px */
      height: 36px; /* 30px -> 36px */
      border: @redc 2px solid;
      border-radius: 18px; /* 15px -> 18px */
      &::after {
        color: @redc;
        font-size: 18px; /* 20px -> 18px */
      }
    }
  }
  .about_workshop {
    background: #ffffff;
    .workshopSwiper {
      margin-top: 50px; /* 60px -> 50px */
    }
    .swiper-slide {
      height: 280px; /* 260px -> 280px */
      background: #f1f1f1;
      .pic {
        height: 220px; /* 200px -> 220px */
        margin-top: 15px; /* 10px -> 15px */
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f1f1f1;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      p {
        margin: 0 auto;
        padding: 0;
        color: #666666;
        font-size: 16px; /* 18px -> 16px */
        text-align: center;
        font-weight: 500;
        line-height: 45px; /* 50px -> 45px */
      }
    }
    .swiper-button-next {
      width: 36px; /* 30px -> 36px */
      height: 36px; /* 30px -> 36px */
      border: @redc 2px solid;
      border-radius: 18px; /* 15px -> 18px */
      &::after {
        color: @redc;
        font-size: 18px; /* 20px -> 18px */
      }
    }
    .swiper-button-prev {
      width: 36px; /* 30px -> 36px */
      height: 36px; /* 30px -> 36px */
      border: @redc 2px solid;
      border-radius: 18px; /* 15px -> 18px */
      &::after {
        color: @redc;
        font-size: 18px; /* 20px -> 18px */
      }
    }
  }
  .about_corporate_culture {
    .container {
      h1 {
        text-align: center;
        font-size: 32px;
        color: #333333;
        line-height: 3em;
        margin-bottom: 40px;
      }
      .row {
        .col-md-6 {
          h3 {
            font-size: 20px;
            color: @redc;
            margin: 0 auto;
            padding: 0;
            line-height: 2em;
            font-weight: 600;
          }
          p {
            font-size: 18px;
            color: #666666;
            line-height: 2em;
          }
          img {
            max-width: 100%;
          }
        }
      }
    }
  }
  .about-desc {
    p {
      i {
        margin-right: 6px;
      }
    }
  }


}
.news-page {
  background: #f2f4f6;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .crumbs {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    height: 80px;
    @media screen and(max-width: 768px) {
      height: auto;
    }
    .crumbsSwiper {
      .swiper-slide {
        position: relative;
        line-height: 80px;
        text-align: center;
        border-bottom: transparent 2px solid;
        a {
          color: #666666;
          text-decoration: none;
        }
        &.active {
          border-bottom: @redc 2px solid;
        }
        &::after {
          content: "";
          width: 1px;
          height: 15px;
          right: 0px;
          top: 50%;
          transform: translateY(-50%);
          background: #666666;
          position: absolute;
        }
        &:hover {
          border-bottom: @redc 2px solid;
          cursor: pointer;
        }

      }
    }
  }
  .container {
    .row {
      .col-md-6 {
        p {
          line-height: 80px;
          font-size: 16px;
          color: #666666;
          i {
            color: @redc;
            font-size: 20px;
            margin-right: 8px;
          }
          a {
            text-decoration: none;
            color: #666666;
          }
        }
      }
    }
    .news-list {
      background: #ffffff;
      width: 100%;
      margin: 60px auto;
      padding: 20px;
      .container {
        .row {
          .col-12 {
            .media {
              padding: 10px;
              background: #ffffff;
              border-radius: 10px;
              margin-bottom: 30px;
              border: #f1f1f1 solid 1px;
              a {
                img {
                  max-width: 150px;
                  text-decoration: none;
                }
              }
              .media-body {
                h5 {
                  font-size: 18px;
                  color: #0b132f;
                  span {
                    float: right;
                    font-size: 16px;
                  }
                  a {
                    text-decoration: none;
                    color: #0b132f;
                  }
                }
                p {
                  a {
                    text-decoration: none;
                    color: #666666;
                  }
                  @media screen and (max-width: 768px) {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }
    }
    .newsdetail {
      background: #ffffff;
      width: 100%;
      margin: 60px auto;
      padding: 20px;
      .container {
        padding: 40px 0px;
        background: #ffffff;
        h1 {
          font-size: 20px;
          border-bottom: #d1d1d1 solid 1px;
        }
        img {
          max-width: 100%;
        }
        .content {
          padding: 20px;
        }
      }
    }
  }
}
._left {
  .left {
    background: #1f6bb9;
    padding: 30px 0 20px 0;
    .input-search {
      width: 90%;
      height: 36px;
      border: #f1f1f1 solid 1px;
      border-radius: 18px;
      background: #ffffff;
      margin: 0 5%;
      form {
        margin: 0 auto;
        padding: 0px;
        input {
          border: none;
          height: 32px;
          width: 80%;
          margin: 0 0 0 10px;
          background: #ffffff;
          line-height: 30px;
          border-radius: 16px;
          &:focus {
            outline: none;
          }
        }
        button {
          background: #ffffff;
          height: 32px;
          padding: 0px;
          margin: 0 auto;
          border-radius: 16px;
        }
      }
    }
    h2 {
      font-size: 24px;
      color: #fff;
      font-weight: 0;
      letter-spacing: 0;
      line-height: 2.4em;
      text-align: center;
      position: relative;
      margin-top: 10px;
      &::before {
        content: "";
        width: 90%;
        height: 1px;
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 5%;
        bottom: 0px;
      }
    }
    ul {
      margin: 0 10px;
      padding: 0px 5px;
      li {
        list-style: none;
        margin: 0 auto;
        color: #ffffff;
        line-height: 2.2em;
        border-bottom: rgba(255, 255, 255, 0.5) dashed 1px;

        span {
          float: right;
          & > em {
            font-style: normal;
            display: none;
          }
          & > i {
            font-style: normal;
          }
        }
        a {
          color: #ffffff;
          text-decoration: none;
        }
        ul {
          display: none;
          margin: 0 auto;
          padding: 0px 10px;
          li {
            &.active {
              background: darken(@leftBg, 5%);
              cursor: pointer;
            }
          }
        }
        &.on {
          span {
            i {
              display: none;
            }
            em {
              display: inline-block;
              & > i {
                display: inline-block;
              }
            }
          }
          ul {
            display: block;
            li {
              list-style: none;
              margin: 0 auto;
              padding: 0px;
            }
          }
        }
        &.active {
          background: darken(@leftBg, 5%);
          cursor: pointer;
          span {
            i {
              display: none;
            }
            em {
              display: inline-block;
              & > i {
                display: inline-block;
              }
            }
          }
          ul {
            display: block;
            li {
              list-style: none;
              margin: 0 auto;
              padding: 0px;
            }
          }
        }
        &:hover {
          background: darken(@leftBg, 5%);
          cursor: pointer;
        }
      }
    }
    p {
      padding-left: 20px;
      color: #ffffff;
    }
    .icon {
      margin-left: 3px;
      a {
        span {
          display: inline-block;
          width: 30px;
          height: 30px;
          background: #f1f1f1;
          font-size: 20px;
          line-height: 30px;
          text-align: center;
          color: #333333;
        }
        &:hover {
          span {
            color: #666666;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      margin-top: 30px;
    }
  }
}
.products {
  width: 100%;
  background: #f6f6f6;
  .container {
    .row {
      .col-md-3 {
        ._left();
      }
      .col-md-9 {
        .right {
          h2 {
            line-height: 100px;
            margin: 0 auto;
            padding: 0px;
            border-bottom: #d1d1d1 solid 1px;
            font-size: 36px;
            color: #1f6bb9;
            font-weight: 700;
          }
          .container {
            .row {
              .col-md-4 {
                margin-top: 40px;
                .card {
                  background: #ffffff;
                  border: none;
                  border-radius: 0px;
                  box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
                  a {
                    .pic {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      height: 340px;
                      overflow: hidden;
                      img {
                        max-width: 100%;
                        max-height: 100%;
                      }
                    }
                  }
                  .card-body {
                    .inquire {
                      width: 100%;
                      background: #1f6bb9;
                      overflow: hidden;
                      position: relative;
                      height: 40px;
                      a {
                        line-height: 40px;
                        text-decoration: none;
                        display: inline-block;
                        position: absolute;
                        bottom: 0px;
                        span {
                          color: #ffffff;
                          line-height: 40px;
                          text-align: center;
                        }
                        &.basket {
                          span {
                            margin-left: 15px;
                          }
                          left: 0px;
                        }
                        &.prodlist-pro-inquire {
                          display: inline-block;
                          float: right;
                          width: 40px;
                          height: 40px;
                          line-height: 40px;
                          border-left: #ffffff solid 1px;
                          background: #ca0000;
                          transition: width 0.5s ease-out;
                          z-index: 888;
                          right: 0px;
                          color: #ffffff;
                          .inquire-wrap {
                            display: none;
                          }
                          span {
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            color: #ffffff;
                          }
                          &:hover {
                            width: 180px;
                            color: #ffffff;
                            .inquire-wrap {
                              display: inline-block;
                            }
                            span {
                              &:nth-child(2) {
                                width: 140px;
                              }
                            }
                          }
                        }
                      }
                    }
                    .card-title {
                      line-height: 28px;
                      height: 28px;
                      overflow: hidden;
                      text-align: center;
                      a {
                        color: #666666;
                        font-size: 14px;
                        text-decoration: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
#search {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.75);
  & > span {
    position: relative;
    right: 30px;
    top: 10px;
    cursor: pointer;
    i {
      font-size: 30px;
      color: #aaaaaa;
    }
  }
  .search-div {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .container {
      form {
        button {
          background-color: transparent;
          border: none;
          i {
            color: #aaaaaa;
          }
          &.form-control {
            border-bottom: transparent;
          }
        }
        .form-control {
          /*background: rgba(0,0,0,0.85);*/
          background: transparent;
          border-bottom: #555555 solid 1px;
          border-top: transparent;
          border-left: transparent;
          border-right: transparent;
          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
.footer-cart {
  z-index: 999;
  width: 120px;
  height: 80px;
  position: fixed;
  right: 20px;
  bottom: 150px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  @media screen and (max-width: 768px){
    width: 80px;
  }
  .write{
    text-align: center;
    margin: 0 auto;
    padding: 0;
    i{ line-height: 50px;
      text-align: center;
      font-size: 30px;
      color: @fcolor;}
    p{
      font-size: 14px;
      text-align: center;
      color: @fcolor;
      em{
        font-style: normal;
        @media screen and (max-width: 768px){
          display: none;
        }
      }
    }
  }
  span {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #7a8599;
    display: inline-block;
    text-align: center;
    position: relative;
    i {
      color: #FFFFFF;
      line-height: 50px;
      text-align: center;
      font-size: 30px;
    }
    em {
      position: absolute;
      font-style: normal;
      background: #ff0000;
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      top: -5px;
      right: -5px;
      line-height: 20px;
      text-align: center;
      color: #FFFFFF;
      font-size: 12px;
    }
  }
  .up{
    margin: 0 auto;
    text-align: center;
  }
}
#whatsapp {
  .info {
    display: none;
    border-radius: 6px;
    width: 150px;
    font-size: 16px;
    background: #f1f1f1;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15);
    color: #0b132f;
    position: absolute;
    right: 50px;
    top: -60px;
    height: 50px;
    line-height: 50px;
  }
  &:hover {
    .info {
      display: block;
    }
  }
}
.footer-cart-list {
  display: none;
  z-index: 9999;
  background: #FFFFFF;
  width: 230px;
  position: fixed;
  bottom: 0px;
  right: 5px;
  border: #d1d1d1 solid 1px;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.25);
  h3 {
    background: #7a8599;
    text-align: center;
    font-size: 15px;
    height: 37px;
    margin: 0 auto;
    padding: 0px;
    line-height: 37px;
    position: relative;
    color: #FFFFFF;
    span {
      float: left;
      position: absolute;
      left: 20px;
      bottom: 0px;
      i {
        cursor: pointer;
      }
    }
    em {
      font-style: normal;
      color: #e64545;
      font-weight: bold;
    }
  }
  ul {
    margin: 0 auto;
    padding: 0px;
    background: #FFFFFF;
    height: 150px;
    overflow-y: scroll;
    li {
      height: 56px;
      margin: 5px auto;
      border-bottom: #d1d1d1 solid 1px;
      display: flex;
      a {
        display: inline-block;
        width: 80px;
        margin-right: 5px;
        img {
          max-width: 40px;
          margin-left: 5px;
        }
      }
      span {
        p {
          margin: 0 auto;
          padding: 0px;
          font-size: 12px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 160px;
        }
        a {
          display: none;
        }
      }
      &:hover {
        span {
          a {
            display: block;
            color: #555555;
            text-decoration: none;
            font-size: 14px;
          }
        }
      }
    }
  }
  h4 {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    a {
      text-decoration: none;
      border-radius: 4px;
      &:nth-child(1) {
        background: #f1f1f1;
        color: #ff0000;
        font-size: 14px;
        padding: 5px 15px;
        margin-right: 15px;
      }
      &:nth-child(2) {
        background: #e64545;
        color: #FFFFFF;
        font-size: 14px;
        padding: 5px 15px;
      }
    }
  }
}
.inquirePage {
  .inquire {
    table {
      thead {
        tr {
          th {
            color: #9396a5;
            text-align: center;
            background: #f3f3f3;
          }
        }
      }
      tbody {
        tr {
          td {
            text-align: center;
            a {
              color: #666666;
              line-height: 120px;
              @media screen and(max-width: 768px) {
                line-height: 1.6em;
              }
              &:hover {
                color: #555555;
                text-decoration: none;
              }
            }
            .proNum {
              margin-top: 50px;
              text-align: center;
              width: 80px;
            }
          }
        }
      }
      tr {
        .prod-list {
          td {
            display: flex;
            justify-content: center;
            align-self: center;
          }
        }
      }
    }
    form {
      label {
        span {
          color: #ff0000;
        }
      }
    }
  }
  .show_success_info {
    display: none;
    padding: 50px 0;
  }
}
.page-item {
  &.active {
    .page-link {
      z-index: 3;
      color: #fff;
      background-color: @redc;
      border-color: @redc;
    }
  }
  .page-link {
    z-index: 3;
    color: @redc;
    background-color: #ffffff;
    border-color: #eeeeee;
  }
}
#index-contact-maps {
  width: 100%;
  height: 500px;
}
.my-page{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  padding-top: 15px;
  background-image:linear-gradient(to bottom, rgba(222,222,222,0.6), rgba(222,222,222,0));
  .container{
    .row{
      .col-md-3{
        @media screen and (max-width: 768px){
          order:2;
        }
      }
      .col-md-9{
        @media screen and (max-width: 768px){
          order:1;
        }
      }
    }
    .left{
      margin-bottom: 20px;
      border: 1px solid #d1d1d1;
      border-top: none;
      .products-category{
        .title{
          height: 40px;
          width: 100%;
          background-image: linear-gradient(to bottom,#4497cf 0%,#4497cf 50%,#0d5793 50%,#0d5793 100%);
          h4{
            font-size: 20px;
            line-height: 40px;
            color: #ffffff;
            padding-left: 10px;
            i{
              margin-right: 6px;}
          }
        }
        .category-list{
          ul {
            margin: 0 10px;
            padding: 0px 5px;
            li {
              list-style: none;
              margin: 0 auto;
              color: #666666;
              line-height: 2.2em;
              border-bottom: rgba(255, 255, 255, 0.5) dashed 1px;

              span {
                float: right;
                & > em {
                  font-style: normal;
                  display: none;
                }
                & > i {
                  font-style: normal;
                }
              }
              a {
                color: #666666;
                text-decoration: none;
              }
              ul {
                display: none;
                margin: 0 auto;
                padding: 0px 10px;
                li {
                  &.active {
                    cursor: pointer;
                  }
                }
              }
              &.on {
                span {
                  i {
                    display: none;
                  }
                  em {
                    display: inline-block;
                    & > i {
                      display: inline-block;
                    }
                  }
                }
                ul {
                  display: block;
                  li {
                    list-style: none;
                    margin: 0 auto;
                    padding: 0px;
                  }
                }
              }
              &.active {
                cursor: pointer;
                span {
                  i {
                    display: none;
                  }
                  em {
                    display: inline-block;
                    & > i {
                      display: inline-block;
                    }
                  }
                }
                ul {
                  display: block;
                  li {
                    list-style: none;
                    margin: 0 auto;
                    padding: 0px;
                  }
                }
              }
              &:hover {
                cursor: pointer;
              }
            }
          }
        }
      }
      .contact{
        .title{
          height: 40px;
          width: 100%;
          background-image: linear-gradient(to bottom,#f5f5f5 0%,#c1c1c1 100%);
          h4{
            font-size: 20px;
            line-height: 40px;
            color: @fcolor;
            padding-left: 10px;
            i{
              margin-right: 6px;}
          }
        }
        .content{
          width: 100%;
          margin: 0 auto;
          padding: 10px;
          p{
            i{
              margin-right: 4px;
            }
          }
        }
      }
    }
    .right{
      border: 1px solid #d1d1d1;
      border-top: none;
      margin-bottom: 20px;
      background: #ffffff;
      &>.title{
        height: 40px;
        width: 100%;
        background-image: linear-gradient(to bottom,#f5f5f5 0%,#c1c1c1 100%);
        @media screen and (max-width: 768px){
          height: auto;
        }
        h2{
          font-size: 16px;
          line-height: 40px;
          color: @fcolor;
          padding-left: 10px;
          font-weight: bold;
          @media screen and (max-width: 768px){
            font-size: 14px;
          }
          i{
            margin-right: 6px;}
          span{
            float: right;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            margin-right: 10px;
            @media screen and (max-width: 768px){
              display: none;
            }
            a{
              text-decoration: none;color: #666666;
            }
          }
        }
      }
      .content{
        .sub-title{
          width: 100%;
          height: 60px;
          background: #f1f1f1;
          /*background-image: linear-gradient(to bottom,#f5f5f5 0%,#c1c1c1 100%);*/
          @media screen and (max-width: 768px){
            height: auto;
          }
           ul{
             margin: 0 auto;
             padding: 0;
             margin-left: 10px;
             margin-top: 10px;
             @media screen and (max-width: 768px){
               margin-left: 0;
               width: 99%;
               margin: 0 auto;
               margin-top: 10px;
             }
             li{
               list-style: none;
               float: left;
               height: 40px;
               margin-right: 10px;
               padding: 0 20px;
               line-height: 40px;
               border-radius: 8px;
               background-image: linear-gradient(to bottom,#fbfbfb 0%,#e1e1e1 100%);
               @media screen and (max-width: 768px){
                 width: 100%;
                 margin-bottom: 10px;
                 margin-right: 0;
               }
             &.active{
               background-image: linear-gradient(to bottom,#4497cf 0%,#0d5793 100%);
               a{
                 color: #ffffff;
               }
             }
               &:hover{
                 background-image: linear-gradient(to bottom,#4497cf 0%,#0d5793 100%);
                 a{
                   color: #ffffff;
                 }
               }
               a{
                 color: #666666;
                 text-decoration: none;
               }
             }
           }
        }
        .rich-html{
          width: 100%;
          margin: 0 auto;
          padding: 10px;
          img{
            max-width: 100%;
          }
          .news-list {
            width: 100%;
            margin: 60px auto;
            padding: 20px;
            .container {
              .row {
                .col-12 {
                  .media {
                    padding: 10px;
                    background: #ffffff;
                    border-radius: 10px;
                    margin-bottom: 30px;
                    border: #f1f1f1 solid 1px;
                    a {
                      img {
                        max-width: 150px;
                        text-decoration: none;
                      }
                    }
                    .media-body {
                      h5 {
                        font-size: 18px;
                        color: #0b132f;
                        span {
                          float: right;
                          font-size: 16px;
                        }
                        a {
                          text-decoration: none;
                          color: #0b132f;
                        }
                      }
                      p {
                        a {
                          text-decoration: none;
                          color: #666666;
                        }
                        @media screen and (max-width: 768px) {
                          display: none;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .newsdetail {
            width: 100%;
            margin: 10px auto;
            padding: 20px;
            .container {
              padding: 40px 0px;
              h1 {
                font-size: 20px;
                border-bottom: #d1d1d1 solid 1px;
              }
              img {
                max-width: 100%;
              }
              .content {
                padding: 20px;
              }
            }
          }
          .products-list{
            .container {
              .row {
                .col-md-4 {
                  margin-top: 40px;
                  .card {
                    background: #ffffff;
                    border: none;
                    border-radius: 0px;
                    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.1);
                    a {
                      .pic {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 340px;
                        overflow: hidden;
                        img {
                          max-width: 100%;
                          max-height: 100%;
                        }
                      }
                    }
                    .card-body {
                      margin: 0 auto;
                      .card-title {
                        line-height: 28px;
                        height: auto;
                        overflow: hidden;
                        text-align: center;
                        a {
                          color: #666666;
                          font-size: 14px;
                          text-decoration: none;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .showp{
            .desc {
              display: flex;
              overflow: hidden;
              width: 100%;
              @media screen and (max-width: 768px) {
                flex-wrap: wrap;
                flex-direction: column;
              }
              .desc-left {
                width: 55%;
                padding: 20px;
                @media screen and (max-width: 768px) {
                  width: 100%;
                }
                .big_img {
                  border: #dddddd solid 1px;
                  img {
                    max-width: 100%;
                  }
                }
                .big_small {
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  margin-top: 30px;
                  .img {
                    border: #dddddd solid 2px;
                    position: relative;
                    margin-right: 4px;
                    width: 150px;
                    &::before {
                      position: absolute;
                      left: 50%;
                      top: -6px;
                      content: "";
                      border-style: solid;
                      border-width: 0px 5px 5px 5px;
                      border-color: transparent transparent #dddddd transparent;
                      transform: translateX(-50%);
                    }
                    &:hover {
                      cursor: pointer;
                    }
                    img {
                      max-width: 100%;
                    }
                  }
                  .active {
                    border: @redc solid 2px;
                    &::before {
                      position: absolute;
                      left: 50%;
                      top: -6px;
                      content: "";
                      border-style: solid;
                      border-width: 0px 5px 5px 5px;
                      border-color: transparent transparent @redc transparent;
                      transform: translateX(-50%);
                    }
                  }
                }
              }
              .desc-right {
                width: 45%;
                @media screen and (max-width: 768px) {
                  width: 100%;
                  padding-left: 10px;
                }
                h1 {
                  font-size: 20px;
                  margin-top: 20px;
                  line-height: 1.6em;
                  letter-spacing: 0;
                  text-align: left;
                  color: #222;
                  font-weight: bold;
                }
                .prod_brief {
                  font-size: 16px;
                  color: #000000;
                  ul {
                    li {
                      color: #666666;
                    }
                  }
                  .tb-prop {
                    display: flex;
                    dt {
                      width: 50px;
                      margin-right: 10px;
                    }
                    dd {
                      width: calc(~"100% - 60px");
                      div {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        a {
                          padding: 0 2px;
                          margin-bottom: 5px;
                          border: #dee2e6 solid 1px;
                          color: #666666;
                          text-decoration: none;
                          width: calc(~"33.33% - 6px");
                          margin-right: 6px;
                          font-size: 12px;
                          display: flex;
                          line-height: 40px;
                          border-radius: 4px;
                          img {
                            width: 40px;
                            height: 40px;
                            margin-right: 4px;
                            border-radius: 4px;
                          }
                          &.selected {
                            border: @redc solid 1px;
                          }
                        }
                      }

                    }
                  }
                }
                .cart {
                  display: flex;
                  .order-cart {
                    display: flex;
                    a {
                      border: #dddddd solid 1px;
                      margin-right: 6px;
                      text-align: center;
                      width: 30px;
                      color: #666666;
                      &.order-minus {
                        content: "-";
                        display: inline-block;
                        margin-left: 20px;
                      }
                      &.order-plus {
                        content: "+";
                        display: inline-block;
                      }
                    }
                    input {
                      border: #dddddd solid 1px;
                      width: 60px;
                      margin-right: 6px;
                    }
                  }
                }
                .inquire_btn {
                  a {
                  }
                }
              }
            }
            .line {
              width: calc(~"100% - 40px");
              margin: 40px 20px;
              background: #dddddd;
              height: 1px;
            }
            .detail {
              width: calc(~"100% - 40px");
              margin: 0 20px;
              h3 {
                /*background: #ca0000;*/
                text-align: center;
                color: #666666;
                font-size: 30px;
                line-height: 2em;
                font-weight: 700;
                @media screen and(max-width: 768px) {
                  font-size: 20px;
                }
                span {
                 /* &::before {
                    content: "—— ";
                    color: @redc;
                  }
                  &::after {
                    content: " ——";
                    color: @redc;
                  }*/
                }
              }
              h4 {
                text-align: center;
                font-weight: bold;
              }
              .detail-text {
                img {
                  max-width: 100%;
                }
                p {
                  word-break: break-all;
                  word-wrap: break-word;
                  strong {
                    color: #666666;
                    font-weight: bold;
                  }
                }
              }
              .page {
                display: flex;
                justify-content: space-between;
                margin: 40px auto;
                & > div {
                  height: 40px;
                  line-height: 40px;
                  border-radius: 20px;
                  background: #dddddd;
                  padding: 0 15px;
                  max-width: 45%;
                  overflow: hidden;
                  color: #666666;
                  a {
                    text-decoration: none;
                    color: #0b132f;
                  }
                }
              }
            }
            .related {
              & > h2 {
                text-align: center;
                font-size: 30px;
                margin-top: 50px;
                margin-bottom: 40px;
                color: #666666;
                font-weight: 700;
                letter-spacing: 0;
                line-height: 1em;
                @media screen and(max-width: 768px) {
                  font-size: 20px;
                }
              }
              span {
         /*       &::before {
                  content: "—— ";
                  color: @redc;
                }
                &::after {
                  content: " ——";
                  color: @redc;
                }*/
              }
              form {
                padding-bottom: 50px;
                .form-row {
                  @media screen and(max-width: 768px) {
                    margin-bottom: 0px;
                  }
                  .col-md-6 {
                    margin-bottom: 30px;
                  }
                  .col {
                    @media screen and(max-width: 768px) {
                      margin-bottom: 30px;
                    }
                    margin-bottom: 30px;
                  }
                }
              }
              .reSwiper {
                width: calc(~"100% - 40px");
                margin: 20px 20px;
                .card{
                  height: 460px;
                  .pic{
                    width: 100%;
                    height: 300px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img{
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                  .card-title {
                    a {
                      color: #666666;
                    }
                  }
                }

              }
            }
          }
        }
      }
    }
  }

}
.Equipments{
  width: 100%;
  .list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: calc(~"50% - 10px");
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
      &:nth-child(2n-1){
        margin-right: 20px;
        @media screen and (max-width: 768px) {
          margin-right: 0;
        }
      }
    }
  }
}
.certificates{
  width: 100%;
  .list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: calc(~"33.33% - 10px");
      margin-bottom: 20px;
      margin-right: 15px;
      @media screen and (max-width: 768px) {
        width: 100%;
        margin-right: 0;
      }
      .pic{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          max-width: 100%;
        }
      }
      p{
        text-align: center;
        line-height: 3em;
      }
      &:nth-child(3n){
        margin-right: 0px;
      }
    }
  }
}
.honor{
  width: 100%;
  .list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: calc(~"33.33% - 10px");
      margin-bottom: 20px;
      margin-right: 15px;
      @media screen and (max-width: 768px) {
        width: 100%;
        margin-right: 0;
      }
      .pic{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          max-width: 100%;
        }
      }
      p{
        text-align: center;
        line-height: 3em;
      }
      &:nth-child(3n){
        margin-right: 0px;
      }
    }
  }
}
.video{
  width: 100%;
  .item{
    width: 100%;
    text-align: center;
    video{
      width: 100%;
      margin: 0 auto;
      padding: 0;
      p{}
    }
  }
}
.contact-info{
  background: url("../images/contact_bg.jpg") right top no-repeat #fff;
  h2{
    font-size: 20px;
    text-align: center;
  }
  h3{
    font-size: 18px;
  }
  p{
    font-size: 16px;
    i{
      margin-right: 4px;
    }
  }

}
.contact-form{
  h2{
    text-align: center;
    line-height: 2.4em;
  }
  form {
    padding-bottom: 50px;
    .form-row {
      @media screen and(max-width: 768px) {
        margin-bottom: 0px;
      }
      .col-md-6 {
        margin-bottom: 30px;
      }
      .col {
        @media screen and(max-width: 768px) {
          margin-bottom: 30px;
        }
        margin-bottom: 30px;
      }
    }
  }
}
.all-products{
  width: 220px;
  background: #ffffff;
  height: 330px;
  .img{
    width: 200px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    img{
      max-width: 200px;
      max-height: 200px;
    }
  }
  .text{
    height: 30px;
    line-height: 30px;
    border-top: #f1f1f1 solid 1px;
    p{
      margin: 0 auto;
      padding: 0;
      /*display: flex;
      justify-content: center;
      align-items: center;*/
      a{
        color: #666666;
        text-decoration: none;
      }
    }
  }
}
/*mobile-nav*/
.footer-mobile-nav{
  display: none;
  @media screen and(max-width: 768px) {
    display: block;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999;
  }
  .mobile-nav{
    display: flex;
    background: #ffffff;
    height: 46px;
    .item{
      width: 33.33%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      position: relative;
      .add{
        position: absolute;
        top:-25px;
        left: 50%;
        transform: translateX(-50%);
        a{
          span{
            background: @fcolor;
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            border: 2px solid #ffffff;
            line-height: 50px;
            text-align: center;
            i{
              font-size: 24px;
              position: relative;
              color: #ffffff;
            }
          }
        }
      }
      a{
        color: #666666;
        display: block;
        width: 100%;
        text-decoration: none;
        h3{
          margin: 0 auto;
          padding: 0;
          position: relative;
          height: 20px;
          line-height: 20px;

          i{
            font-size: 20px;
          }
        }

        p{
          margin: 0 auto;
          padding: 0;
          font-size: 14px;
          height: 23px;
          line-height: 23px;
        }
      }
      &.active{
        a{
          text-decoration: none;
          h3{
            span{
              i{
                color: #ffffff;
              }
            }
            i{
              color: @fcolor;
            }
          }
          p{
            color: @fcolor;
          }
        }
      }
    }
  }
}
/*
.ny-carousel{
  margin-top: 80px;
  @media screen and(max-width: 768px){
    margin-top: 50px;
  }
}
.index-carousel{
  margin-top: 80px;
  @media screen and(max-width: 768px){
    margin-top: 50px;
  }
}*/