@charset "UTF-8";

/*=========== PC public CSS ===========*/

*,
:before,
:after {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
pre,
form,
fieldset,
figure,
figcaption,
table,
th,
td img {
  margin: 0;
  padding: 0;
}


body {
  font-family: Helvetica, Arial;
  color: #232323;
  font-size: 16px;
  line-height: 1.7;
  margin: 0 auto;
  background-color: #FFF;
  overflow-x: hidden;
}

ol,
ul,
li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
}

i,
em {
  font-style: normal;
}

a {
  text-decoration: none;
  cursor: pointer;
  outline: none;
  color: #333333;
  transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}

a:hover,
a:active,
a:link,
a:visited {
  text-decoration: none;
}

i,
em {
  font-style: normal;
}

p {
  color: #666666;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -ms-interpolation-mode: bicubic;
  border: 0;
  object-fit: cover;
  vertical-align: middle;
  transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

input,
select,
textarea,
button {
  color: #333;
  font-size: 16px;
  outline: none;
  border: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Helvetica, Arial;
}

input,
button {
  border-radius: 0;
  -webkit-appearance: none;
}


/*清除IOS默认圆角*/

textarea {
  resize: none;
  outline: none;
  border: none;
}


/*去除右下角拖动边框标识*/

input:-ms-clear {
  display: none;
}


/*消除 IE10 里的叉号*/

input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  outline: none;
}

::-webkit-input-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}

:-moz-placeholder {
  color: #999;
}


/*产品内页参数表*/

table {
  word-break: break-all;
}

table td {
  padding: 8px;
}


/*边线重叠*/

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

.wrap {
  max-width: 1400px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

.wrap:after,
ul:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


/******************** index-top begin *****************/

.index-top {
  background: #165741;
}

.index-top .infor {
  float: left;
}

.index-top .infor li {
  float: left;
  color: #ffffff;
  line-height: 51px;
}

.index-top .infor li a {
  color: #ffffff;
}

.index-top .infor li a {
  margin-right: 50px;
}

.index-top .infor li a:hover {
  color: #ffffff;
}

.index-top .getquote {
  float: right;
  padding: 12px 31px;
  background: #ffc000;
  color: #ffffff;
  text-transform: capitalize;
  font-weight: 700;
  position: relative;
  z-index: 0;
}

.index-top .getquote:before,
.index-top .getquote:after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ffc000;
  z-index: -1;
  transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}

.index-top .getquote:before {
  left: 0;
}

.index-top .getquote:after {
  right: 0;
}

.index-top .getquote:hover:before,
.index-top .getquote:hover:after {
  width: 50%;
}

.index-top .icon {
  float: right;
}

.index-top .icon li {
  float: left;
  margin-right: 35px;
  line-height: 51px;
}

.index-top .icon li img {
  opacity: .6;
  filter: alpha(opacity=60);
}

.index-top .icon li:hover img {
  opacity: 1;
  filter: alpha(opacity=100);
}


/******************** index-top end *****************/


/******************** index-menu begin *****************/

.index-menu {
  padding: 20px 0;
}

.index-menu .logo {
  float: left;
  margin-top: 14px;
}

.index-menu .address {
  float: right;
  position: relative;
  padding-left: 80px;
  padding-top: 5px;
}

.index-menu strong {
  text-transform: capitalize;
}

.index-menu .address img {
  position: absolute;
  top: 0;
  left: 0;
}

    .index-menu .nav {
        float: right;
        margin-right: 50px;
        z-index: 999;
    }

.index-menu .nav li {
  float: left;
}

.index-menu .nav li a {
  color: #687f9b;
  font-weight: 700;
  line-height: 70px;
  padding: 0 20px;
  line-height: 64px;
  text-transform: uppercase;
}

.index-menu .nav li.active a,
.index-menu .nav li:hover a {
  color: #ffc000;
}

.nav-btn {
  display: none;
  float: right;
}

.nav-btn span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: #ffc000;
  margin-top: 8px;
}



@media screen and (max-width:1280px) {
  .index-menu .nav {
    margin-right: 25px;
  }

  .index-menu .nav li a {
    padding: 0 10px;
  }
}

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

  .index-menu .nav,
  .index-menu .address,
  .index-top .icon {
    display: none;
  }

  .index-menu .logo {
    margin-top: 0;
  }

  .nav-btn {
    display: block;
  }

  .index-menu .nav {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #000;
    padding: 30px 0;
    left: 0;
    top: 135px;
  }

  .index-menu .nav li {
    text-align: center;
    width: 100%;
    float: none;
  }

  .index-menu .nav li a {
    line-height: 60px;
    color: #ffffff;
    text-transform: uppercase;
  }
}

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

  .index-top .getquote,
  .index-top .infor li:nth-child(2) {
    display: none;
  }
}


/******************** index-menu end *****************/


/********************index-banner begin *************/

.index-banner {
  width: 100%;
  background: url(../images/banner1.jpg) no-repeat center;
  background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  padding: 120px 0 80px 0;
  text-align: center;
}

.index-banner h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 1.5;
  margin-bottom: 25px;
  text-transform: capitalize;
}

.index-banner P {
  COLOR: #FFFFFF;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 70px;
}

.index-banner a {
  display: inline-block;
  padding: 15px 50px;
  background-color: #ffc000;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-transform: uppercase;
}

.index-banner a:hover {
  background-color: #fff;
  color: #ffc000;
  border: 1px solid #ffc000;
}

@media screen and (max-width:991px) {
  .index-banner {
    margin-top: 0;
    padding: 120px 0 80px 0;
  }

  .index-banner h1 {
    font-size: 36px;
  }

  .index-banner P {
    margin-bottom: 80px;
  }
}

@media screen and (max-width:640px) {
  .index-banner {
    margin-top: 0;
    padding: 100px 0 60px 0;
  }

  .index-banner h1 {
    font-size: 32px;
  }

  .index-banner a {
    padding: 10px 35px;
  }

  .index-banner P {
    margin-bottom: 60px;
  }
}

@media screen and (max-width:480px) {
  .index-banner {
    margin-top: 0;
    padding: 80px 0 40px 0;
  }

  .index-banner h1 {
    font-size: 26px;
  }

  .index-banner P {
    margin-bottom: 40px;
  }

  .index-banner a {
    padding: 8px 20px;
  }
}


/********************index-banner end ********************/


/******************index-about begin*********************/

.index-about {
  padding: 50px 0;
  background-color: #f5f5f5;
}

.index-about .text {
  background: #ffc000;
  padding: 62px 40px;
  width: 420px;
  float: left;
}

.index-about .text strong {
  display: block;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-size: 24px;
  font-weight: 400;
  line-height: 38px;
  margin-bottom: 0;
  padding-bottom: 21px;
}

.index-about .text h3 {
  font-size: 20px;
  color: #ffffff;
  margin: 20px 0 15px;
}

.index-about .text p,
.index-about .text a {
  display: block;
  color: #ffffff;
}

.index-about .infor {
  width: 65%;
  float: right;
}

.index-about .infor h2 {
  font-size: 32px;
  text-transform: capitalize;
  margin-bottom: 15px;
}

.index-about .infor p {
  color: #666666;
  margin-bottom: 35px;
}

.index-about .infor ul {
  margin-left: -2%;
}

.index-about .infor li {
  width: 48%;
  margin-left: 2%;
  float: left;
  margin-bottom: 25px;
  border-left: 2px solid #ffc000;
  padding-left: 10px;
  color: #666666;
}

@media screen and (max-width:1440px) {
  .index-about .infor {
    width: 60%;
  }
}

@media screen and (max-width:1200px) {
  .index-about {
    padding: 40px 0;
  }

  .index-about .text {
    width: 340px;
    padding: 40px 20px;
  }

  .index-about .infor {
    width: 66%;
  }
}

@media screen and (max-width:1100px) {
  .index-about .text {
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 25px;
  }

  .index-about .infor {
    width: 100%;
  }

  .index-about .infor h2 {
    font-size: 28px;
  }
}

@media screen and (max-width:991px) {
  .index-about .infor h2 {
    font-size: 26px;
  }
}

@media screen and (max-width:768px) {
  .index-about .infor li {
    width: 98%;
  }

  .index-about .infor h2 {
    font-size: 24px;
  }
}

@media screen and (max-width:640px) {
  .index-about .infor h2 {
    font-size: 22px;
  }
}


/******************index-about end*********************/


/*******************big-tit begin*********************/

.big-tit h2 {
  position: relative;
  letter-spacing: 0.5px;
  font-size: 30px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 40px;
  margin-bottom: 10px;
  padding-bottom: 30px;
  text-align: center;
}

.big-tit h2::before {
  display: block;
  content: "";
  position: absolute;
  height: 2px;
  width: 80px;
  left: 50%;
  top: 60px;
  text-align: center;
  background: #ffc000;
  margin-left: -42px;
}

.big-tit h2::after {
  display: block;
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  left: 50%;
  top: 56px;
  z-index: 1;
  text-align: center;
  background: #ffc000;
  margin-left: -7px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/******************big-tit end*********************/


/*******************index-pro begin*********************/

.index-pro {
  margin: 25px 0;
}

.index-pro-con ul {
  margin-left: -3%;
}

.index-pro-con li {
  width: 22%;
  float: left;
  margin-left: 3%;
  margin-bottom: 25px;
}

.index-pro-con li .pic {
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 70%;
}

.index-pro-con li .pic:before {
  content: "";
  position: absolute;
  background: #ffc000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: .7;
  z-index: 1;
  transition: 500ms;
  transform: scaleX(0);

}

.index-pro-con li:hover .pic:before {
  transform: scaleY(1);
}

.index-pro-con li .pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-pro-con li .tit {
  text-align: center;
  padding: 30px 20px;
  position: relative;
  background: #f8f8f8;
}

.index-pro-con li .tit:after {
  content: "";
  height: 3px;
  width: 40%;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  background: #ffc000;
  transition: 400ms;
}

.index-pro-con li .tit h3 {
  margin-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 20px;
}

.index-pro-con li .tit p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  height: 162px;
}

.index-pro-con li:hover .tit:after {
  width: 100%;
}

.index-pro-con li .tit h3:hover a {
  color: #ffc000;
}

@media screen and (max-width:991px) {
  .index-pro-con li {
    width: 47%;
  }
}

@media screen and (max-width:768px) {
  .index-pro-con li .tit {
    padding: 20px 15px;
  }

  .index-pro-con li .tit h3 {
    font-size: 18px;
  }
}

@media screen and (max-width:640px) {
  .index-pro-con li {
    width: 97%;
  }
}


/******************index-pro end*********************/


/******************index-news begin *********************/

.index-news {
  padding-top: 35px;
}

.index-news ul {
  overflow: hidden;
  margin-bottom: 50px;
}

.index-news ul li {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}

.index-news ul li a {
  display: block;
  color: #333333;
  line-height: 45px;
  padding: 0 30px;
  border: 1px solid #ffc000;
  border-radius: 4px;
}

.index-news ul li:hover a {
  background: #ffc000;
  color: #fff;
}


/******************index-news end *********************/


/******************index-footer begin *********************/

.index-footer {
  background-color: #000000;
  padding: 15px 0;
}

.index-footer p {
  color: #ffffff;
  text-align: center;
}

.index-footer p a {
  color: #ffc000;
}


/******************index-footer end *********************/


/******************breadcrumb-area begin *********************/

.breadcrumb-area {
  width: 100%;
  padding: 20px 0 50px;
  background: url(../images/ny-banner.jpg) no-repeat center center;
  background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  text-align: center;
}

.breadcrumb-area ol {
  display: block;
  overflow: hidden;
  margin-bottom: 50px;
  text-align: left;
}

.breadcrumb-area li {
  display: inline;
  color: #cccccc;
}

.breadcrumb-area li a {
  color: #ffffff;
  text-transform: capitalize;
}

.breadcrumb-area li a:after {
  content: '/';
  color: #ffffff;
  margin: 0 10px;
  display: inline-block;
}

.breadcrumb-area li a:hover {
  color: #ffc000;
}

.breadcrumb-area strong {
  display: block;
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
}

.breadcrumb-area h1 {
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 25px;
}

.breadcrumb-area p {
  color: #cccccc;
  text-align: center;
}

.breadcrumb-area .getquote:hover,
.breadcrumb-area .btn {
  display: inline-block;
  padding: 7px 15px;
  color: #ffffff;
  border: 1px solid #ffc000;
  text-transform: capitalize;
  background: transparent;
  margin: 0 5px;
}

.breadcrumb-area .btn:hover,
.breadcrumb-area .getquote {
  background-color: #ffc000;
}

@media screen and (max-width:991px) {
  .breadcrumb-area h1 {
    font-size: 26px;
  }
}

@media screen and (max-width:480px) {
  .breadcrumb-area h1 {
    font-size: 22px;
  }
}


/******************breadcrumb-area end *********************/


/******************ny-about begin *********************/

.about-boxone {
  padding: 100px 0;
  border-bottom: 2px solid #eee;
}

.about-boxone .wrap {
  max-width: 1200px;
}

.about-boxone .text {
  width: 50%;
  float: left;
  padding-top: 25px;
}

.about-boxone strong {
  display: block;
  color: #ffc000;
  text-transform: uppercase;
}

.about-boxone h1 {
  font-size: 26px;
  color: #263a4f;
  margin: 15px 0 25px 0;
  line-height: 1.3;
}

.about-boxone p {
  color: #6a8695;
  font-size: 14px;
}

.about-boxone ul {
  margin: 20px 0;
}

.about-boxone li {
  background: url(../images/icon-finger.png) no-repeat left center;
  padding-left: 30px;
  line-height: 24px;
  margin: 10px 0;
  font-size: 14px;
}

.about-boxone a {
  display: inline-block;
  padding: 8px 15px;
  background-color: #ffc000;
  color: #ffffff;
  text-transform: uppercase;
}

.about-boxone img {
  width: 40%;
  float: right;
}

.about-boxtwo {
  background-color: #f9f9f9;
  padding: 80px 0;
}

.about-boxtwo {
  margin-left: -6.33333%;
}

.about-boxtwo li {
  float: left;
  width: 27%;
  margin-left: 6.33333%;
}

.about-boxtwo .pic {
  position: relative;
  width: 110px;
  height: 110px;
  padding: 20px;
  margin: 0 auto;
  border: 5px solid hsla(45, 100%, 50%, 0.502);
  border-radius: 50%;
}

.about-boxtwo .pic span {
  display: block;
  position: absolute;
  background-color: #ffc000;
  font-size: 16px;
  color: #fff;
  width: 40px;
  height: 40px;
  top: 0;
  right: -15px;
  font-weight: 600;
  line-height: 30px;
  border-radius: 50%;
  border: 5px solid hsla(45, 100%, 50%, 0.502);
  border-color: #caa534;
  text-align: center;
}

.about-boxtwo .pic .qx {
  position: absolute;
  top: 20px;
  right: -238px;
}

.about-boxtwo li h2 {
  color: #263a4f;
  text-align: center;
  text-transform: capitalize;
  margin: 20px 0 10px 0;
}

.about-boxtwo li p {
  color: #6a8695;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: 92px;
}

.about-boxthree {
  background: url(../images/about-boxthree.jpg) no-repeat center top;
  background-size: 100% 430px;
  padding: 100px 0 0 0;
}

.about-boxthree .text {
  text-align: center;
}

.about-boxthree .text strong {
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}

.about-boxthree .text h2 {
  font-size: 28px;
  color: #ffffff;
  padding: 0 25%;
  line-height: 1.3;
  margin: 35px 0;
}

.about-boxthree .text a {
  display: inline-block;
  padding: 8px 25px;
  background-color: #ffc000;
  color: #ffffff;
}

.about-boxthree ul {
  margin-top: 50px;
}

.about-boxthree ul li {
  float: left;
  width: 25%;
  background-color: #fff;
  padding: 30px 0;
  text-align: center;
}

.about-boxthree ul li img {
  width: 70px;
  height: 70px;
  display: block;
  margin: 0 auto;
}

.about-boxthree ul li strong {
  font-size: 32px;
  display: inline-block;
}

.about-boxthree ul li p {
  text-transform: capitalize;
}

@media screen and (max-width:991px) {
  .about-boxone {
    padding: 50px 0;
  }

  .about-boxone img,
  .about-boxone .text {
    width: 100%;
    float: none;
  }

  .about-boxone img {
    margin-top: 15px;
  }

  .about-boxtwo .pic .qx {
    display: none;
  }
}

@media screen and (max-width:768px) {
  .about-boxone {
    padding: 25px 0;
  }

  .about-boxtwo li {
    width: 93.66666%;
  }

  .about-boxthree .text h2 {
    padding: 0;
  }

  .about-boxthree ul li {
    width: 50%;
  }

  .about-boxthree .text h2 {
    font-size: 24px;
  }
}

@media screen and (max-width:480px) {
  .about-boxone h1 {
    font-size: 24px;
  }

  .about-boxthree .text h2 {
    font-size: 20px;
  }

  .about-boxthree ul li {
    width: 100%;
  }
}


/******************ny-about end *********************/


/**********************pro-list begin*************************/

.pro-list {
  margin: 25px 0;
  padding: 25px 0;
}

@media screen and (max-width:640px) {
  .pro-list {
    margin: 15px 0;
    padding: 0;
  }
}


/***********pro-type begin************/

.pro-type {
  margin: 0 0 25px 0;
}

.pro-type .product-lb {
  overflow: hidden;
}

.pro-type .product-lb li {
  float: left;
  margin-bottom: 10px;
  text-align: center;
  padding: 0 5px;
}

.pro-type .product-lb li a {
  display: block;
  color: #ffc000;
  padding: 0 20px;
  line-height: 44px;
  border: 1px solid #ffc000;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.classify-tit {
  display: none;
  text-align: center;
  line-height: 40px;
  color: #fff;
  padding: 0 20px;
  background: url('../images/click.png') no-repeat 25% center;
  background-size: 24px 24px;
  -webkit-background-size: 24px 24px;
  background-color: #ffc000;
  margin-bottom: 20px;
}

.classify-tit img {
  width: 20px;
  height: auto;
  float: right;
  margin-top: 13px;
}

.pro-type .product-lb li.active a,
.pro-type .product-lb li:hover a {
  color: #FFF;
  background-color: #ffc000;
  border-color: #ffc000;
}

@media screen and (max-width:768px) {
  .pro-type .product-lb li a {
    padding: 0 16px;
    font-size: 15px;
  }

  .pro-type .product-lb li {
    width: 100%;
  }

  .classify-tit {
    display: block;
  }

  .product-lb {
    /*display: none;*/
  }
}

@media screen and (max-width:550px) {
  .pro-type .product-lb li {
    line-height: 40px;
    width: 100%;
  }

  .pro-type .product-lb li a {
    padding: 0 12px;
  }
}

@media screen and (max-width:420px) {
  .pro-type .product-lb li a {
    font-size: 14px;
    line-height: 36px;
  }

  .classify-tit {
    margin-bottom: 10px;
  }
}

.pro-lists {
  margin-top: 40px;
}


/***********pro-type end***************/


/********************pages begin****************************/

.pages {
  margin-top: 25px;
}

.pages ul {
  text-align: center;
}

.pages ul li {
  display: inline-block;
  padding: 15px 5px;
}

.pages ul li a,
.pages ul li span {
  padding: 8px 15px;
  border: 1px solid #ddd;
  margin: 0 2px;
  font-size: 13px;
  color: #000;
}

.pages ul li:hover a {
  background: #ffc000;
  color: #fff;
}

@media screen and (max-width:640px) {
  .pages ul li {
    display: none;
  }

  .pages ul li:first-child,
  .pages ul li:last-child,
  .pages ul li.active {
    display: inline-block;
  }
}


/********************pages end****************************/


/**********************pro-list end*************************/


/**********************case-list begin*************************/

.case-list {
  margin: 25px 0;
  padding: 25px 0;
}

@media screen and (max-width:640px) {
  .case-list {
    margin: 15px 0;
    padding: 0;
  }
}


/**********************case-list end*************************/


/**********************news-list begin*************************/

.news-list {
  margin: 25px 0;
  padding: 25px 0;
}

@media screen and (max-width:640px) {
  .news-list {
    margin: 15px 0;
    padding: 0;
  }
}


/**********************news-list end*************************/


/**********************contact-message begin*************************/

.contact-message {
  margin: 25px 0;
  padding: 25px 0;
}



@media screen and (max-width:640px) {
  .contact-message {
    margin: 15px 0;
    padding: 0;
  }
}

.msg-show {
  background-color: #FFF;
  margin: 50px 0 50px 100px;
  font-size: 15px;
  line-height: 26px;
  min-height: 520px;
  -webkit-box-shadow: 0 0 21px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0 0 21px rgba(0, 0, 0, 0.18);
  -ms-box-shadow: 0 0 21px rgba(0, 0, 0, 0.18);
  -o-box-shadow: 0 0 21px rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 21px rgba(0, 0, 0, 0.18);
  padding: 60px 60px 60px 320px;
  position: relative;
}

.msg-info {
  position: absolute;
  left: -100px;
  top: 10%;
  width: 360px;
  height: 80%;
  color: #fff;
  padding: 40px 30px;
  background: #165741;
}

.msg-show strong {
  display: block;
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.msg-info p {
  padding-left: 36px;
  background-position: left 8px;
  background-repeat: no-repeat;
  margin-top: 30px;
  line-height: 36px;
  color: #aaa;
}

.msg-info p.yx {
  background-image: url(../images/msg-mark01.png);
}

.msg-info p.dz {
  background-image: url(../images/msg-mark02.png);
}

.msg-info p a {
  color: #FFF;
}

.msg-info p a:hover {
  text-decoration: underline;
}

.msg-link {
  display: inline-block;
  border: 2px solid #FFF;
  background-color: #FFF;
  line-height: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  padding: 0 20px;
  margin-left: 30px;
  margin-top: 30px;
  color: #165741;
  font-size: 18px;
}

.msg-link:hover {
  background-color: #165741;
  color: #FFF;
}


.msg-con strong {
  color: #165741;
}

.msg-con p {
  color: #555;
}

.msg-con .input-panel {
  overflow: hidden;
  margin-left: -2%;
  margin-top: 26px;
}

.msg-con .send .me {
  float: left;
  position: relative;
  width: 48%;
  margin-left: 2%;
  margin-bottom: 16px;
}

.msg-con .send .me img {
  position: absolute;
  left: 10px;
  top: 13px;
  width: 20px;
  height: auto;
}

.msg-con .input-panel .me input,
.msg-con .send textarea {
  color: #666;
  width: 100%;
  line-height: 32px;
  padding: 8px 6px 8px 40px;
  background-color: #F5F5F5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.msg-con .send .five {
  width: 100%;
  margin-left: 0;
}

.msg-con .send .five textarea {
  height: 120px;
}

.msg-con .send .five img {
  top: 14px
}

.msg-con .btn-primary {
  margin-top: 30px;
}

.msg-con .btn-primary {
  display: inline-block;
  line-height: 40px;
  padding: 0 40px;
  color: #FFF;
  font-size: 18px;
  text-transform: uppercase;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
  cursor: pointer;
  background-color: #165741;
  border: 2px solid #165741;
}

.msg-con .btn-primary:hover {
  background-color: #FFF;
  color: #165741;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #222;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
}

input[type="checkbox"],
input[type="radio"] {
  background-color: initial;
  cursor: default;
  -webkit-appearance: checkbox;
  box-sizing: border-box;
  margin: 3px 3px 3px 4px;
  padding: initial;
  border: initial;
}

.PorConSixXX {
  margin-bottom: 15px;
  color: #666;
}

.PorConSixXX input {
  margin-right: 8px;
}

@media screen and (max-width:1410px) {
  .msg-show {
    padding: 30px;
    margin-left: 0;
  }

  .msg-info {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    top: 0;
    padding: 20px;
    margin-bottom: 20px;
  }

  .msg-info p {
    margin-top: 20px;
  }
}

@media screen and (max-width:1000px) {
  .msg-show {
    padding: 20px;
  }

  .msg-show strong {
    font-size: 28px;
  }
}

@media screen and (max-width:768px) {
  .msg-con ul {
    margin-left: 0;
  }

  .msg-con .input-panel {
    margin-left: 0;
  }

  .msg-con .input-panel .me {
    width: 100%;
    margin-left: 0;
  }

  .msg-con .input-panel .me.five {
    width: 100%;
  }
}

@media screen and (max-width:480px) {
  .msg-show {
    padding: 16px;
    padding-bottom: 40px;
  }

  .msg-show strong {
    font-size: 26px;
  }

  .msg-info p {
    margin-top: 12px;
    line-height: 32px;
  }
}

@media screen and (max-width:360px) {
  .msg-show {
    padding: 10px;
    padding-bottom: 30px;
  }

  .msg-con .btn-primary {
    width: 100%;
  }

  .PorConSixXX {
    font-size: 13px;
  }

  .msg-con .input-panel .me input,
  .msg-con .input-panel .me textarea {
    font-size: 15px;
  }
}

/**********************contact-message end*************************/


/*************************error begin*************************/

.error {
  width: 100%;
  margin-top: 130px;
  text-align: center;
}

.error img {
  display: block;
  margin: 0 auto;
  margin-bottom: 50px;
}

.error a {
  display: inline-block;
  padding: 15px 50px;
  background-color: #ffc000;
  color: #ffffff;
  text-transform: capitalize;
  font-size: 36px;
  margin-bottom: 50px;
}

.error a:hover {
  border-radius: 20px;
}

@media screen and (max-width:768px) {
  .error {
    margin-top: 50px;
  }

  .error a {
    font-size: 22px;
    padding: 10px 25px;
  }
}


/*************************error end*************************/


/**********************pro-detail begin*************************/

.inside-detail {
  margin: 40px 0;
}

.pic-infor {
  overflow: hidden;
  margin-bottom: 25px;
}

.pic-infor .pic {
  width: 36%;
  float: left;
}

.pic-infor .pic img {
  width: 100%;
}

.pic-infor .infor {
  width: 62%;
  float: right;
}

.pic-infor h1 {
  font-size: 28px;
  color: #333333;
  margin-bottom: 10px;
}

.pic-infor p {
  margin-bottom: 5px;
}

.infor-email {
  display: block;
  font-size: 18px;
  padding-left: 30px;
  background: url(../images/pro-mail.png) no-repeat left center;
  background-size: 20px 20px;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: 20px 20px;
  color: #ffc000;
  margin-top: 25px;
}

.pic-infor .btn {
  text-align: left;
  margin-top: 25px;
}

.pic-infor .btn a {
  display: inline-block;
  line-height: 40px;
  padding: 0 25px;
  border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #000000;
  border: 1px solid #000000;
  color: #ffffff;
}

.pic-infor .btn .getquote {
  background-color: #ffc000;
  border: 1px solid #ffc000;
}

.pic-infor .btn a:hover {
  background: #ffffff;
  color: #333333;
}

.desc-infor {
  margin-bottom: 25px;
}

.underline-tit {
  font-size: 24px;
  text-transform: capitalize;
  color: #333333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding-bottom: 10px;
  margin-bottom: 20px;
  position: relative;
}

.underline-tit:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 3px;
  background-color: #ffc000;
}

.con-infor {
  margin-bottom: 25px;
}

.con-infor h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333333;
}

.con-infor h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #454545;
}

.con-infor p {
  margin-bottom: 5px;
  color: #666666;
}

.con-infor img {
  display: block;
  margin: 25px auto 10px;
}

.con-infor .img-tit {
  text-align: center;
  margin-bottom: 15px;
}

.relate-pro ul {
  margin-left: -2%;
}

.relate-pro li {
  width: 23%;
  margin-left: 2%;
  margin-bottom: 10px;
  float: left;
}

.relate-pro li .pic {
  display: block;
  overflow: hidden;
  position: relative;
  padding-top: 70%;
}

.relate-pro li .pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relate-pro li .tit {
  display: block;
  text-align: center;
  font-size: 20px;
}

.relate-pro li .tit:hover {
  color: #ffc000;
}

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

  .infor-email,
  .pic-infor .btn {
    margin-top: 5px;
  }

  .relate-pro li {
    width: 23%;
  }
}

@media screen and (max-width:991px) {
  .pic-infor .pic {
    width: 49%;
  }

  .pic-infor .infor {
    width: 49%;
  }

  .relate-pro li {
    width: 31.33333%;
  }
}

@media screen and (max-width:768px) {
  .inside-detail {
    margin: 20px 0;
  }

  .pic-infor .pic,
  .pic-infor .infor {
    width: 100%;
    float: none;
  }

  .pic-infor .pic {
    margin-bottom: 10px;
  }

  .pic-infor h1 {
    font-size: 26px;
  }

  .con-infor h2,
  .underline-tit {
    font-size: 22px;
  }

  .con-infor h3 {
    font-size: 20px;
  }
}

@media screen and (max-width:640px) {
  .inside-detail {
    margin: 15px 0;
  }

  .pic-infor h1 {
    font-size: 24px;
  }

  .con-infor h2,
  .underline-tit {
    font-size: 20px;
  }

  .con-infor h3 {
    font-size: 18px;
  }

  .relate-pro li {
    width: 48%;
  }
}

@media screen and (max-width:480px) {
  .relate-pro li {
    width: 98%;
  }

  .pic-infor .btn a {
    padding: 0 10px;
  }
}


/**********************pro-detail end*************************/


/**********************inside-detail begin*************************/

.desc-infor {
  margin-bottom: 25px;
}

.desc-infor p {
  margin-bottom: 15px;
}

.desc-infor p a {
  color: #ffc000;
  font-size: 18px;
}

.underline-tit {
  font-size: 24px;
  text-transform: capitalize;
  color: #333333;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding-bottom: 10px;
  margin-bottom: 20px;
  position: relative;
}

.underline-tit:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 50px;
  height: 3px;
  background-color: #ffc000;
}

.tj-pro {
  overflow: hidden;
  padding: 20px;
  background-color: #f5f5f5;
}

.tj-pro .pic {
  width: 58%;
  float: left;
}

.tj-pro .pic li {
  width: 50%;
  float: left;
}

.tj-pro .text {
  width: 42%;
  float: right;
  padding-left: 20px;
}

.tj-pro .text h3 {
  color: #333;
}

.tj-pro .text li {
  color: #666;
  padding: 1px 0;
}

.tj-pro .text li:before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #ffc000;
  vertical-align: middle;
  margin: -3px 10px 0 0;
}

.tj-pro .text li:first-child:before {
  display: none;
}

.cont {
  padding: 25px 20px;
  margin: 30px 0;
  background-color: #ffc000;
}

.cont h3 {
  color: #ffffff;
  font-size: 37px;
  text-transform: capitalize;
  font-weight: 400;
}

.cont p {
  font-size: 17px;
  margin-top: 8px;
  color: #fff;
}

.cont span {
  color: #fff;
}

.cont a {
  font-size: 18px;
  display: inline-block;
  float: right;
  padding: 0 40px;
  line-height: 45px;
  background-color: #ffc000;
  border: 2px solid #192437;
  margin-top: -70px;
  background-color: #192437;
  color: #fff;
}

.cont a:hover {
  color: #262626;
  background-color: #ffc000;
}

.inside-detail .service {
  margin: 50px 0 35px 0;
}

.inside-detail .service li {
  float: left;
  width: 20%;
  text-align: center;
  position: relative;
}

.inside-detail .service li:before {
  content: '';
  position: absolute;
  top: 26px;
  right: 0;
  width: 16px;
  height: 26px;
  background: url(../images/right-gray.png) no-repeat center;
  background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

.inside-detail .service li:nth-child(5):before {
  display: none;
}

.inside-detail .service li:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 120px;
  right: 0;
  width: 100%;
  height: 1px;
  background: url(../images/progress-line.png) no-repeat center;
}

.inside-detail .service li img {
  display: block;
  margin: 0 auto;
}

.inside-detail .service li span {
  display: block;
  margin: 25px auto;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  background-color: #ffc000;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  -webkit-animation: big1 5s linear infinite;
  animation: big1 5s linear infinite;
}

.inside-detail .service li+li span {
  -webkit-animation: big2 5s linear infinite;
  animation: big2 5s linear infinite;
}

.inside-detail .service li+li+li span {
  -webkit-animation: big3 5s linear infinite;
  animation: big3 5s linear infinite;
}

.inside-detail .service li+li+li+li span {
  -webkit-animation: big4 5s linear infinite;
  animation: big4 5s linear infinite;
}

.inside-detail .service li+li+li+li+li span {
  -webkit-animation: big5 5s linear infinite;
  animation: big5 5s linear infinite;
}

@keyframes big1 {
  0% {
    transform: scale(1);
  }

  8% {
    transform: scale(1.5);
  }

  16% {
    transform: scale(1);
  }
}

@keyframes big2 {
  18% {
    transform: scale(1);
  }

  26% {
    transform: scale(1.5);
  }

  34% {
    transform: scale(1);
  }
}

@keyframes big3 {
  36% {
    transform: scale(1);
  }

  44% {
    transform: scale(1.5);
  }

  52% {
    transform: scale(1);
  }
}

@keyframes big4 {
  54% {
    transform: scale(1);
  }

  62% {
    transform: scale(1.5);
  }

  70% {
    transform: scale(1);
  }
}

@keyframes big5 {
  72% {
    transform: scale(1);
  }

  80% {
    transform: scale(1.5);
  }

  88% {
    transform: scale(1);
  }
}

.inside-detail .service li strong {
  font-size: 20px;
}

@media screen and (max-width:991px) {
  .tj-pro .pic {
    width: 100%;
    float: none;
  }

  .tj-pro .text {
    width: 100%;
    float: none;
    padding: 0;
  }

  .cont {
    text-align: center;
  }

  .cont a {
    float: none;
    margin-top: 20px;
  }

  .inside-detail .service li {
    width: 33%;
    margin-bottom: 35px;
  }

  .inside-detail .service li:before,
  .inside-detail .service li:after {
    display: none;
  }
}

@media screen and (max-width:640px) {
  .tj-pro {
    padding: 15px 10px;
  }

  .underline-tit {
    font-size: 20px;
  }

  .inside-detail .service li {
    width: 50%;
  }
}

@media screen and (max-width:480px) {
  .inside-detail .service li strong {
    font-size: 16px;
  }

  .inside-detail .service li p {
    font-size: 14px;
  }

  .cont h3 {
    font-size: 20px;
  }
}

.inside-detail .index-pro-con {
  margin-top: 35px;
}

.long-detail {
  margin-bottom: 25px;
}

.long-detail h2 {
  font-size: 20px;
  color: #232323;
  margin-top: 25px;
  margin-bottom: 10px;
}

.long-detail h3 {
  font-size: 18px;
  color: #454545;
  margin-bottom: 10px;
}

.long-detail p {
  margin-bottom: 10px;
}

.long-detail .img-tit {
  text-align: center;
  margin-bottom: 35px;
}

.long-detail img {
  display: block;
  margin: 25px auto 15px;
}


/**********************inside-detail end*************************/