@media screen and (max-width: 2560px){
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1400px;
  }
}
@media screen and (max-width: 1920px){
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1300px;
  }
}
@media screen and (max-width: 1600px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1300px;
  }
}
@media screen and (max-width: 1366px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1300px;
  }
}
@redc:#252686;
@bluec:#ff6a00;
@yellowc:#fdda04;
@treecolor:#898989;
.act_fadein{
  animation: fadeInB1s 0.2s ease-out backwards;
}
@keyframes fadeInB {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.carousel{
  @media screen and(max-width: 768px){
    margin-top: 50px;
  }
  .carousel-inner{
    position: relative;
    .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);
        }
      }
    }
    .container{
      position: absolute;
      bottom: 100px;
      /*background: #d1d1d1;*/
      left: 50%;
      transform: translateX(-50%);

      .index-btn{
        width: 100%;
        display: flex;
        justify-content: center;
        a{
          &:nth-child(2){
            margin-left: 20px;
          }
        }
      }
    }
  }
  button{
    &.carousel-control-prev{
      background: transparent;border: none;
    }
    &.carousel-control-next{
      background: transparent;border: none;
    }
  }
  .index-link{
    display: 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{
  .header-top{
    background: #f6f6f6;
    height: 40px;
    @media screen and(max-width: 768px){
      height: 40px;
    }
    .container{
      .row{
        .col-md-6{
          p{
            margin: 0 auto;
            padding: 0;
            line-height: 40px;
            color: #2f6144;
            font-size: 14px;
            i{margin-right: 4px;}
          }
          a{
            line-height: 30px;
            font-size: 14px;
            display: inline-block;
            border: #808080 solid 1px;
            border-radius: 15px;
            width: 80px;
            height: 30px;
            text-align: center;
            position: relative;
            top: 4px;
            color: #333333;
            text-decoration: none;
            @media screen and(max-width: 768px){
              border-radius: 15px;
              width: 60px;
              height: 30px;
              font-size: 12px;
              border: #d1d1d1 solid 1px;
            }
            i{
              @media screen and(max-width: 768px){
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .bg-light{
    background: rgba(0,0,0,0.1)!important; z-index: 998;
    @media screen and(max-width: 768px){
      background: @redc !important;
    }
  }
  .bg-light2{
    background: rgba(255,255,255,1)!important; z-index: 998;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.35);
    @media screen and(max-width: 768px){
      background: @redc;
    }
  }
  .navbar{
    height: 120px;
    @media screen and(max-width: 768px){
      height: 50px;
    }
    .w100m0auto();
    padding: 0px 10%;
    &.bg-light{
      .navbar-brand{
        &>img[src='content/images/logo.png']{
          display: none;
        }
        &>img[src='content/images/wlogo.png']{
          display: block;
        }
        @media screen and(max-width: 1920px){
          img{
            max-width: 450px;
          }
        }
        @media screen and(max-width: 1500px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1460px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1440px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1366px){
          img{
            max-width: 300px;
          }
        }
        @media screen and(max-width: 1250px){
          img{
            max-width: 250px;
          }
        }
        @media screen and(max-width: 1200px){
          img{
            max-width: 230px;
          }
        }
        @media screen and(max-width: 1100px){
          img{
            max-width: 200px;
          }
        }
        @media screen and (max-width: 768px){
          img{
            max-width: 200px;
          }
        }
      }
      .navbar-collapse{

        @media screen and(max-width: 768px){ background: @redc;}
        .navbar-nav{
          padding: 0;
          .nav-item{
            margin: 0 auto;
            padding: 0 15px;
            height: 120px;
            border-bottom: transparent solid 2px;
            @media screen and (max-width: 1440px){
              padding: 0 8px;
            }
            @media screen and (max-width: 1366px){
              padding: 0 8px;
            }
            @media screen and (max-width: 768px){
              height: 40px;
              width: 100%;
            }
            .nav-link{
              color: #ffffff;
            }
            &.active{
              .nav-link{
                color: #FFFFFF;
                text-shadow: 0 0 1px @redc;
              }
            }
            &:hover{
              .nav-link{
                color: #FFFFFF;
                text-shadow: 0 0 1px @redc;
              }
            }
            .nav-link{
              color: #ffffff; text-decoration: none; line-height: 120px;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;}
            }
          }
        }
      }
      .navbar-toggler-icon{
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }
      .navbar-toggler{
        border: rgba(255,255,255,0.5) solid 1px;
      }
    }
    &.bg-light2{

      .navbar-brand{
        &>img[src='content/images/logo.png']{
          display: block;
        }
        &>img[src='content/images/wlogo.png']{
          display: none;
        }
        @media screen and(max-width: 1920px){
          img{
            max-width: 450px;
          }
        }
        @media screen and(max-width: 1500px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1460px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1440px){
          img{
            max-width: 400px;
          }
        }
        @media screen and(max-width: 1366px){
          img{
            max-width: 300px;
          }
        }
        @media screen and(max-width: 1250px){
          img{
            max-width: 250px;
          }
        }
        @media screen and(max-width: 1200px){
          img{
            max-width: 230px;
          }
        }
        @media screen and(max-width: 1100px){
          img{
            max-width: 200px;
          }
        }
        @media screen and (max-width: 768px){
          img{
            max-width: 200px;
          }
        }
      }
      .navbar-collapse{
        @media screen and(max-width: 768px){ background: @redc;}
        .navbar-nav{
          padding: 0;
          .nav-item{
            margin: 0 auto;
            padding: 0 15px;
            height: 120px;
            border-bottom: transparent solid 2px;
            @media screen and (max-width: 1440px){
              padding: 0 8px;
            }
            @media screen and (max-width: 1366px){
              padding: 0 8px;
            }
            @media screen and (max-width: 768px){
              height: 40px;
              width: 100%;
            }
            .nav-link{
              color: #ffffff;
            }
            &.active{
              background: @redc;
              color: #ffffff;
              .nav-link{
                color: #ffffff;
              }
            }
            &:hover{
              background: @redc;
              .nav-link{
                color: #ffffff;
              }
            }
            .nav-link{
              color: #333333; text-decoration: none; line-height: 120px;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;}
            }
          }
        }
      }
    }

  }

}
.index-page{
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;

  .title{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 60px;
    position: relative;
    text-align: center;
    padding-bottom: 40px;
    h1{
      width: 100%;
      position: absolute;
      color: #ebebeb;
      font-size: 80px;
      font-weight: bold;
      left: 50%;
      transform: translateX(-50%);
      top: 0px;
      z-index: 1;
      line-height: 120px;
      @media screen and(max-width: 768px){
        font-size: 46px;
      }
      &:after{
        width: 100%;
        height: 1px;
        content:"";
        background: #e4e4e4;
        position: absolute;
        top:126px;
        left: 0px;
      }
      &:before{
        width: 63px;
        height: 3px;
        content:"";
        background: #c4c4c4;
        position: absolute;
        top:125px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 33;
      }
    }
    h2{    font-size: 32px;
      font-weight: bold;
      color: #333333;
      position: relative;
      z-index: 2;
      line-height: 120px;
      top:-55px;
      @media screen and(max-width: 768px){
        top:-60px;
      }
      span{
        color: @redc;
      }
      @media screen and (max-width: 768px){font-size: 28px}
    }

  }
.index-who-we-are {
  .title();
  .container{
    .who-we-are{
      display: flex;
      flex-wrap: nowrap;
      @media screen and(max-width: 768px){flex-wrap: wrap}
      .item{
        width: 33.33%;
        color: #666666;
        @media screen and(max-width: 768px){
          width: 100%;}
        .card{
          border: none;
          height: 370px;
          border-radius: 0px;
          box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
          transition: height 0.5s ease-out;
          img{
            margin: 0 auto;
            max-width: 90px;
            margin-top: 60px;
            &[src*=_on]{
            display: none;
          }
          }
          .card-body{
            padding: 0 50px;
            margin-bottom: 50px;
            .card-title{
              text-align: center;
              font-size: 18px;
              font-weight: bold;
              position: relative;
              line-height: 2em;
              &::after{
                position: absolute;
                content:"";
                width: 42px;
                height: 2px;
                background: #cccccc;
                left: 50%;
                bottom:-10px;
                transform: translateX(-50%);
              }
            }
            .card-text{
              margin-top: 40px;
            }
            .btn{
              display: none;
            }
          }
        }
        a{
          color: #666666;
        }
        &.on{
      background: @redc;/*    */
          color: #ffffff;
          .card{
            height: 420px;
            background: @redc;
            position: relative;
            top:-50px;
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            &:hover{
              transform: translateY(0px);
            }
            img{
              &[src*=_n]{
                display: none;
              }
              &[src*=_on]{
                display: inline-block;
              }
            }
            .card-body{
              .btn{
                display: inline-block;
                padding: 5px 25px;
                border-radius: 25px;
                color: #666666;
                background: #ffffff;
                margin-top: 40px;
              }
            }
          }
          a{
            color: #ffffff;
          }
        }
      }
    }
  }
}
.index-ad{
  background: url("../images/index-ad-bg.jpg") top center no-repeat;
  background-attachment: fixed;
  height: 330px;
  overflow: hidden;
  .container{
    position: relative;
    height: 330px;
    .text{
      max-width: 100%;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      img{
        @media screen and(max-width: 768px){
          max-width: 100%;
          margin-bottom: 40px;
        }
      }
      a{
        padding: 6px 25px;
        background: @redc;
        border-radius: 25px;
        color: #ffffff;
        margin: 0 auto; font-size: 16px;
      }
    }
  }
}
.index-what-we-do{
  .title();
  .container{
    .what-we-do{
      display: flex;
      justify-content: space-between;
      @media screen and(max-width: 768px){
        flex-wrap: wrap;
      }
      .item{
        width: calc(~"25% - 10px");
        @media screen and(max-width: 768px){
          width: 100%; margin-bottom: 30px;
        }
        .card{
          background: #f9f9f9;
          border: none;
          border-radius: 0px;
          transition: all 0.5s ease-out;
          height: 360px;
          .img{
            height: 170px;
            overflow: hidden;
            position: relative;
            img{
              position: absolute;
              left: 50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
          }
          .card-body{
            .card-title{}
            .card-text{font-size: 15px;}
            .btn{
              padding: 6px 25px;
              border-radius: 25px;
              border: #c1c1c1 solid 1px;font-size: 15px;
            }
          }
          &:hover{
            cursor: pointer;
            .card-body{
              .card-title{
                color: @redc;}
              .card-text{ }
            }
          }
        }
      }
    }
  }
}
.index-how-we-do {
  height: 700px;
  background: url("../images/index-how-we-do.jpg") top center;
  @media screen and(max-width: 768px){
    height: auto;
  }
  .title();
  .container{
    .title{
      h1{
        color: #666666;
        &:after{ background: #5c6267;}
        &:before{
          background: #5c6267;
        }
      }
      h2{
        color: #ffffff;
      }
    }
    .row{
      .col-md-4{
        .card{
          position: relative;
          height: 340px;
          @media screen and(max-width: 768px){
            margin-bottom: 60px;
          }
          .img{
            position: absolute;
            background: #ffffff;
            left: 50%;
            transform: translateX(-50%);
            top:-60px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: #1c252d solid 10px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
            line-height: 100px;
            img{max-width: 65px;
            &[src*="_hover"]{
              display: none;
            }
            }
          }
          .card-body{
            margin-top: 60px;
            .card-title{
              position: relative;
              &:after{
                width: 42px;
                height: 2px;
                position: absolute;
                content:"";
                background: #cccccc;
                left: 50%;
                transform: translateX(-50%);
                bottom: -10px;

              }
            }
            .card-text{
              font-size: 14px;
              margin-top: 40px;
              text-align: left;
              margin-bottom: 40px;
            }
          }
          &:hover{
            cursor: pointer;
            .img{
              img{
                &[src*="_hover"]{
                  display: inline-block;
                }
                &[src*="_no"]{
                  display: none;
                }
              }
            }
            .card-body{
              .card-title{
                color:@redc;
              }
            }
          }
        }
      }
    }
  }
}
.index-about-us{
  .title();
  .container{
    .index-about-us-content{
      background: #f6f6f6;
      display: flex;
      flex-wrap: nowrap;
      @media screen and(max-width: 768px){
       flex-direction: column;
      }
      .img{
        width: 45%;
        @media screen and(max-width: 768px){
          width: 100%;
        }
      }
      .about-text{
        width: 55%;
        padding: 20px;
        display: flex;
       flex-wrap: wrap;
        align-content: center;
        flex-direction: column;
        justify-content: center;
        @media screen and(max-width: 768px){
          width: 100%;
        }
        h3{
          font-size: 24px;color: @redc;
          line-height: 1.6em;
        }
        h5{
          font-size: 18px;
          color: #666666;
          margin-bottom: 10px;
        }
        p{
          text-align: left;
          text-indent: 2em;
          line-height: 1.8em;
        }
      }
    }
    .index-about-us-kh{
      margin-top: 40px;
      margin-bottom: 40px;
      display: flex;
      @media screen and(max-width: 768px){flex-wrap: wrap;}
      justify-content: space-between;
      .item{
        width: calc(~"33.33% - 30px");
        @media screen and(max-width: 768px){
          width: 100%;
          margin-bottom: 30px;
        }
        .card{
          border: none;
          border-radius: 0px;
          background: #f6f6f6;
          img{
            max-width: 100%;
          }
          .card-body{
            text-align: center;
            height: 150px;
            .card-title{
              font-weight: bold;
            }
            .card-text{
              font-size: 14px;
            }
          }
        }

      }

    }
  }
}
.index-news {
  background: #f5f5f5;
  .title();
  .container{
    .row{
      .col-md-6{
        .card{
          border: none;
          background: #ffffff;
          box-shadow: 0 0 15px rgba(0,0,0,0.15);
          margin-bottom: 30px;
          a{
            img{
              height: 260px;
            }
          }
          .card-body{
            .card-title{
              text-align: left;
              a{
                text-decoration: none;
                color: #666666;
              }
            }
            .card-text{
              text-align: left;
              a{
                text-decoration: none;
                color: #666666;
              }
            }
          }
        }
        ul{
          margin: 0 auto;
          padding: 0;

          li{
            text-align: left;
            list-style-type: none;
            border-bottom: #e7e7e7 solid 1px;
            margin-bottom: 10px;
            h3{
              font-size: 18px;
              a{
                color: #666666;text-decoration: none;
              }
            }
            p{

              &.time{
                color: #999999;
              }
              &.text{
                line-height: 28px;
                height: 56px;
                overflow: clip;
                a{
                  color: #666666;
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
    }
  }
}


}
footer{
  width: 100%;
  background: #2d3233;
  border-top: @redc solid 2px;
  /*  height: 60px;*/
  margin: 0 auto;
  padding: 0;
  .footer-link{
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    .container{
      .row{
        .col-md-4{
          p{
            line-height: 2em;
            &:nth-child(2){
              color: @treecolor;margin-top: 30px;
            }
          }
          h3{
            color: #ffffff;
          }
          ul{
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li{
              list-style-type: none; color: @treecolor;
              a{
                color: @treecolor;}
              i{
                color: @treecolor;
                margin-right: 10px;}
            }
          }
        }
        .col-md-5{
          p{
            line-height: 2em;
            &:nth-child(2){
              color: @treecolor;margin-top: 30px;
            }
          }
          h3{

            color: #ffffff;
          }
          ul{
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li{
              list-style-type: none; color: @treecolor;
              a{
                color: @treecolor;}
              i{
                color: @treecolor;
                margin-right: 10px;}
            }
          }
        }
        .col-md-2{
          h3{
            color: #ffffff; background: url("../images/fa-t.png") left center no-repeat;
          }
          ul{
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li{
              list-style-type: none; color: @treecolor;
              a{
                color: @treecolor;}
            }
          }
          img{
            max-width: 150px;
          }
        }
        .col-md-3{
          h3{
            color: #ffffff; background: url("../images/fa-t.png") left center no-repeat;
          }
          ul{
            margin: 0 auto;
            padding: 0;
            width: 100%;
            li{
              list-style-type: none; color: @treecolor;
              a{
                color: @treecolor;}
            }
          }
          img{
            max-width: 150px;
          }
        }
        &>div{
          font-size: 16px;
          h3{
            margin-bottom: 20px;font-size: 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 #424242;*/
    color: @treecolor;
    background: #262629;
  }
  .container{
    p{
      text-align: left;
      padding: 0;
      margin: 0 auto;
      color: @treecolor;line-height: 60px;
      font-size: 14px;
      @media screen and(max-width: 768px){
        span{display: none;}
      }
    }
  }
}
.nybanner{
  position: relative;
  .location{
    position: absolute;
    left: 50%;
    top:200px;
    transform: translateX(-50%);
    color: #ffffff;
    h2{font-size: 30px; text-align: center;}
    h3{font-size: 28px;text-align: center;}
  }
  ul{
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    li{
      list-style-type: none; float: left; margin-right: 60px;
      a{
        background: #ebebeb;
        padding: 10px 20px;
        color: #666666;
        text-decoration: none;

      }
      &.on{
       a{
         background: @redc;
         color: #ffffff;
       }
      }
      &:hover{
        a{
          background: @redc;
          color: #ffffff;
        }
      }
    }
  }
}
.about-page{

  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .title{
    margin-top: 60px;
    h1{
      position: relative;
      font-size: 80px;
      color: #ebebeb;
      text-align: center;
      height: 80px;
      line-height: 80px;
      margin: 0 auto;
      padding: 0;
      @media screen and(max-width: 768px){font-size: 32px;}
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #333333;
        font-size: 24px;
        display: block;
        font-weight: bold;
        em{font-style: normal;
          color: @redc; margin-left: 8px;}
      }
    }
  }
  .about-desc{
    margin: 30px auto;
    p{
      text-indent: 2em;
      font-size: 18px;
      line-height: 2em;
    }

  }
  .img{
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
  }
  .about-img{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-areas:'a a b'
                                          'c d e';
    img{
      width: 100%;
      max-height: 400px;
      &:nth-child(1){
        grid-area: a;
      }
    }
  }
  .index-about-us-content{
    background: #f6f6f6;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 70px;
    @media screen and(max-width: 768px){
      flex-direction: column;
    }
    .img{
      width: 45%;
      @media screen and(max-width: 768px){
        width: 100%;
      }
    }
    .about-text{
      width: 55%;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      flex-direction: column;
      justify-content: center;
      @media screen and(max-width: 768px){
        width: 100%;
      }
      h3{
        font-size: 24px;color: @redc;
        line-height: 1.6em;
        text-align: center;
      }
      h5{
        font-size: 18px;
        color: #666666;
        margin-bottom: 10px;
      }
      p{
        text-align: left;
        text-indent: 2em;
        line-height: 1.8em;
      }
    }
  }
  .index-about-us-kh{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    @media screen and(max-width: 768px){flex-wrap: wrap;}
    justify-content: space-between;
    .item{
      width: calc(~"33.33% - 30px");
      @media screen and(max-width: 768px){
        width: 100%;
        margin-bottom: 30px;
      }
      .card{
        border: none;
        border-radius: 0px;
        background: #f6f6f6;
        img{
          max-width: 100%;
        }
        .card-body{
          text-align: center;
          height: 150px;
          .card-title{
            font-weight: bold;
          }
          .card-text{
            font-size: 14px;
          }
        }
      }

    }

  }

}
.contact-page{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .title{
    margin-top: 60px;
    h1{
      position: relative;
      font-size: 80px;
      color: #ebebeb;
      text-align: center;
      height: 80px;
      line-height: 80px;
      margin: 0 auto;
      padding: 0;
      @media screen and(max-width: 768px){font-size: 32px;}
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #333333;
        font-size: 24px;
        display: block;
        font-weight: bold;
        em{font-style: normal;
          color: @redc; margin-left: 8px;}
      }
    }
  }
  .container{
    .contact-desc{
      width: 100%;
      margin: 0 auto;
      background: #f1f1f1;
      display: flex;
      margin-top: 50px;
      margin-bottom: 50px;
      @media screen and(max-width: 768px){
        flex-wrap: wrap;

      }
      .map{
        width: 20%;
        iframe{
          border: #e1e1e1 solid 1px;
        }
        @media screen and(max-width: 768px){
          width: 100%;}
      }
      .text{
        width: calc(~"45% - 20px");
        margin-left: 20px;
        padding: 20px;
        align-self: center;
        @media screen and(max-width: 768px){
          width: 100%;
          padding: 10px;

        }
        h3{
          line-height: 2em;
          @media screen and(max-width: 768px){font-size: 22px;}
        }
        p{
          i{margin-right: 6px;}
        }
      }
      .contact-form{
        padding: 0 20px;
        h2{
          @media screen and(max-width: 768px){
            display: none;
          }
        }
      }
    }
    .form-row{
      margin-bottom: 30px;
      @media screen and(max-width: 768px){
        margin-bottom: 0px;
      }
      .col-md-6{
        @media screen and(max-width: 768px){
          margin-bottom: 30px;
        }
      }
      .col-12{
        @media screen and(max-width: 768px){
          margin-bottom: 30px;
        }
      }
    }
  }
}
.service-page{
  .title{
    margin-top: 60px;
    h1{
      position: relative;
      font-size: 80px;
      color: #ebebeb;
      text-align: center;
      height: 80px;
      line-height: 80px;
      margin: 0 auto;
      padding: 0;
      margin-bottom: 40px;
      @media screen and(max-width: 768px){font-size: 32px;}
      span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        color: #333333;
        font-size: 42px;
        display: block;
        font-weight: bold;
        em{font-style: normal;
          color: #ff0000; margin-left: 8px;}
      }
    }
  }
  .subtitle{
    margin: 0 auto;
    padding: 110px 0 30px 0;
    h2{font-size: 44px;text-align: left;
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }
    span{font-size: 16px;
      font-weight: 400;margin-left: 20px;}
  }
  .service26{
    .container{
      h2{text-align: center;font-size: 40px;
      margin-bottom: 30px;}
      p{text-align: center;
        width: 80%;
        margin: 0 auto;font-size: 16px;
      margin-bottom: 50px;
      }
      .row{
        .col-md-6{
          .card{
            border-radius: 15px;
            img{
              border-radius: 15px;
            }
            .card-body{
              .card-title{}
              .card-text{
                text-align: left;
                width: 100%;
              }
            }
          }
        }
      }
    }
    .two{
      margin-top: 0px;
      width: 100%;
      /*background: #f7f8f9;*/
      padding-bottom: 60px;
      .container{
        .subtitle{
          h2{text-align: left;}
        }
        .row{
          .col-md-4{
            .card{
              position: relative;
              cursor: pointer;
              @media screen and(max-width: 768px){margin-bottom: 30px;}
              img{
                border-right: 0px;
              }
              .card-body{
                position: absolute;
                height: 95px;
                width: 100%;
                left: 0px;
                bottom: 0px;
                background: rgba(0,0,0,0.7);
                margin: 0 auto;
                padding: 0;
                .card-title{
                  color: #ffffff;
                  text-align: left;
                  width: 100%;font-size: 18px;
                  padding-left: 20px;
                  margin-top: 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
                .card-text{
                  color: #ffffff;text-align: left;
                  width: 100%;font-size: 14px;
                  padding-left: 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
              }
            }
          }
        }
      }

    }
    .three{
      background: url(../images/service/service260_bg.jpg) center center / cover;
      padding: 0px 0 60px;
      .container{
        .subtitle{
          h2{
            text-align: left;
            color: #666666;
            padding-bottom: 15px;
            border-bottom: #d1d1d1 solid 1px;
            span{
              color: #666666;
            }

          }
        }
       .row{
         .col-md-8{
           display: flex;
           align-items: center;

           .service{
             display: flex;
             flex-wrap: nowrap;
             @media screen and(max-width: 768px){
               flex-wrap: wrap;
             }
             .item{
               text-align: center;
               @media screen and(max-width: 1920px){
                 margin-right: 30px;
               }
               @media screen and(max-width: 1024px){
                 margin-right: 0px;
               }
               @media screen and(max-width: 768px){
                 width: 100%;
               }
               h2{
                 span{
                   margin: 0 auto;
                   padding: 0;
                   display: block;
                   width: 112px;
                   height: 112px;
                   border: #888888 solid 5px;
                   border-radius: 50%;
                   background: #777777;
                   line-height: 102px;
                   text-align: center;
                   i{
                     font-size: 36px;
                     color: #ffffff;
                   }
                 }
               }
               h3{
                 font-size: 22px;
                 color: #555555;
               }
               &.arrowr{
                 width: 60px;
                 display: flex;
                 justify-content: center;
                 align-self: center;
                 padding: 0 20px;
                 @media screen and(max-width: 768px){
                   padding: 20px 0;
                   width: 100%;
                 }
                 i{
                   color: #666666;
                   font-size: 36px;

                 }
                 .fa-angle-double-right{
                   @media screen and(max-width: 768px){display: none;}
                 }
                 .fa-angle-double-down{
                   @media screen and(min-width: 768px){display: none;}
                 }
               }
             }

           }
         }
         .col-md-4{
           text-align: left;
           .info{
             display: flex;
             flex-direction: column;
              align-items: center;
             @media screen and(max-width: 768px){align-items: center;margin-top: 50px;}
             .item{
               width: 200px;
               border: #888888 solid 5px;
               border-radius: 20px;
               background: #777777;
               color: #ffffff;
               h2{
                 margin: 0 auto;
                 padding: 0;
                 line-height: 110px;
                 height: 110px;
               }
               &:nth-child(2){
                 margin-top: 30px;
               }
             }
           }
         }
       }
      }
    }
  }
  .service27{
    .container{
      h2{text-align: center;font-size: 40px;
        margin-bottom: 30px;}
      p{text-align: center;
        width: 80%;
        margin: 0 auto;font-size: 16px;
        margin-bottom: 50px;
      }
      .row{
        .col-md-6{
          .card{
            border-radius: 15px;
            @media screen and(max-width: 768px){margin-bottom: 30px;}
            img{
              border-radius: 15px;
            }
            .card-body{
              .card-title{}
              .card-text{
                text-align: left;
                width: 100%;
              }
            }
          }
        }
      }
    }
    .two{
      margin-top: 40px;
      width: 100%;
      background: #f7f8f9;
      padding-bottom: 60px;
      padding-top: 60px;
      .container{
        .subtitle{
          h2{text-align: left;}
        }
        .row{
          .col-md-4{
            .card{
              position: relative;
              cursor: pointer;
              margin-bottom: 30px;
              @media screen and(max-width: 768px){margin-bottom: 30px;}
              img{
                border-right: 0px;
              }
              .card-body{
                position: absolute;
                height: 95px;
                width: 100%;
                left: 0px;
                bottom: 0px;
                background: rgba(0,0,0,0.7);
                margin: 0 auto;
                padding: 0;
                .card-title{
                  color: #ffffff;
                  text-align: center;
                  width: 100%;font-size: 18px;
                  line-height: 95px;
                  margin: 0 auto;
                  padding: 0;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
                .card-text{
                  color: #ffffff;text-align: left;
                  width: 100%;font-size: 14px;
                  padding-left: 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
              }
            }
          }
        }
      }

    }
    .three{
      background: url(../images/service/service260_bg.jpg) center center / cover;
      padding: 0px 0 60px;
      .container{
        .subtitle{
          h2{
            text-align: left;
            color: #666666;
            padding-bottom: 15px;
            border-bottom: #d1d1d1 solid 1px;
            span{
              color: #666666;
            }

          }
        }
        .row{
          .col-md-12{
            display: flex;
            align-items: center;

            .service{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              @media screen and(max-width: 768px){
                flex-wrap: wrap;
              }
              .item{
                text-align: center;
                width: 16.66%;
                margin-bottom: 30px;
                @media screen and(max-width: 1920px){
                  margin-right: 30px;
                }
                @media screen and(max-width: 1024px){
                  margin-right: 0px;
                }
                @media screen and(max-width: 768px){
                  width: 100%;
                  margin-bottom: 15px;
                }
                h2{
                  span{
                    margin: 0 auto;
                    padding: 0;
                    display: block;
                    width: 112px;
                    height: 112px;
                    border: #888888 solid 5px;
                    border-radius: 50%;
                    background: #777777;
                    line-height: 102px;
                    text-align: center;
                    i{
                      font-size: 36px;
                      color: #ffffff;
                    }
                  }
                }
                h3{
                  font-size: 20px;
                  color: #666666;
                }
                &.arrowr{
                  width: 40px;
                  padding: 0 20px;
                  position: relative;
                  @media screen and(max-width: 768px){
                    padding: 20px 0;
                    width: 100%;
                  }
                  i{
                    color: #666666;
                    font-size: 36px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top:42px;
                    @media screen and(max-width: 768px){
                      top:0px;
                    }
                  }
                  .fa-angle-double-right{
                    @media screen and(max-width: 768px){display: none;}
                  }
                  .fa-angle-double-down{
                    @media screen and(min-width: 768px){display: none;}
                  }
                }
                &.pc_hide{
                  display: none;
                  @media screen and(max-width: 768px){
                    display: block;
                  }
                }
              }

            }
          }
          .col-md-4{
            text-align: right;
            .info{
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              @media screen and(max-width: 768px){align-items: center;margin-top: 50px;}
              .item{
                width: 200px;
                border: #888888 solid 5px;
                border-radius: 20px;
                background: #777777;
                color: #ffffff;
                margin-bottom: 20px;
                h2{
                  margin: 0 auto;
                  padding: 0;
                  line-height: 60px;
                  height: 60px;
                  font-size: 24px;
                }
              }
            }
          }
        }
        p{
          width: 100%;
          text-align: left;
          color: #666666;
        }
      }
    }
  }
  .service28{
    padding-top: 30px;
    .container{
      h2{text-align: center;font-size: 40px;
        margin-bottom: 30px;}
      p{text-align: center;
        width: 80%;
        margin: 0 auto;font-size: 16px;
        margin-bottom: 50px;
      }
      .row{
        .col-md-4{
          .card{
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 0 15px rgba(0,0,0,0.25);
            /*background: #ff0000;*/
            height: 300px;
            @media screen and(max-width: 768px){margin-bottom: 30px;}
            img{
              border-radius: 15px;
            }
            h2{
              margin: 0 auto;
              text-align: center;
              margin-top: 30px;
              span{
                width: 92px;
                height: 92px;
                display: flex;
                border-radius: 50%;
                border: #d1d1d1 solid 1px;
                text-align: center;

                justify-content: center;
                align-items: center;
                i{
                  font-size: 60px;
                  color: #666666;
                }
              }
            }
            .card-body{
              margin: 0 auto;
              padding: 0 20px;
              .card-title{ text-align: center;
                margin: 20px auto;}
              .card-text{
                text-align: left;
                width: 100%;
              }
            }
          }
        }
      }
    }
    .two{
      margin-top: 40px;
      width: 100%;
      padding-bottom: 60px;
      .container{
        .subtitle{
          h2{text-align: left;}
        }
        .row{
          .col-md-6{
            .card{
              position: relative;
              cursor: pointer;
              border-radius: 0px;
              height: auto;
              @media screen and(max-width: 768px){margin-bottom: 30px;}
              img{
                border-right: 0px;border-radius: 0px;
              }
              .card-body{
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                background: rgba(0,0,0,0.7);
                margin: 0 auto;
                padding: 20px 0;
                .card-title{
                  color: #ffffff;
                  text-align: left;
                  width: 100%;font-size: 18px;
                  line-height: 1.8em;
                  margin: 0 auto;
                  padding: 0 0 0 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
                .card-text{
                  color: #ffffff;text-align: left;
                  width: 100%;font-size: 14px;
                  padding-left: 20px;
                  margin: 0 auto;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
              }
              &:hover{

              }
            }
          }
        }
      }

    }
    .three{
      background: url(../images/service/service260_bg.jpg) center center / cover;
      padding: 0px 0 40px;
      /*.container{
        .subtitle{
          h2{
            text-align: left;
            color: #ffffff;
            padding-bottom: 15px;
            border-bottom: #586fa4 solid 1px;
            span{
              color: #ffffff;
            }

          }
        }
        .row{
          .col-md-8{
            display: flex;
            align-items: center;

            .service{
              display: flex;
              flex-wrap: wrap;
              @media screen and(max-width: 768px){
                flex-wrap: wrap;
              }
              .item{
                text-align: center;
                width: 12.5%;
                margin-bottom: 30px;
                @media screen and(max-width: 1920px){
                  margin-right: 30px;
                }
                @media screen and(max-width: 1024px){
                  margin-right: 0px;
                }
                @media screen and(max-width: 768px){
                  width: 100%;
                  margin-bottom: 15px;
                }
                h2{
                  span{
                    margin: 0 auto;
                    padding: 0;
                    display: block;
                    width: 112px;
                    height: 112px;
                    border: #526eb0 solid 5px;
                    border-radius: 50%;
                    background: #758bc0;
                    line-height: 102px;
                    text-align: center;
                    i{
                      font-size: 36px;
                      color: #ffffff;
                    }
                  }
                }
                h3{
                  font-size: 20px;
                  color: #ffffff;
                }
                &.arrowr{
                  width: 40px;
                  display: flex;
                  justify-content: center;
                  align-self: center;
                  padding: 0 20px;
                  @media screen and(max-width: 768px){
                    padding: 20px 0;
                    width: 100%;
                  }
                  i{
                    color: #ffffff;
                    font-size: 36px;

                  }
                  .fa-angle-double-right{
                    @media screen and(max-width: 768px){display: none;}
                  }
                  .fa-angle-double-down{
                    @media screen and(min-width: 768px){display: none;}
                  }
                }
              }

            }
          }
          .col-md-4{
            text-align: right;
            .info{
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              @media screen and(max-width: 768px){align-items: center;margin-top: 50px;}
              .item{
                width: 200px;
                border: #526eb0 solid 5px;
                border-radius: 20px;
                background: #758bc0;
                color: #ffffff;
                margin-bottom: 20px;
                h2{
                  margin: 0 auto;
                  padding: 0;
                  line-height: 60px;
                  height: 60px;
                  font-size: 24px;
                }
              }
            }
          }
        }
        p{
          width: 100%;
          text-align: left;
          color: #ffffff;
        }
      }*/
      .container{
        .subtitle{
          h2{
            text-align: left;
            color: #666666;
            padding-bottom: 15px;
            border-bottom: #d1d1d1 solid 1px;
            span{
              color: #666666;
            }

          }
        }
        .row{
          .col-md-12{
            display: flex;
            align-items: center;

            .service{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              width: 100%;
              margin: 0 auto;
              padding: 0;
              @media screen and(max-width: 768px){
                flex-wrap: wrap;
              }
              .item{
                text-align: center;
                margin-bottom: 30px;
                width: 25%;
                @media screen and(max-width: 1920px){
                  margin-right: 30px;
                }
                @media screen and(max-width: 1024px){
                  margin-right: 0px;
                }
                @media screen and(max-width: 768px){
                  width: 100%;
                }
                h2{
                  span{
                    margin: 0 auto;
                    padding: 0;
                    display: block;
                    width: 112px;
                    height: 112px;
                    border: #888888 solid 5px;
                    border-radius: 50%;
                    background: #777777;
                    line-height: 102px;
                    text-align: center;
                    i{
                      font-size: 36px;
                      color: #ffffff;
                    }
                  }
                }
                h3{
                  font-size: 17px;
                  color: #555555;
                }
                &.arrowr{
                  width: 60px;
                  display: flex;
                  /*                  justify-content: center;
                                    align-self: center;*/
                  padding: 0 20px;
                  position: relative;
                  @media screen and(max-width: 768px){
                    padding: 20px 0;
                    width: 100%;
                  }
                  i{
                    color: #777777;
                    font-size: 36px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top:42px;
                    @media screen and(max-width: 768px){
                      top:5px;
                    }
                  }
                  .fa-angle-double-right{
                    @media screen and(max-width: 768px){display: none;}
                  }
                  .fa-angle-double-down{
                    @media screen and(min-width: 768px){display: none;}
                  }
                }
              }

            }
          }
        }
      }
    }
  }
  .service29{
    h4{
      font-size: 22px;
      font-weight: 300;line-height: 2.2em;
      padding: 0 95px;
      /*margin-bottom: 60px;*/
      /*&:first-letter{
        font-size: 60px;
        position: relative;
        margin-right: 15px;
        color: #666666;
      }*/
      text-indent: 2em;
      @media screen and(max-width: 768px){
        padding: 0 38px;
      }
    }
    p{
      font-size: 17px;line-height: 1.6em;
      text-align: left;
    }
    ul{
      padding: 0;
      margin: 0 auto;
      li{list-style-type: none;
        margin-bottom: 15px;
        font-size: 17px;
        strong{
          font-weight: 600;
        }
      }
    }
    .row{
      margin-top: 60px;
      .col-md-4{
        margin-bottom: 35px;
        .card{
          box-shadow: 0 0 15px rgba(0,0,0,0.25);
          border-radius: 10px;
          height: 230px;
          .card-body{
            .card-title{
              text-align: center;
              font-weight: 600;
              font-size: 20px;
              line-height: 2.4em;
              color: #555555;
            }
            .card-text{
              text-align: left;
            }
          }
          &:hover{
            background: @redc;
            cursor: pointer;
            .card-body{
              .card-title{
                color: #ffffff;}
              .card-text{color: #ffffff;}
            }
          }
        }
      }
      .col-md-12{
        display: flex;
        align-items: center;
        .service{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 100%;
          margin: 0 auto;
          padding: 0;
          @media screen and(max-width: 768px){
            flex-wrap: wrap;
          }
          .item{
            text-align: center;
            margin-bottom: 30px;
            width: 25%;
            border-radius: 50%;
            @media screen and(max-width: 1920px){

            }
            @media screen and(max-width: 1024px){
              margin-right: 0px;
            }
            @media screen and(max-width: 768px){
              width: 50%;
            }
            h2{
              span{
                margin: 0 auto;
                padding: 0;
                display: block;
                width: 112px;
                height: 112px;
                border: #888888 solid 5px;
                border-radius: 50%;
                background: #777777;
                line-height: 102px;
                text-align: center;
                /*box-shadow: 0 0 15px rgba(0,0,0,0.25);*/
                transition: all 0.5s ease-out;
                &:hover{
                  transform: scale(1.1);
                  cursor: pointer;
                }
                i{
                  font-size: 36px;
                  color: #ffffff;
                }
              }
            }
            h3{
              font-size: 18px;
              color: #555555;
              line-height: 3em;
              font-weight: 300;
            }

          }

        }

      }
    }
  }
  .service30{
    .container{
      h2{text-align: center;font-size: 40px;
        margin-bottom: 30px;}
      p{text-align: center;
        width: 80%;
        margin: 0 auto;font-size: 16px;
        margin-bottom: 50px;
      }
      .row{
        .col-md-6{
          .card{
            border-radius: 15px;
            img{
              border-radius: 15px;
            }
            .card-body{
              .card-title{}
              .card-text{
                text-align: left;
                width: 100%;
              }
            }
          }
        }
      }
    }
    .two{
      margin-top: 0px;
      width: 100%;
      /*background: #f7f8f9;*/
      padding-bottom: 60px;
      .container{
        .subtitle{
          h2{text-align: left;}
        }
        .row{
          .col-md-4{
            .card{
              position: relative;
              cursor: pointer;
              @media screen and(max-width: 768px){margin-bottom: 30px;}
              img{
                border-right: 0px;
              }
              .card-body{
                position: absolute;
                height: 95px;
                width: 100%;
                left: 0px;
                bottom: 0px;
                background: rgba(0,0,0,0.7);
                margin: 0 auto;
                padding: 0;
                .card-title{
                  color: #ffffff;
                  text-align: left;
                  width: 100%;font-size: 18px;
                  padding-left: 20px;
                  margin-top: 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
                .card-text{
                  color: #ffffff;text-align: left;
                  width: 100%;font-size: 14px;
                  padding-left: 20px;
                  @media screen and(max-width: 768px){padding-left: 5px;}
                }
              }
            }
          }
        }
      }

    }
    .three{
      background: url(../images/service/service300_bg.jpg) center center / cover;
      padding: 0px 0 170px;
      .container{
        .subtitle{
          h2{
            text-align: left;
            color: #666666;
            padding-bottom: 15px;
            border-bottom: #d1d1d1 solid 1px;
            span{
              color: #666666;
            }

          }
        }
        .row{
          .col-md-12{
            display: flex;
            align-items: center;

            .service{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              width: 100%;
              margin: 0 auto;
              padding: 0;
              @media screen and(max-width: 768px){
                flex-wrap: wrap;
              }
              .item{
                text-align: center;
                margin-bottom: 30px;
                width: 10%;
                @media screen and(max-width: 1920px){
                  margin-right: 30px;
                }
                @media screen and(max-width: 1024px){
                  margin-right: 0px;
                }
                @media screen and(max-width: 768px){
                  width: 100%;
                }
                h2{
                  span{
                    margin: 0 auto;
                    padding: 0;
                    display: block;
                    width: 112px;
                    height: 112px;
                    border: #888888 solid 5px;
                    border-radius: 50%;
                    background: #777777;
                    line-height: 102px;
                    text-align: center;
                    i{
                      font-size: 36px;
                      color: #ffffff;
                    }
                  }
                }
                h3{
                  font-size: 17px;
                  color: #555555;
                }
                &.arrowr{
                  width: 60px;
                  display: flex;
/*                  justify-content: center;
                  align-self: center;*/
                  padding: 0 20px;
                  position: relative;
                  @media screen and(max-width: 768px){
                    padding: 20px 0;
                    width: 100%;
                  }
                  i{
                    color: #777777;
                    font-size: 36px;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top:42px;
                    @media screen and(max-width: 768px){
                      top:5px;
                    }
                  }
                  .fa-angle-double-right{
                    @media screen and(max-width: 768px){display: none;}
                  }
                  .fa-angle-double-down{
                    @media screen and(min-width: 768px){display: none;}
                  }
                }
                &.pc_hide{
                  display: none;
                  @media screen and(max-width: 768px){
                    display: block;
                  }
                }
              }

            }
          }
        }
      }
    }
  }
  .service300{
    ul{
      margin: 0 auto;
      padding: 0;
      li{
        list-style-type: none;
        font-size: 17px;
        position: relative;
        margin-bottom: 80px;
        &.q{
          border: #d1d1d1 solid 1px;
          border-radius: 20px;
          padding: 10px;
          margin-bottom: 20px;
        }
        span{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: -40px;
          /*  margin-left: 50px;*/
          i{
            font-size: 50px; color: @redc;
          }
        }

      }
    }
    .container{
      .subtitle{
        h2{
          margin-bottom: 30px;
          span{}
        }
      }
      .row{
        .col-md-3{
          .card{
            background: #ffffff;
            border: none;
            box-shadow: 0 0 15px rgba(0,0,0,0.25);
            height: 315px;
            margin-bottom: 30px;
            .card-header{
              width: 100%;
              margin: 0 auto;
              padding: 0;
              height: 82px;
              background: #30b4fc;
              position: relative;
              span{
                position: absolute;
                display: block;
                left: 50%;
                bottom: -41px;
                width: 82px;
                height: 82px;
                border-radius: 41px;
                border: 10px solid #30b4fc;
                transform: translateX(-50%);
                background: #ffffff;
                text-align: center;
                color: #626262;
                font-size: 30px;
                line-height: 60px;
                font-weight: bold;
              }
            }
            .card-body{
              margin-top: 60px;
              .card-title{
                text-align: center;
              }
              .card-text{
                font-size: 15px;
              }
            }
          }
          &:nth-child(4n){
            .card{

              .card-header{
                background: #a3cf24;
                span{

                  border: 10px solid #a3cf24;
                }
              }
            }
          }
          &:nth-child(4n+1){
            .card{

              .card-header{
                background: #30b5fb;
                span{

                  border: 10px solid #30b5fb;
                }
              }
            }
          }
          &:nth-child(4n+2){
            .card{

              .card-header{
                background: #4584d3;
                span{

                  border: 10px solid #4584d3;
                }
              }
            }
          }
          &:nth-child(4n+3){
            .card{

              .card-header{
                background: #5bcf76;
                span{

                  border: 10px solid #5bcf76;
                }
              }
            }
          }
        }

      }
    }
  }

}
.products {
  width: 100%;
  background: #ffffff;
  .container {
    .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 {
          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;
        }
      }
    }
  }
}
#email_form{
padding-top: 50px;
}