@charset "utf-8";
/* CSS Document */

/*banner 焦点图 */
.bannerBox {
      position: relative;
      z-index: 0;
      width: 100%;
      min-width: 1140px;
      height: 524px;
}

.bannerBox .swiper-container {
      width: 100%;
      height: 100%;
}

.bannerBox .swiper-slide {
      text-align: center;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      background: center center no-repeat;
      background-size: 100% auto;
}

.bannerBox .swiper-slide .con {
      display: -webkit-box;
      position: relative;
      top: -3.2em;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-flow: wrap;
      flex: 1;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      width: 1140px;
      margin: 0 auto;
}

.bannerBox .swiper-slide a {
      color: #fff;
}

.bannerBox .swiper-slide .txt {
      flex: 1;
      text-align: center;
      color: #fff;
      font-size: 16px;
}

.bannerBox .swiper-slide .txt .t1 {
      margin-top: 0.8em;
      font-size: 3.3em;
      font-weight: bold;
      line-height: 1.2em;
      transition: all 1.5s;
      position: relative;
      z-index: 0;
      left: -20px;
      opacity: 0;
      -moz-text-shadow: 0 5px 13px rgba(0, 0, 0, .79);
      -webkit-text-shadow: 0 5px 13px rgba(0, 0, 0, .79);
      text-shadow: 0 5px 13px rgba(0, 0, 0, .79);
}

.bannerBox .swiper-slide .txt .t2 {
      margin-top: 1.3em;
      margin-bottom: 2em;
      margin-left: 3px;
      line-height: 2em;
      transition: all 1.5s;
      position: relative;
      z-index: 0;
      left: -20px;
      opacity: 0;
      transition-delay: .3s;
}
.bannerBox .swiper-slide .txt .t2 h1 { font-size: 18px; font-weight: normal;}

.bannerBox .swiper-slide-active .txt .t1 {
      opacity: 1;
      left: 0;
}

.bannerBox .swiper-slide-active .txt .t2 {
      opacity: 1;
      left: 0;
      font-size: 1.5em;
}

.speBox {
      position: relative;
      z-index: 300;
      top: 0;
      background-color: #fff;
      width: 1140px;
      margin: -3.4em auto 0;
      overflow: hidden;
      -moz-box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
      -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
      box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
}

.speBox ul {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-wrap: wrap
}

.speBox li {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 33.3%;
      border-left: 1px solid #e7e7e7;
      margin: 0 -1px 0 0;
      padding: 1.5em 0;
}

.speBox .pic {
      width: 26%;
      margin-left: 4%
}

.speBox .pic img {
      width: 54px;
      height: 54px;
      margin: 0 auto 0;
      display: block;
}

.speBox .txt {
      width: 68%;
      text-align: left;
      margin-right: 2%;
      color: #15222c;
      font-weight: bold;
      font-size: 1.2em;
      line-height: 1.2em;
}

.proBox {
      width: 1140px;
      margin: 0 auto;
}

.proBox .list {}

.proBox .list ul {
      margin: 0 -0.5%;
}

.proBox .list ul:after {
      display: block;
      clear: both;
      content: "";
}

.proBox .list li {
      float: left;
      width: 16.6%;
      margin-top: 1.7%;
}

.proBox .list a {
      display: block;
      cursor: pointer;
}

.proBox .list .picb {
      display: block;
      margin: 0 2.8%;
      border: 1px solid #e7e7e7;
      padding: 3.2%;
}

.proBox .list .pic {
      display: block;
      width: 100%;
      padding-top: 70%;
      height: 0;
      overflow: hidden;
      background: center center no-repeat;
      background-size: cover;
}

.proBox .list .txt {
      display: block;
      margin: 0.4em 4% 0;
      line-height: 1.8em;
      font-size: 16px;
      font-weight: bold;
      color: #14212b;
}

/*about us*/
.aboutUsBox {
      margin: 0 auto;
      width: 1140px;
      padding: 3em 0 4em;
}

.aboutUsBox:after {
      content: "";
      clear: both;
      display: block;
}

.aboutUsBox .con .tit {
      color: #6fba2c;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.6em;
}

.aboutUsBox .con .tit2 {
      margin-top: 0;
      color: #14212b;
      font-size: 32px;
      line-height: 1.7em;
      font-weight: bold;
}

.aboutUsBox .con .txt {
      margin-top: 1em;
      color: #6a6a6a;
      font-size: 15px;
      line-height: 1.5em;
}

.aboutUsBox .con .txt a{
      color: #0059a8;
}

.stepBoxW {
      background-color: #3276b6;
      background-position: center center;
      background-repeat: no-repeat;

      background-size: cover;
      padding: 4.5em 0 0;
      min-width: 1140px;
}

.stepBox {
      width: 1140px;
      margin: 0 auto;
}

.stepBox .tit {
      color: #fff;
      font-size: 1.5em;
      font-weight: bold;
      line-height: 1.6em;
}

.stepBox .list {
      position: relative;
      z-index: 0;
      bottom: -3em;
}

.stepBox .list ul {
      margin: 2em -0.5% 0;
}

.stepBox .list ul:after {
      display: block;
      clear: both;
      content: "";
}

.stepBox .list li {
      float: left;
      width: 16.6%;
      margin-top: 1.7%;
}

.stepBox .list a {
      display: block;
      cursor: pointer;
}

.stepBox .list .lib {
      display: block;
      margin: 0 2.8%;
      padding: 70% 0 0;
      height: 0;
      position: relative;
      z-index: 0;
      background-color: #fff;
      -moz-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
      box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
}

.stepBox .list .pic {
      position: absolute;
      top: -30%;
      left: 28%;
      display: block;
      width: 44%;
      padding-top: 44%;
      height: 0;
      background: #6fba2c center center no-repeat;
      background-size: 48px 48px;
}

.stepBox .list .txt {
      position: absolute;
      top: 47%;
      left: 8%;
      width: 84%;
      display: block;
      line-height: 1.2em;
      height: 2.4em;
      overflow: hidden;
      font-size: 16px;
      font-weight: bold;
      color: #14212b;
}

.stepTxt {
      width: 1140px;
      margin: 0 auto;
      padding: 6em 0 2.5em;
}

.stepTxt .con {
      margin: 0 8%;
      color: #6a6a6a;
}

.quBox {
      width: 1140px;
      margin: 0 auto;
      padding: 3em 0 5.2em;
}

.quBox::after {
      display: block;
      content: "";
      clear: both;
}

.quBoxL {
      float: left;
      width: 570px;
      text-align: left;
}

.quBoxL .tit {
      color: #6fba2c;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.6em;
}

.quBoxL .tit2 {
      margin-top: 0;
      color: #14212b;
      font-size: 32px;
      line-height: 1.7em;
      font-weight: bold;
}

.quBoxL .txt {
      margin-top: 1em;
      margin-right: 8%;
      color: #6a6a6a;
      font-size: 15px;
      line-height: 1.5em;
}

.quBoxL .quList {
      margin-top: 3em;
}

.quBoxL .quList ul {
      border-bottom: 1px solid #e7e7e7;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-wrap: wrap
}

.quBoxL .quList li {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      width: 50%;
      border-left: 1px solid #e7e7e7;
      border-top: 1px solid #e7e7e7;
      margin: 0 -1px 0 0;
      padding: 1.2em 0 1.1em;
}

.quBoxL .quList li:nth-child(odd) {
      border-left: 0
}

.quBoxL .quList .pic {
      width: 28%;
      margin-left: 4%
}

.quBoxL .quList .pic img {
      width: 54px;
      height: 54px;
      margin: 0 auto 0;
      display: block;
}

.quBoxL .quList .quTxt {
      width: 68%;
      text-align: left;
      margin-right: 2%;
      color: #15222c;
      font-weight: bold;
      font-size: 15px;
      line-height: 1.4em;
}

.quBoxR {
      float: right;
      width: 507px;
}

.swiper_pic_w {
      position: relative;
      z-index: 0;
}

.swiper_pic_w .swiper-container {
      margin: 0 auto;
}

.swiper_pic .swiper-slide {
      display: block;
      width: 100%;
}

.swiper_pic .pic {
      position: relative;
      z-index: 0;
      overflow: hidden;
      height: 0;
      padding-top: 89%;
      display: block;
      background: center center no-repeat;
      background-size: cover;
}

.swiper_pic .pic img {}

.swiper_pic_w .swiper-pagination {
      z-index: 100;
      left: 0;
      width: 100%;
      bottom: 1.2em;
}

.swiper_pic_w .swiper-pagination-bullet {
      background-color: #e3e3e3;
      width: 10px;
      height: 10px;
      cursor: pointer;
      opacity: 1;
      -webkit-border-radius: 0.6em;
      -moz-border-radius: 0.6em;
      border-radius: 0.6em;
}

.swiper_pic_w .swiper-pagination-bullet-active {
      background-color: #71bb30;
      width: 32px;
}

.contactBoxW {
      background-color: #f6f6f6;
      min-width: 1140px;
      padding: 4em 0 3.3em;
}

.contactBox {
      width: 1140px;
      margin: 0 auto;
}

.contactBox .tit {
      color: #14212b;
      font-size: 1.5em;
      font-weight: bold;
      line-height: 1.6em;
}

.contactBox .con {
      margin-right: -19px;
}

.contactBox .con:after {
      clear: both;
      content: "";
      display: block;
}

.contactBox .w1 {
      float: left;
      width: 25%;
      margin-top: 23px;
}

.contactBox .w2 {
      float: left;
      width: 50%;
      margin-top: 17px;
}

.contactBox .w3 {
      float: left;
      width: 100%;
      margin-top: 21px;
}

.contactBox .inputw,
.contactBox .inputw2 {
      border: 1px solid #d1d1d1;
      margin-right: 19px;
      padding: 0 12px;
}

.contactBox .inputw2 {
      position: relative;
      z-index: 0;
      padding-right: 4em;
}

.contactBox .input {
      margin: 0;
      padding: 0;
      width: 100%;
      border: 0;
      outline-width: 0;
      color: #272727;
      font-size: 14px;
      line-height: 38px;
      background-color: transparent
}

.contactBox .year {
      position: absolute;
      right: 1em;
      top: 0;
      color: #838383;
      font-size: 14px;
      line-height: 38px;
}

.contactBox .textarea {
      margin: 1em 0 0.7em;
      padding: 0;
      width: 100%;
      border: 0;
      outline-width: 0;
      color: #272727;
      font-size: 14px;
      height: 3.6em;
      line-height: 1.2em;
      background-color: transparent
}

.contactBox .txt {
      margin-top: 1.5em;
      float: left;
      font-size: 13px;
      color: #a2a2a2;
}

.contactBox .txt .checkBox,
.contactBox .txt span {
      vertical-align: middle;
}

.contactBox .btnW {
      float: right;
      margin-right: 19px;
}

.contactBox .btn {
      border: 0;
      outline-width: 0;
      margin: 1.3em 0 0;
      padding: 0 2.7em;
      background-color: #71bb30;
      color: #fff;
      font-size: 16px;
      line-height: 2.7em;
      cursor: pointer;
}

@media only screen and (max-width:1160px) {
.bannerBox {min-width: auto;}
.speBox { width: auto; }
.proBox {width: auto; margin: 0 1em;}
.aboutUsBox {  width: auto; padding-left: 1em; padding-right: 1em;}
.stepBoxW {min-width: auto;}
.stepBox { width: auto;}
.stepBox .tit { margin: 0 2em; }
.stepTxt {width: auto;}
.quBox {width: auto;padding-left: 1em; padding-right: 1em;}
.quBoxL { width: 53%;}
.quBoxR {width: 44.5%;}
.contactBoxW { min-width: auto;padding-left: 1em; padding-right: 1em;}
.contactBox { width: auto; }
}

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

      /* banner */
      .bannerBox {
            height: 80vw;
            min-width: auto;
      }

      .bannerBox .swiper-slide {
            background-size: cover;
      }

      .bannerBox .swiper-slide .txt .t1 {
            font-size: 1.4em;
      }

      .bannerBox .swiper-slide .txt .t2 {
            font-size: 0.8em;
      }

      .bannerBox .button-next {
            width: 1.8em;
            height: 1.4em;
            margin-top: -0.7em;
      }

      .bannerBox .button-prev {
            width: 1.8em;
            height: 1.4em;
            margin-top: -0.7em;
      }

      .speBox {
            padding: 2.5em 0;
            top: 0;
            width: auto;
      }

      .speBox li {
            width: 100%;
            margin-left: 0;
            border-left: 0;
            flex-wrap: nowrap;
            display: block;
      }

      .speBox .pic {
            width: 5em;
            display: inline-block;
            vertical-align: middle;
      }

      .speBox .txt {
            width: 12em;
            display: inline-block;
            vertical-align: middle;
      }

      .proBox .list ul {
            margin: 0 1%;
      }

      .proBox .list li {
            width: 33.3%;
      }

      .aboutUsBox {
            margin-top: 4.2em;
            padding: 0 1em 3em;
      }

      .aboutUsBox .con .tit2 {
            font-size: 2em;
            line-height: 1.3em;
            margin-top: 0.5em;
      }

      .aboutUsBox .con {
            float: none;
            width: auto;
      }

      .aboutUsBox .pic {
            margin-top: 1em;
            float: none;
            width: auto;
      }

      /*news*/
      .swiper_pic .swiper-slide {
            width: 50%;
      }

      .swiper_pic_w .button-prev {
            width: 2.4em;
            height: 2.4em;
            margin-top: 1.2em;
      }

      .swiper_pic_w .button-next {
            width: 2.4em;
            height: 2.4em;
            margin-top: 1.2em;
      }

      .stepBox .list li {
            width: 33.3%; margin-top:9%;
      }

      .stepBox .list ul {
            margin:-2em 1.2% 0;
      }

      .stepTxt {
            padding-bottom: 0;
      }

      .quBox {
            width: auto;
            padding: 5em 0 0;
      }

      .quBoxL {
            float: none;
            width: auto;
      }

      .quBoxL .tit {
            padding: 0 1rem;
      }

      .quBoxL .tit2 {
            padding: 0 1rem;
      }

      .quBoxL .txt {
            padding: 0 1rem;
      }

      .quBoxR {
            float: none;
            width: auto;
      }

      .contactBoxW {
            padding: 3em 1em;
      }

      .contactBox .w1,
      .contactBox .w2,
      .contactBox .w3 {
            float: none;
            width: 100%;
      }

      .contactBox .txt {
            float: none;
            text-align: left;
      }

      .contactBox .btnW {
            float: none;
      }

      .contactBox .btn {
            width: 100%;
            padding: 0;
      }
}

@media only screen and (max-width:500px) {
      .speBox li {
            padding: 5% 0;
      }

      .bannerBox .swiper-slide .txt .t1 {
            font-size: 1.2em;
      }

      .bannerBox .swiper-slide .txt .btnW {
            font-size: 0.9em;
      }

      .bannerBox .swiper-slide .btnAbout {
            line-height: 3em;
      }

      .stepBox .list li {
            width: 50%;
            margin-top: 16%;
      }

      .proBox .list li {
            width: 50%;
      }
}

@media only screen and (max-width:480px) {
      .swiper_pic .swiper-slide {
            width: 100%;
      }

      .speBox .pic img {
            width: 80%;
            height: auto;
      }
}