@media screen and (max-width: 1920px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1440px;
  }
}
@media screen and (max-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1440px;
  }
}
@media screen and (max-width: 1366px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1200px;
  }
}
@redc:#b00d15;
@bluec:#b00d15;
@yellowc:#b00d15;
.carousel{
  .carousel-inner{
    .carousel-item{
      position: relative;
      .carousel-caption{
        position: absolute; left: 20%; top: 50%; transform: translateY(-50%);
        h1{
          font-size: 50px;
        }
      }

      .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;
    }
  }
}
.w100m0autop0{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.w100m0auto{
  width: 100%;
  margin: 0 auto;
}
.card{
  transition: all 0.5s ease-out;
  &:hover{
    transform: translateY(-15px);
  }
}
header{

  .bg-light{
    background: rgba(0,0,0,0.2)!important; z-index: 998;
    border-bottom: rgba(255,255,255,0.2) solid 1px;
  }
  .bg-light2{
    background: #ffffff!important; z-index: 998;
  }
  .navbar{
    height: 100px;
    @media screen and(max-width: 768px){height: 50px;}
    .w100m0auto();
    padding: 0px 10%;
    .navbar-brand{
      &>img[src='content/images/logo.png']{
        display: none;
      }
      &>img[src='content/images/wlogo.png']{
        display: block;
      }
      @media screen and (max-width: 768px){
        img{
          max-height: 40px;
        }
      }
    }
    .navbar-collapse{
      .navbar-nav{
        padding: 0;
        .nav-item{
          margin: 0 auto;
          padding: 0 15px;
          height: 100px;
          border-bottom: transparent solid 2px;
          @media screen and (max-width: 768px){
            height: 40px;
            width: 100%;
          }
          &.active{
            /*background: @redc;*/
            color: @redc;
            @media screen and(max-width: 768px){
              color: #ffffff;
              font-weight: bold;}
            .nav-link{
              color: @redc;
              @media screen and(max-width: 768px){
                color: #ffffff;
                font-weight: bold;
              }
            }
          }
          &:hover{
            /*background: @redc;*/
            .nav-link{
              color: @redc;
              @media screen and(max-width: 768px){
                color: #ffffff;}
            }
          }
          .nav-link{
            font-weight: bold;
            color: #FFFFFF; text-decoration: none; line-height: 100px;padding: 0px 15px;
            @media screen and (max-width: 768px){
              line-height: 40px;
              color: #ffffff;
            }
          }
        }
        @media screen and (max-width: 768px){
          background: @redc;
        }
      }
      .navbar-text{
        margin-left: 20px;
        ul{
          .w100m0autop0(); display: flex; flex-direction: row; justify-content: flex-start;
          li{
            list-style-type: none; margin-right: 4px;
            a{
              img{
                border: rgba(255,255,255,0.1) solid 1px;
              }
            }
            i{
              color: #666666;}
          }
        }
      }
    }
    &.bg-light2{
      box-shadow: 2px 3px  20px 3px rgba(0,0,0,0.35);
      .navbar-collapse{
        .navbar-nav{
          padding: 0;
          .nav-item{
            @media screen and (max-width: 768px){
              height: 40px;
              width: 100%;
            }
            .nav-link{
              font-weight: bold;
              color: #666666; text-decoration: none; line-height: 100px;padding: 0px 15px;
              @media screen and (max-width: 768px){
                line-height: 40px;
                color: #ffffff;
              }
            }
          }
          @media screen and (max-width: 768px){
            background: @redc;
          }
        }

      }
      .navbar-brand{
        &>img[src='content/images/logo.png']{
          display: block;
        }
        &>img[src='content/images/wlogo.png']{
          display: none;
        }
        @media screen and (max-width: 768px){
          img{
            max-height: 40px;
          }
        }
      }
    }
  }
  @media screen and(max-width: 768px){height: 50px;
    background: rgba(0,0,0,0.6) !important;}

}
.index-page{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
    .index-about{
      width: 100%;
      margin: 0 auto;
      padding: 80px 0;
      display: flex;
      flex-wrap: nowrap;
      @media  screen and(max-width: 768px) {
        flex-wrap: wrap;
        padding: 40px 0;
      }
      .desc{
          margin-left: 200px;
        @media  screen and(max-width: 768px) {
          margin-left: 0px;
          width: 100%;
        }
        h4{
          color: @redc;font-size: 24px;
          text-decoration: @redc;
        }
        h2{
            font-size: 50px;
          color: @redc;
          line-height: 1.5em;
          margin-bottom: 60px;
        }
        p{
          font-size: 18px;
          color: #666666;
          line-height: 1.5em;
          margin-bottom: 30px;
        }
        .about-ys{
          margin: 0 auto;
          padding: 0;
          margin-bottom: 50px;

          li{
            width: 50%;
            float: left;
            text-align: center;
            list-style-type: none;
            h3{
              font-size: 50px;
              color: @redc;
              line-height: 50px;
              font-weight: bold;
              small{
                font-size: 16px;
                font-weight: bold;
              }
            }
          }
        }
        a{
          display: block;
          margin-top: 60px;
        }
      }
      .pic{
        @media  screen and(max-width: 768px) {
          width: 98%;
          margin: 1% auto;
          video{
            width: 100%;
          }
        }
      }
    }
    .index-galiper{
      height: 700px;
      background: url("../images/galiper-bg.jpg") top center no-repeat fixed;
      @media  screen and(max-width: 768px) {
        background-size: cover;
      }
      .text{
        p{

          &:nth-child(1){
            font-size: 120px;
            color: transparent;
            -webkit-text-stroke: 1px #fff;
            line-height: 130px;
            @media  screen and(max-width: 768px) {
              font-size: 50px;
              line-height: 60px;
            }
          }
          &:nth-child(2){
            font-size: 20px;
            color: #ffffff;
          }
        }
      }
    }
  .index-products{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    &>.container{
      &>h3{
        margin: 30px auto;
        line-height: 2em;
      }
      &>.row{
        .col-md-3{
          .card{
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
            .card-body{
              position: absolute;
              left: 0px;
              top: 100%;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              transition: 0.5s ease-out;
              background: linear-gradient(to top,#000000,transparent);
              h5{
                margin: 0 auto;
                padding: 0;
                text-align: center;
                  a{
                    color: #ffffff;text-decoration: none;
                  }
              }
              p{
                margin: 0 auto;
                padding: 0;
                text-align: center;
                a{
                  color: #ffffff;text-decoration: none;
                }
              }
            }
            &:hover{
              cursor: pointer;
              .card-body{
                top: 0px;
              }
            }
          }
        }
      }
    }
  }
  .index-new-products{
    width: 100%;
    margin: 0 auto;
    background: #f5f8fa;
    padding: 30px 0;
    &>.container{

      &>.title{
        margin: 30px auto;
        &>h3{
          line-height: 2em;
        }
      }
      &>.row{
        .col-md-3{
          margin-bottom: 20px;
          .card{
            position: relative;
            overflow: hidden;
            .card-body{
              position: absolute;
              left: 0px;
              top: 100%;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              transition: 0.5s ease-out;
              background: linear-gradient(to top,#000000,transparent);
              h5{
                margin: 0 auto;
                padding: 0;
                text-align: center;
                a{
                  color: #ffffff;text-decoration: none;
                }
              }
              p{
                margin: 0 auto;
                padding: 0;
                text-align: center;
                a{
                  color: #ffffff;text-decoration: none;
                }
              }
            }
            &:hover{
              cursor: pointer;
              .card-body{
                top: 0px;
              }
            }
          }
        }
      }
    }
  }
  .index-applicable{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0;
    background: #ecf1f5;
    .text{
      h3{
        color: @redc;line-height: 2em;font-size: 24px;
      }
      p{
        font-size: 18px;color: #666666;
      }
    }
    .pic{
      .mySwiper{
        .swiper-slide{
          position: relative;
          .swiper-content{
            position: absolute;
            width: 100%;
            height: 60px;
            left:0px;
            bottom:0px;
            text-align: center;
            a{
              color: #ffffff;text-decoration: none;
            }
          }
        }
      }
    }
  }
  .index-news{
    .container{
      .title{
        margin: 30px auto;
      }
      .newsSwiper{
        .swiper-pagination{
          bottom: 0px;
        }
        .swiper-slide{
          position: relative;
          overflow: hidden;
          img{
            max-width: 100%;
          }
          .swiper-content{
            color: transparent;
            position: absolute;
            background-image: linear-gradient(to top,#000000,transparent );
            left: 0px;
            top:-100%;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-self: center;
            align-items: center;
            cursor: pointer;
            h3{
              a{
                color: #ffffff;
                text-decoration: none;
                font-size: 16px;
              }
            }
          }
          &:hover{
            .swiper-content{
              top:0%;
              transition: top 0.5s ease-out;
            }
          }
        }
      }
    }
  }
  .index-service{
    margin-top: 50px;
    overflow: hidden;
    padding: 30px 0px;
    background: url("../images/index-service-bg.jpg") no-repeat top center;
    position: relative;
    .big-pic{
      position: absolute;
      left: 0px;
      top:0px;
      width: 100%;
      z-index: 1;
      img{
        width: 100%;
      }
    }
    .container{
      position: relative;
      z-index: 99;
      .title{
        margin-bottom: 80px;
        margin-top: 80px;
        @media  screen and(max-width: 768px) {
          margin-bottom: 30px;
        }
        h2{
          font-size: 48px;
          text-align: center;
          color: @redc;
        }
      }
      form{
        margin-top: 180px;
        @media  screen and(max-width: 768px) {
          margin-top: 80px;
        }
        .form-group{
          width: 60%;
          margin: 0 auto;
          margin-bottom: 15px;
          @media  screen and(max-width: 768px) {
            width: 80%;
          }
          input{
            background-color: transparent;
            border: #ffffff solid 1px;
            color: #ffffff;
            &::placeholder{
              color: #ffffff;
            }
          }
          textarea{
            background-color: transparent;
            border: #ffffff solid 1px;
            color: #ffffff;
            &::placeholder{
              color: #ffffff;
            }
          }

        }
      }
    }
  }

/*
  .index-about{
    width: 100%;
    margin: 100px 0 0 0px;
    padding: 80px 0;
    background: #f5f5f5;
    .container{
      .row{
        .col-md-7{
          h2{
            color: #000000; font-size: 48px;
          span{
            color: @redc;
          }
            @media screen and (max-width: 768px){
              font-size: 30px;
            }
          }
          h4{
            font-size: 32px;
            color: #333333;
            position: relative; line-height: 2em;
            &::after{
              content: "";width: 70px;height: 3px;
              position: absolute;left: 0px; bottom: 0px;
              background: @redc;
            }
            @media screen and (max-width: 768px){
              font-size: 24px;
            }
          }
          h5{
            color: #a9a9a9;font-size: 14px;
          }
          ul{
            .w100m0auto();
            background: #ffffff;
            border: #f1f1f1 solid 1px; display: flex; justify-content: flex-start;
            box-shadow: 0px -2px 5px rgba(0,0,0,0.19);
            @media screen and (max-width: 768px){
              flex-wrap: wrap;
            }
            li{
              list-style-type: none; width: 25%; padding: 15px 0px;

              h3{
                font-size: 36px;
                color: @redc;
                span{font-size: 12px;}
                em{font-style: normal;}
              }
              @media screen and (max-width: 768px){
                width: 50%;
              }
            }
            margin-bottom: 30px;
          }
        }
        .col-md-5{
          @media screen and (max-width: 768px){
            img{
              max-width: 100%;
            }

          }
        }
        .about-desc{
          border-top: @redc solid 10px;
          background: #ffffff;
          border-top-right-radius: 50px;
          @media screen and(max-width: 768px){
            margin-top:15px ;
            border-top: @redc solid 5px;
            background: #ffffff;
            border-top-right-radius: 10px;
          }
        }
      }
    }
  }
  .index-products{
    width: 100%;
    margin:90px 0 0 0;
    padding: 0;
    .container{
      h2{
        &.title{
          text-align: center; font-size: 48px;
          color: #000000;
          position: relative;line-height: 2em;
          span{
            color: @redc;
          }
          &::after{
            position: absolute;
            content: ""; width: 70px;height: 3px;bottom: 10px; left: 50%; transform: translateX(-50%);
            background: @redc;
          }
          @media screen and (max-width: 768px){
            font-size: 30px;
          }
        }
      }
      ul{
        margin: 0 auto;
        padding: 0;
        width: 80%; text-align: center;
        display: flex; flex-wrap: wrap; justify-content: flex-start;
        margin-top: 40px;
        li{
          list-style-type: none;
          width: calc(~"25% - 10px"); margin-right: 10px; margin-bottom: 20px; border-radius: 6px;
          background: #cccccc;
          a{
            color: #333333; font-size: 16px; line-height: 3em; text-decoration: none;
          }
          &:hover{
            background: @redc; cursor: pointer;
            a{
              color: #ffffff;
            }

          }
          @media screen and (max-width: 768px){
            width: calc(~"50% - 10px");
          }
        }
      }
      .row{

      }
      .index-products-list {
        width: 100%;
        margin: 40px 0 0 0;
        color: #ffffff;
        @media screen and(max-width: 768px) {
          margin: 30px 0 0 0;
        }
        .swiper-button-next {
          width: 45px;
          border-radius: 50%;
          height: 45px;
          line-height: 45px;
          text-align: center;
          color: @redc;
          border: @redc solid 2px;
          &:after {
            font-size: 30px;
          }
        }
        .swiper-button-prev {
          width: 45px;
          border-radius: 50%;
          height: 45px;
          line-height: 45px;
          text-align: center;
          color: @redc;
          border: @redc solid 2px;
          &:after {
            font-size: 30px;
          }
        }
        .swiper-pagination-bullet-active {
          background: @redc;
        }
        .card {
          z-index: 9999;
          box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
          .card-text {
            line-height: 2em;
            color: #000;
          }
          .card-title {
            color: #000;
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
  }
  .index-news{
       width: 100%;margin:0 auto;
       padding: 80px 0 20px 0;
    .container{
      h2{
        &.title{
          text-align: center; font-size: 48px;
          color: #000000;
          position: relative;line-height: 2em;
          span{
            color: @redc;
          }
          &::after{
            position: absolute;
            content: ""; width: 70px;height: 3px;bottom: 10px; left: 50%; transform: translateX(-50%);
            background: @redc;
          }
          @media screen and (max-width: 768px){
            font-size: 30px;
          }
        }
        margin-bottom: 40px;

      }
      .row{
        .col-md-4{
          a{
            .card{
              border: none;
              .card-body{
                margin: 0 auto;
                padding: 20px;
                width: calc(~"100% - 35px");
                background: #ffffff;
                position: relative;
                top: -50px;
                .time{
                  span{
                    background: @redc; padding: 5px;
                    color: #ffffff;
                  }
                }
                border-bottom: @redc solid 3px;
              }
            }
            text-decoration: none;
            color: #333333;
          }

        }
      }
    }
     }
  .company-show{
    width: 100%;
    margin: 60px 0 0 0px;
    padding: 80px 0;
    background: #f4f4f4;
    .container{
      h2{
        margin-bottom: 30px;
        &.title{
          text-align: center; font-size: 48px;
          color: #000000;
          position: relative;line-height: 2em;
          span{
            color: @redc;
          }
          &::after{
            position: absolute;
            content: ""; width: 70px;height: 3px;bottom: 10px; left: 50%; transform: translateX(-50%);
            background: @redc;
          }
          @media screen and (max-width: 768px){
            font-size: 30px;
          }
        }
      }
      .row{
        .col-md-3{
          .card{
            border: none;
            background:transparent;
            .card-body{
              background:transparent;
              .card-title{
                font-weight: normal;
              }
            }
            img{
              transition: all 0.5s ease-out;
            }
            &:hover{
              cursor: pointer;
              img{
                transform: scale(1.05);box-shadow: 0 2px 5px rgba(0,0,0,0.21);
              }
            }
          }
        }
      }
    }
  }
  .index-advantage{
    .w100m0autop0();
    background: url("../images/index-advantage-bg.jpg") center top no-repeat; overflow: hidden;
    h3{
      font-size: 36px; text-align: center;
      color: #ffffff; margin-top: 60px; margin-bottom: 30px;
    }
    .container{
      .row{
        .col-md-3{
          .card{
            border: none;
            background: transparent;
            h3{
              text-align: center;
              i{font-size: 60px;}
            }
            .card-body{
              color:#ffffff;
              h5{ text-align: center;font-size: 20px;}
              p{ text-align: center;font-size: 16px;}
            }
          }
        }
      }
    }
  }*/

}
footer{
  width: 100%;
  background: #0f0f0f;

  /*  height: 60px;*/
  margin: 0 auto;
  padding: 0;
  .bottom-text{
    .container{
      h3{
        color: @redc;
        padding: 30px 0px;
        font-size: 40px;
        line-height: 1.2em;
        font-weight: bold;
      }
    }
  }
  .footer-link{
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;

    .container{
      border-top: #222222 solid 1px;
      .row{
        padding-top: 40px;
        .col-md-4{
          p{
            line-height: 2em;
            &:nth-child(2){
              color: #ffffff;margin-top: 30px;
            }
          }
          h3{
            font-size: 22px;
            color: #ffffff; 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: #ffffff;
              padding-left: 15px;
              a{
                color: #ffffff;}
              i{
                color: @redc;
                margin-right: 10px;}
            }
          }
        }
        .col-md-2{
          h3{
            font-size: 22px;
            color: #ffffff; 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: #ffffff;
              padding-left: 15px;
              a{
                color: #ffffff;}
            }
          }
        }
        &>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;
    .container{
      border-top: #222222 solid 1px;
    }
  }
  .container{
    p{
      text-align: left;
      padding: 0;
      margin: 0 auto;
      color: #ffffff; 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: 160px;
    }
    .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;}
        }
      }
    }
    .about-desc{
      background: #ffffff;
      width: 100%;
      margin: 60px auto;
      padding: 20px;

      h1{
        text-align: center;
        border-bottom: #e8e8e8 solid 1px;font-size: 28px;
        font-weight: normal;
        line-height: 3em;
      }
    }

  }
}
.products {
  width: 100%;
  background: #ffffff;
  .container {
    .row {
      .col-md-3 {
        .left {
          background: #f4f4f4;
          padding: 40px 10px;
          .input-search {
            width: 90%;
            height: 36px;
            border: #c1c1c1 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: #666666;
            font-weight: 0;
            letter-spacing: 0;
            line-height: 2.4em;
            text-align: center;
            position: relative;
            margin-top: 40px;
            &::before {
              content: "";
              width: 90%;
              height: 1px;
              background: #c1c1c1;
              position: absolute;
              left: 5%;
              bottom: 0px;
            }
          }
          ul {
            margin: 0 auto;
            padding: 0px 10px;
            li {
              list-style: none;
              margin: 0 auto;
              padding: 0px;
              color: #666666;
              line-height: 2.2em;
              span {
                float: right;
                & > em {
                  font-style: normal;
                  display: none;
                }
                & > i {
                  font-style: normal;
                }
              }
              a {
                color: #666666;
              }
              ul {
                display: none;
                margin: 0 auto;
                padding: 0px 10px;
              }
              &.active {
                span {
                  i {
                    display: none;
                  }
                  em {
                    display: inline-block;
                    & > i {
                      display: inline-block;
                    }
                  }
                }
                ul {
                  display: block;
                  li {
                    list-style: none;
                    margin: 0 auto;
                    padding: 0px;
                  }
                }
              }
            }
          }
          p {
            padding-left: 20px;
            color: #666666;
          }
          .icon {
            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: #ffffff;
                }
              }
            }
          }
          input{
          &:nth-child(1){
            @media screen and( max-width: 768px){
              margin-bottom: 20px;
            }
          }
          }
          .form2{
            h3{
              font-size: 18px;
            }
            p{
              margin: 0 auto;
              padding: 0;
              margin-bottom: 10px;
            }
          }
          @media screen and (max-width: 768px) {
            margin-top: 30px;
          }
        }
      }
      .col-md-9 {
        .right {
          h2 {
            line-height: 100px;
            margin: 0 auto;
            padding: 0px;
            border-bottom: #d1d1d1 solid 1px;
            font-size: 36px;
            color: @redc;
            font-weight: 700;
          }
          .container {
            .row {
              .col-md-4 {
                margin-top: 40px;
                .card {
                  background: #f7f7f7;
                  border: none;
                  border-radius: 0px;
                  .card-body {
                    .inquire {
                      width: 100%;
                      background: @redc;
                      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: #fccf05;
                          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 {
                      a {
                        color: #666666;
                        font-size: 14px;
                        text-decoration: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.showp {
  border-top: #9497ba solid 1px;
  background: #f6f6f6;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  .container {
    .nav {
      height: 100px;
      line-height: 100px;
      span {
        padding: 0 15px;
      }
      a {
        color: @redc;
        font-weight: bold;
        &:last-child {
          font-weight: normal;
        }
      }
    }
    .row {
      .col-md-3 {
        .left {
          background: #f4f4f4;
          padding: 40px 0;
          .input-search {
            width: 90%;
            height: 36px;
            border: #c1c1c1 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: #666666;
            font-weight: 0;
            letter-spacing: 0;
            line-height: 2.4em;
            text-align: center;
            position: relative;
            margin-top: 40px;
            &::before {
              content: "";
              width: 90%;
              height: 1px;
              background: #c1c1c1;
              position: absolute;
              left: 5%;
              bottom: 0px;
            }
          }
          ul {
            margin: 0 auto;
            padding: 0px 10px;
            li {
              list-style: none;
              margin: 0 auto;
              padding: 0px;
              color: #666666;
              line-height: 2.2em;
              span {
                float: right;
                & > em {
                  font-style: normal;
                  display: none;
                }
                & > i {
                  font-style: normal;
                }
              }
              a {
                color: #666666;
              }
              ul {
                display: none;
                margin: 0 auto;
                padding: 0px 10px;
              }
              &.active {
                span {
                  i {
                    display: none;
                  }
                  em {
                    display: inline-block;
                    & > i {
                      display: inline-block;
                    }
                  }
                }
                ul {
                  display: block;
                  li {
                    list-style: none;
                    margin: 0 auto;
                    padding: 0px;
                  }
                }
              }
            }
          }
          p {
            padding-left: 20px;
            color: #666666;
          }
          .icon {
            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: #ffffff;
                }
              }
            }
          }
          @media screen and (max-width: 768px) {
            margin-top: 30px;
          }
        }
      }
      .col-md-9 {
        .right {
          width: 100%;
          margin: 0 auto;
          padding: 0px;
          background: #ffffff;
          .desc {
            display: flex;
            overflow: hidden;
            @media screen and (max-width: 768px) {
              flex-wrap: wrap;
            }
            .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: #fccf05 solid 2px;
                  &::before {
                    position: absolute;
                    left: 50%;
                    top: -6px;
                    content: "";
                    border-style: solid;
                    border-width: 0px 5px 5px 5px;
                    border-color: transparent transparent #fccf05 transparent;
                    transform: translateX(-50%);
                  }
                }
              }
            }
            .desc-right {
              width: 45%;
              @media screen and (max-width: 768px) {
                width: 100%;
                padding-left: 10px;
              }
              h1 {
                font-size: 28px;
                margin-top: 20px;
                line-height: 40px;
                letter-spacing: 0;
                text-align: left;
                color: #222;
                font-weight: bold;
              }
              .prod_brief {
                font-size: 16px;
                color: #000000;
                ul {
                  li {
                    color: #3498db;
                  }
                }
              }
              .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: #fccf05;*/
              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: #fccf05;
                }
                &::after {
                  content: " ——";
                  color: #fccf05;
                }
              }
            }
            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: #fccf05;
              }
              &::after {
                content: " ——";
                color: #fccf05;
              }
            }
            form {
              padding-bottom: 50px;
              .form-row {
                @media screen and(max-width: 768px) {
                  margin-bottom: 0px;
                }
                .col-md-6 {
                  margin-bottom: 30px;
                }
                .col {
                  margin-bottom: 30px;
                  @media screen and(max-width: 768px) {
                    margin-bottom: 30px;
                  }
                }
              }
            }
            .reSwiper {
              width: calc(~"100% - 40px");
              margin: 20px 20px;
            }
          }
        }
      }
    }
  }
}
.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; text-align: right;
          color: #666666;
          i{
            color: #f10310;font-size: 20px; margin-right: 8px;
          }
          a{text-decoration: none; color: #666666;}
        }
      }
      .col-md-4{
        p{
          line-height: 80px;    font-size: 16px; text-align: right;
          color: #666666;
          i{
            color: #f10310;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;
              @media screen and(max-width: 768px){
                  flex-direction: column;
              }
              a {
                img {
                  max-width: 150px;
                  text-decoration: none;
                  @media screen and(max-width: 768px){
                    max-width: 100%;
                  }
                }
              }
              .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;
        }
      }
    }
  }
}
.right-flag{
  background: rgba(255,255,255,0.7);
  z-index: 999;
  width: 170px;
  position: fixed !important;
  right: 20px;
  bottom: 160px;
  cursor: pointer;
  margin: 0 auto;
  padding: 10px;
  border-radius: 6px;
  @media  screen and(max-width: 768px) {
    display: none;
    bottom: 10px;
  }
  .item{
    text-align: center;
    margin: 0 auto;
    padding: 0;
    img{
      max-width: 150px;
    }
    h3{
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }
  }
}