.header{
  height: calc(100vw * 840 / 1920);
  width: 100%;
  background-image: url(/images/header_home.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.header.contact{
  height: calc(100vw * 684 / 1920);
}
.header.open{
  background-image: url(/images/header_open.png);
}
.header.ability{
  background-color: #00b7dd;
  background-image: url(/images/header_ability.jpg);
}
.header.ecology{
  background-image: url(/images/header_ecology.png);
}
.header.contact{
  background-image: url(/images/header_contact.png);
}
.header .top{
  height: 14.14%;
  border-bottom: 1px solid #fff
}
.header .logo{
  float: left;
  width: 8.43%;
  height: 52.54%;
  margin-left: 18.75%;
  margin-top: 1.25%;
  background: url(/images/logo.png) no-repeat;
  background-size: 100%
}
.header.contact .logo{
  width: 6.8%;
  height: 50.4%;
  margin-top: 1%
}
.header ul{
  float: right;
  width: 41.66%;
  height: 52.54%;
  line-height: 100%;
  margin-top: 1.6%;
  margin-right: 15%;
}
.header.contact ul{
  margin-top: 1.2%;
}
.header li{
  float: left;
  width: 20%;
  height: 100%;
  display:table;
  text-align: center;
}
.header span{
  display:table-cell;
  vertical-align:middle;
}
.header a{
  position: relative;
}
.header .active a::after{
  content: '';
  position: absolute;
  bottom: -8px;
  left: 5%;
  width: 90%;
  height: 3px;
  background: #fff;
  border-radius: 3px
}
.header .tip{
  color: #fff;
  margin-top: 7.8%;
  margin-left: 18.75%;
}
.header.contact .tip{
  margin-top: 8%;
  margin-left: 48%;
}
.header .tip h1{
  font-size: 3em;
  line-height: 1.4em;
  text-shadow: 0 0 10px rgba(0,0,0,.2)
}
.header .tip h2{
  font-size: 2em;
  line-height: 1.8em;
  text-shadow: 0 0 10px rgba(0,0,0,.1)
}
.header.ability .tip h1{
  margin-bottom: 0.2em
}
.header.ability .tip h2{
  line-height: 1.4em;
  margin-bottom: 0.2em;
}
.header.ecology .tip h1{
  margin-bottom: 0.2em
}
.header.ecology .tip h2{
  line-height: 1.4em;
  margin-bottom: 0.2em;
}
.header .tip h6{
  font-weight: normal;
  font-style: normal;
}
.footer{
  background: #00b7dd;
  position: relative;
  text-align: center;
}
.footer > p{
  color: #fff;
  font-size: 0.8em;
  height: calc(100vw * 43 / 1920);
  line-height: calc(100vw * 43 / 1920);
  box-shadow: 0 -1px 0 0 rgba(0,0,0,.05);
  -ms-box-shadow: 0 -1px 0 0 rgba(0,0,0,.05);
  -moz-box-shadow: 0 -1px 0 0 rgba(0,0,0,.05);
  -webkit-box-shadow: 0 -1px 0 0 rgba(0,0,0,.05);
}
.footer .cont{
  display: inline-block;
}
.footer .logo{
  float: left;
  color: #fff;
  padding-right: calc(100vw * 185 / 1920);
  padding-top: calc(100vw * 40 / 1920);
  text-align: center;
}
.footer .logo i{
  display: block;
  width: calc(100vw * 162 / 1920);
  height: calc(100vw * 62 / 1920);
  margin: 0 auto calc(100vw * 20 / 1920);
  background: url(/images/logo.png) no-repeat;
  background-size: 100%
}
.footer .information{
  float: left;
  color: rgba(255,255,255,.9);
  text-align: left;
  font-size: 0.9em;
  line-height: 1.7em;
  padding-top: calc(100vw * 60 / 1920)
}
.p-record{
  text-align: center;
}
.p-record p{
  display: table;
  margin: 1em auto
}
.p-record a{
  display:table-cell;
  vertical-align: middle;
  font-size: 0.8em;
  color:#939393;
  padding-left: 25px;
  background: url(/images/ploice.jpg) no-repeat left center;
}
.introduce{
  width: 49.16%;
  color: #333;
  font-size: 0.9em;
  line-height: 1.5em;
  margin: calc(100vw * 89 / 1920) auto 0
}
.iw-one{
  margin: calc(100vw * 76 / 1920) auto 0
}
.iw-one i{
  display: block;
  width: 39%;
  height: calc(100vw * 614 / 1920);
  margin-left: 24.42%;
  background: url(/images/home_sign.png) no-repeat;
  background-size: 100%;
}
.iw-one p{
  float: right;
  width: 18.75%;
  margin-right: 28%;
}
.iw-one strong{
  display: block;
  text-align: center;
  margin-bottom: 1em;
}
.iw-one span{
  color: #333;
  display: inline-block;
  text-align: left;
  line-height: 1.4em
}
.iw-two i{
  display: block;
  width: 62.65%;
  height: calc(100vw * 809 / 1920);
  margin: 5.36% auto 0;
  background: url(/images/home_sign_data.png) no-repeat;
  background-size: 100%;
}
.iw-three{
  margin-top: 10.15%;
  margin-bottom: calc(100vw * 35 / 1920);
}
.iw-three strong{
  display: block;
  text-align: center;
}
.iw-three .example{
  width: calc(100vw * 1256 / 1920);
  margin: 1.5% auto 0;
}
.iw-three li{
  float: left;
  position: relative;
  width: calc(100vw * 610 / 1920);
  height: calc(100vw * 460 / 1920);
  margin-left: calc(100vw * 36 / 1920);
  margin-bottom: calc(100vw * 22 / 1920);
}
.iw-three li:nth-child(2n-1){
  margin-left: 0;
}
.iw-three li a{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.iw-three li.one{
  background: url(/images/home_pro_one.png) no-repeat;
  background-size: 100%
}
.iw-three li.two{
  background: url(/images/home_pro_two.png) no-repeat;
  background-size: 100%
}
.iw-three li.three{
  background: url(/images/home_pro_three.png) no-repeat;
  background-size: 100%
}
.iw-three li.four{
  background: url(/images/home_pro_four.png) no-repeat;
  background-size: 100%
}
.iw-three li div{
  position: absolute;
  top: calc(100vw * 310 / 1920);
  left: 0;
  right: 0;
  color: #333;
  text-align: center;
  font-size: calc(100vw * 18 / 1920);
  padding: 0 calc(100vw * 62 / 1920);
}
.iw-three li span{
  display: block;
  font-size: calc(100vw * 18 / 1920);
  line-height: 1.5em;
  text-align: left;
}
.open .cont{
  display: table;
}
.open .cont div{
  display: table-cell;
  vertical-align: middle;
}
.open strong{
  display: block;
  text-align: center;
  margin-bottom: 1em
}
.open p{
  font-size: 0.9em;
  line-height: 1.5em
}
.open-one{
  padding-top: 5.52%;
  padding-bottom: 5.1%;
}
.open-one i{
  float: right;
  width: calc(100vw * 607 / 1920);
  height: calc(100vw * 397 / 1920);
  background: url(/images/open-one.png) no-repeat;
  background-size: 100%;
  margin-right: 18.48%;
}
.open-one .cont{
  float: left;
  width: 21.6%;
  height: calc(100vw * 397 / 1920);
  margin-left: 18.8%;
}
.open-two{
  padding: 2.73% 0;
  background: #e3f5fb
}
.open-two i{
  float: left;
  width: calc(100vw * 563 / 1920);
  height: calc(100vw * 494 / 1920);
  background: url(/images/open-two.png) no-repeat;
  background-size: 100%;
  margin-left: 21%;
}
.open-two .cont{
  float: right;
  width: 18.7%;
  height: calc(100vw * 494 / 1920);
  margin-right: 18.95%;
}
.open-three{
  padding: 6% 0;
}
.open-three i{
  float: right;
  width: calc(100vw * 634 / 1920);
  height: calc(100vw * 374 / 1920);
  background: url(/images/open-three.png) no-repeat;
  background-size: 100%;
  margin-right: 18.69%;
}
.open-three .cont{
  float: left;
  width: 20.67%;
  height: calc(100vw * 374 / 1920);
  margin-left: 18.8%;
}
.open-four{
  padding-top: 1.5%;
  background: #e3f5fb;
  margin-bottom: 4.63%
}
.open-four i{
  float: left;
  width: calc(100vw * 559 / 1920);
  height: calc(100vw * 573 / 1920);
  background: url(/images/open-four.png) no-repeat;
  background-size: 100%;
  margin-left: 18.85%;
}
.open-four .cont{
  float: right;
  width: 11%;
  height: calc(100vw * 573 / 1920);
  margin-right: 27%;
}
.ability .cont{
  display: table;
}
.ability .cont div{
  display: table-cell;
  vertical-align: middle;
}
.ability strong{
  display: block;
  text-align: center;
}
.ability .cont strong{
  margin-bottom: 1.4em;
  position: relative;
}
.ability .cont strong::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom:-0.3em;
  width: 1.9em;
  height: 0.3em;
  background: #00b7dd;
  border-radius: 0.3em;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.ability p{
  font-size: 0.9em;
  line-height: 1.5em;
  width: 63.6%;
  margin: 0 auto
}
.ability .cont div{
  display: table-cell;
  vertical-align: middle;
}
.ab-one{
  margin-top: 2.96%;
  position: relative;
}
.ab-one > strong{
  margin-bottom: 0
}
.ab-one i{
  float: left;
  width: calc(100vw * 762 / 1920);
  height: calc(100vw * 525 / 1920);
  background: url(/images/ab-one.png) no-repeat;
  background-size: 100%;
  margin-left: 17.76%;
}
.ab-one .cont{
  position: absolute;
  bottom: calc(100vw * 30 / 1920);;
  right: 18.75%;
  width: calc(100vw * 566 / 1920);
  height: calc(100vw * 255 / 1920);
  background: #e3f5fb;
  box-shadow: 0 0 24px 0 rgba(227,245,251,.5)
}
.ab-two{
  position: relative;
}
.ab-two i{
  float: right;
  width: calc(100vw * 834 / 1920);
  height: calc(100vw * 447 / 1920);
  background: url(/images/ab-two.png) no-repeat;
  background-size: 100%;
  margin-right: 17.55%;
}
.ab-two .cont{
  position: absolute;
  bottom: calc(100vw * 30 / 1920);;
  left: 21.56%;
  width: calc(100vw * 466 / 1920);
  height: calc(100vw * 249 / 1920);
  background: #e3f5fb;
  box-shadow: 0 0 24px 0 rgba(227,245,251,.5)
}
.ab-three{
  position: relative;
}
.ab-three i{
  float: left;
  width: calc(100vw * 790 / 1920);
  height: calc(100vw * 536 / 1920);
  background: url(/images/ab-three.png) no-repeat;
  background-size: 100%;
  margin-left: 19%;
}
.ab-three .cont{
  position: absolute;
  bottom: calc(100vw * 30 / 1920);;
  right: 18.75%;
  width: calc(100vw * 483 / 1920);
  height: calc(100vw * 339 / 1920);
  background: #e3f5fb;
  box-shadow: 0 0 24px 0 rgba(227,245,251,.5)
}
.ab-four{
  margin-top: 3.48%;
  margin-bottom: 3.64%;
}
.ab-four > strong{
  margin-bottom: 1.8em
}
.ab-four div{
  width: 31.3%;
  float: left;
}
.ab-four div strong{
  margin: 1em 0
}
.ab-four i{
  display: block;
  width: 100%;
  height: calc(100vw * 402 / 1920);
}
.ab-four .personnel{
  margin-left: 18.33%;
  margin-right: 0.46%;
}
.ab-four .personnel i{
  background: url(/images/ab-four-1.png) no-repeat;
  background-size: 100%
}
.ab-four .developer{
  margin-right: 18.54%;
}
.ab-four .developer i{
  background: url(/images/ab-four-2.png) no-repeat;
  background-size: 100%
}
.ecology{
  position: relative;
}
.ecology .cont{
  display: table;
}
.ecology .cont div{
  display: table-cell;
  vertical-align: middle;
}
.ecology .cont strong{
  display: block;
  text-align: center;
  margin-bottom: 1.4em;
  position: relative;
}
.ecology .cont strong::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom:-0.3em;
  width: 1.9em;
  height: 0.3em;
  margin-left: -1em;
  background: #00b7dd;
  border-radius: 0.3em;
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.ecology p{
  width: 84.62%;
  font-size: 0.9em;
  line-height: 1.5em;
  margin: 0 auto
}
.ec-one{
  margin-top: 2.39%;
}
.ec-one i{
  float: right;
  width: calc(100vw * 1011 / 1920);
  height: calc(100vw * 535 / 1920);
  background: url(/images/ec-one.png) no-repeat;
  background-size: 100%;
  margin-right: 17.91%;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-one .cont{
  position: absolute;
  left: 21%;
  bottom: 22%;
  width: calc(100vw * 466 / 1920);
  height: calc(100vw * 249 / 1920);
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-one .cont b{
  position: absolute;
  left: -8.15%;
  bottom: -10.44%;
  z-index: -1;
  width: 27.46%;
  height: 41.36%;
  background: rgb(0,137,255);
}
.ec-two{
  margin-top: 6.14%;
}
.ec-two i{
 float: left;
 width: calc(100vw * 771 / 1920);
 height: calc(100vw * 496 / 1920);
 background: url(/images/ec-two.png) no-repeat;
 background-size: 100%;
 margin-left: 16.45%;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-two .cont{
  position: absolute;
  right: 25.88%;
  bottom: 0;
  width: calc(100vw * 402 / 1920);
  height: calc(100vw * 496 / 1920);
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-two .cont b{
  position: absolute;
  top: -10.44%;
  right: -12.9%;
  z-index: -1;
  width: 47.51%;
  height: 29.83%;
  background: rgba(0,137,255,.5);
}
.ec-three{
  margin-top: 4.84%;
  margin-bottom: 5.83%
}
.ec-three i{
 float: right;
 width: calc(100vw * 793 / 1920);
 height: calc(100vw * 503 / 1920);
 background: url(/images/ec-three.png) no-repeat;
 background-size: 100%;
 margin-right: 18.68%;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-three .cont{
  position: absolute;
  left: 23.38%;
  bottom: 0.59%;
  width: calc(100vw * 476 / 1920);
  height: calc(100vw * 339 / 1920);
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.1)
}
.ec-three .cont b{
  position: absolute;
  left: -18%;
  bottom: -19.46%;
  z-index: -1;
  width: 37.39%;
  height: 45.72%;
  background: rgba(0,137,255,.2);
}
.ct-one{
  position: relative;
  width: calc(100vw * 1195 / 1920);
  margin: 3.48% auto 0;
}
.ct-one .inform{
  float: left;
  padding-bottom: 1em;
  line-height: 3em;
}
.ct-one .phone{
  float: right;
  padding-top: 3%;
  padding-right:6.52% 
}
.ct-one .btn{
  position: relative;
  width: calc(100vw * 202 / 1920);
  height: calc(100vw * 54 / 1920);
  line-height: calc(100vw * 54 / 1920);
  text-indent: 1em;
  color: #fff;
  background-color: #00a5f1;
}
.ct-one .way{
  position: absolute;
  right: 0;
  bottom: 14.33%;
  display: table;
  width: calc(100vw * 279 / 1920);
  height: calc(100vw * 91 / 1920);
  background: #eee
}
.ct-one .way div{
  display: table-cell;
  vertical-align: middle;
  text-indent: 0.5em;
  line-height: 1.5em
}
.ct-one .way em{
  color: #999;
  font-style: normal;
}
.ct-one .way i{
  position: absolute;
  right: 2.86%;
  top: -42.85%;
  width: 31.89%;
  height: 142.85%;
  background: url(/images/ct-service.png) no-repeat;
  background-size: 100%;
}
.ct-one .btn::after{
  content: '';
  position: absolute;
  right: 9.9%;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 3.96%;
  height: 27.77%;
  background: url(/images/ct-arrow.png) no-repeat;
  background-size: 100%;
}
.ct-two{
  width: calc(100vw * 1195 / 1920);
  height: calc(100vw * 742 / 1920);
  margin: 0 auto 2%;
}
.ct-two i{
  display: block;
  width: 100%;
  height: 100%;
  background: url(/images/ct-address.png) no-repeat;
  background-size: 100%;
}
.content i:hover{
  box-shadow: 0 0 24px 0 rgba(0,0,0,.3)
}