@charset "utf-8";
.content{width: 1400px; margin: 0 auto;}
i,em,b{font-style: normal;}
@media screen and (max-width: 768px) {
  .content{width: 100%;}
}

 
 
 
   

/**/
.g-guide{ background:#f2f2f2; background-size: 100%; height:auto; padding:72px 0 90px;box-sizing: border-box;  font-family:"Microsoft Yahei";clear: both;overflow: hidden;}
.g-guide .tit01{height:125px; }
.g-guide .tit01 h2{font-size: 30px; text-align: center; font-family: "Microsoft YaHei";color: #000000; font-weight:bold; line-height: 64px;}
.guide dl{clear: both;overflow: hidden;}
.guide dt{width: 50%;position: relative;float: left;}
.guide dt i{width:55px; height: 55px;  display: block;background: url(../images/vdo-btn.png) no-repeat;background-size: 100%; position: absolute; left:50%;top:50%;margin:-27.5px 0 0 -27.5px;}
.guide dt img{width:100%;display: block;}
.guide dd{width: 46.85%; max-width: 656px; float: right;box-sizing: border-box;}
.guide dd p{font-size:16px; color: #666666; line-height:30px;text-align: justify;display: block;padding: 5px 10px 1.875vw;}


.digital{width:100%; height:180px;background: #fff;border:1px solid #e9e9e9;box-sizing: border-box; position: relative; clear:both;overflow: hidden; margin-top:-10px}
.digital li{height:90px;width:50%;padding-top: 22px; box-sizing: border-box; float: left; text-align: left; position: relative;cursor: pointer;border-bottom: 1px solid #e9e9e9;}
.digital li em{position: relative;display: block;  font-family: "Arial"; color: #335270; font-weight: bold; font-size: 40px;width: 100%;}
.digital li em b{ margin-left:0px;font-size: 40px; color: #335270;font-weight: bold;font-family: "Century Gothic","Arial";}
.digital li em i{ font-size:20px;  color: #000000;text-align: center; font-weight: bold;width:45px; line-height: 28px;height: 28px;display: block;text-transform: uppercase;font-family: "Arial";position: absolute;bottom:6px; right:0px;display: block;border-radius: 100%;}
.digital li h4{font-size: 18px; color: #666666; text-align: center; line-height: 42px; font-weight: normal;}

.digital li:nth-child(1){border-right: 1px solid #e9e9e9;}
.digital li:nth-child(1) b{margin-left: 118px;}
.digital li:nth-child(1) i{right:100px;}
.digital li:nth-child(2) b{margin-left:90px;}
.digital li:nth-child(2) i{right:55px;}
.digital li:nth-child(3){border-right: 1px solid #e9e9e9;}
.digital li:nth-child(3) b{margin-left:95px;}
.digital li:nth-child(3) i{right:75px;}
.digital li:nth-child(4) b{margin-left:105px;}
.digital li:nth-child(4) i{right:95px;}

@media screen and (max-width: 768px) {
 
.g-guide{ background:#f2f2f2; background-size: 100%; height:auto; padding:20px 0 20px;box-sizing: border-box;  font-family:"Microsoft Yahei";clear: both;overflow: hidden;}
.g-guide .tit01{height:50px; }
.g-guide .tit01 h2{font-size: 20px; text-align: center; font-family: "Microsoft YaHei";color: #000000; font-weight: normal; line-height: 50px;}
.guide dl{clear: both;overflow: hidden;}
.guide dt{width: 98%;position: relative;float: left; margin:3px;}
.guide dt i{width:55px; height: 55px;  display: block;background: url(../images/vdo-btn.png) no-repeat;background-size: 100%; position: absolute; left:50%;top:50%;margin:-27.5px 0 0 -27.5px;}
.guide dt img{width:100%;display: block;}
.guide dd{width: 100%; max-width: 656px; float: right;box-sizing: border-box;}
.guide dd p{ width:98%; height: 9.3rem; float: left; position: relative;text-align: left;border-right: 0.1rem solid #e9e9e9;border-bottom: 0.1rem solid #e9e9e9;padding:1.3rem 0 0;box-sizing: border-box; margin:3px; overflow:hidden}


.digital{width:98%; height:180px;background: #fff;border:1px solid #e9e9e9;box-sizing: border-box; position: relative; clear:both;overflow: hidden; margin:3px}
.digital li{height:90px;width:50%;padding-top: 22px; box-sizing: border-box; float: left; text-align: left; position: relative;cursor: pointer;border-bottom: 1px solid #e9e9e9;}
.digital li em{position: relative;display: block;  font-family: "Arial"; color: #335270; font-weight: bold; font-size: 30px;width: 100%;}
.digital li em b{ margin-left:0px;font-size: 30px; color: #335270;font-weight: bold;font-family: "Century Gothic","Arial";}
.digital li em i{ font-size:20px;  color: #000000;text-align: center; font-weight: bold;width:45px; line-height: 28px;height: 28px;display: block;text-transform: uppercase;font-family: "Arial";position: absolute;bottom:6px; right:0px;display: block;border-radius: 100%;}
.digital li h4{font-size: 18px; color: #666666; text-align: center; line-height: 42px; font-weight: normal;}
 
.digital li:nth-child(1){border-right: 1px solid #e9e9e9;}
.digital li:nth-child(1) b{margin-left: 58px;}
.digital li:nth-child(1) i{right:100px;}
.digital li:nth-child(2) b{margin-left:45px;}
.digital li:nth-child(2) i{right:55px;}
.digital li:nth-child(3){border-right: 1px solid #e9e9e9;}
.digital li:nth-child(3) b{margin-left:47px;}
.digital li:nth-child(3) i{right:75px;}
.digital li:nth-child(4) b{margin-left:52px;}
.digital li:nth-child(4) i{right:95px;} 
}
 


/*index cp */
.g-products{height: auto;background:#fff;overflow: hidden; padding:50px 0  70px; box-sizing: border-box; font-family: "Microsoft YaHei";clear: both;overflow: hidden;margin:0 auto; }
.g-products .tit01{height:163px;}
.g-products .tit01 p{background:url(../images/protitbg.png) no-repeat center top;}
.products{position: relative;}
.pro-clm1{max-height: 855px;background: url(../images/clm1.jpg) no-repeat center top;padding: 100px 0 80px;box-sizing: border-box;}
.pro-desc{padding-left: 20px;}
.pro-desc h3{font-size: 24px;color: #fff;font-weight: normal;margin-bottom: 38px;}
.pro-desc h3 a{color: #fff;}
.pro-desc h3 b{font-size: 48px;color: #ffffff;font-weight: bold;}
.pro-desc p{font-size: 20px;line-height: 30px;color: #fff;}
.pro-desc .pro-btn{display: block; margin:70px 0 92px;background: url(../images/case-btn.gif) no-repeat; width: 132px;height: 42px;line-height: 42px;text-align: left;font-weight: bold;font-size: 16px;color: #fff;padding-left: 24px;box-sizing: border-box;}
.pro{overflow: hidden;position: relative;padding:25px;background: #fff;box-shadow:3px 0 7px rgba(191, 191, 191, 0.35);}
.pro-con{overflow: hidden;}
.pro li{width:24.4%;margin-right: 0.8%; position: relative; float: left;}
/*.pro li:nth-child(4n){margin-right: 0;}*/
.pro li em{width:100%;display: block;border:1px solid #f0f0f0;box-sizing: border-box;}
.pro li em img{width:100%; display: block;}
.pro li h4{font-size:16px;color: #666666;font-weight: normal;text-align: center; line-height: 45px;height: 45px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.pro li:hover em{border-color: #335270;}

.pro-clm2 h3{font-size: 18px;color: #666666;font-weight: bold;margin-bottom: 12px;padding-left: 24px;background: url(../images/clm-line.gif) no-repeat left 11px;}
.pro-clm2 h3 a{color: #666666;}
.pro-clm2 h3 b{font-size: 40px;color: #333333;margin-right: 12px;}
.pro-clm2 dl{width: 49.1%;float: left;}
.pro-clm2 dt img{width: 100%;display: block;}
.pro-clm2 dd{padding-top: 11px;overflow: hidden;}
.pro-clm2 li{width:49.05%;margin-right: 1.89%; position: relative; float: left;}
/*.pro-clm2 li:nth-child(2n){margin-right: 0;}*/
.pro-clm2 li em{width:100%;display: block;border:1px solid #f0f0f0;box-sizing: border-box;}
.pro-clm2 li em img{width:100%; display: block;}
.pro-clm2 li h4{font-size:16px;color: #666666;font-weight: normal;text-align: center; line-height: 45px;height: 45px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.pro-clm2 li:hover em{border-color: #335270;}
.pro-clm2 dl:nth-child(2){float: right;}

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

 
}

/**/
.g-cases{ height:auto; background:#ffffff; padding:65px 0 80px;font-family:"Microsoft Yahei";box-sizing: border-box; position: relative;max-width: 1920px;overflow: hidden; }
.g-cases .tit01{height:142px; }
.g-cases .tit01 p{background:url(../images/casetitbg.png) no-repeat center top;}
.case-nav{height: 57px;border:1px solid #e9e9e9; text-align: center;position: relative;margin-bottom: 50px;background:#fff;}
.case-nav a{display: block;width: 12.25%;height: 100%; border-right: 1px solid #e9e9e9;background:#fff; text-align:center; line-height: 57px;font-size:18px;color: #000000;box-sizing: border-box;float: left; font-weight: normal;position: relative;}
.case-nav h3{width: 88%;}
.case-nav .case-more{width: 13.7%;border:0;}
.case-nav a.cur,.case-nav a:hover{color: #fff;background: #335270;font-weight: bold;}
.cases{width:100%; position: relative;overflow: hidden;background:#f7f7fa;}
.case-con dl{width:100%;background: #fff;border: 1px solid #e9e9e9;box-sizing: border-box;}
.case-con dt{width:65%;float: right;}
.case-con dt img{width:100%;display: block;}
.case-con dd{width: 35%; padding:62px 68px  0 50px;box-sizing: border-box;}
.case-con dd h4{font-size:30px;color: #000000; height: 70px;line-height: 80px;margin-bottom: 2vw; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.case-con dd h4 a{color: #000000;}
.case-con dd h4 b{display: block;float: left;width: 80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.case-con dd i{display: block;width: 20%;float: right;}
.case-con dd p{line-height: 30px;font-size: 16px;color: #666666;text-align: justify;}
.case-con dd span{display: block; margin:5.2vw 0 0;background: url(../images/case-btn.gif) no-repeat; width: 132px;height: 42px;line-height: 42px;text-align: left;font-weight: bold;font-size: 16px;color: #fff;padding-left: 24px;box-sizing: border-box;}

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


}
/**/
.g-super{ height: auto;background:#fff;padding:75px 0 40px; box-sizing: border-box; font-family: "Microsoft YaHei";}
.g-super .tit01{height:166px;}
.g-super .tit01 p{background:url(../images/supertitbg.png) no-repeat center top;}
.super{position: relative;}
.super-con{width:100%;margin-bottom: 60px;position: relative;}
.super-con img{width:100%;display:block;}
.super-con dl{width: 100%;}
.super-con dt{width: 59.285%;float: right;position: relative;}
.super-con dt em{width: 110px;height: 120px;text-align: center; font-size: 28px;font-weight: bold;color: #fff;background: url(../images/supertico.png) no-repeat center top;display: block;padding-top: 13px;box-sizing: border-box;position: absolute;top:0;}
.super-con dd{width: 45.14%;position:absolute;bottom: 0;z-index: 1;background: #fff;padding:32px 48px 35px;box-shadow: 3px 9px 13px rgba(191, 191, 191, 0.26);box-sizing: border-box;}
.super-con dd h4{font-size: 24px;color:#000000;font-weight: bold; line-height:42px;margin-bottom: 1vw;padding-bottom: 20px;border-bottom: 1px solid #e5e5e5;}
.super-con dd h4 i{display: block;float: left;width: 41px;height: 41px;border-radius: 100%;text-align: center;line-height: 41px;font-size: 24px;font-family: Arial, Helvetica, sans-serif; font-weight: normal;background: #335270;color: #fff;margin-right: 15px;}
.super-con dd p{font-size:16px; color:#666666;  line-height:30px;text-align: justify; }
.super-con dd p b{font-weight: bold;color: #62b06d;}
.super-con dd span{display: block;margin-top: 22px;}
.super-con dd span img{width: 256px;height: 137px;display: block;float: left;}
.super-con dd span img:nth-child(1){margin-right: 15px;}
.super1 dt,.super3 dt{float: left;}
.super1 dt em,.super3 dt em{left:0;}
.super1 dd,.super3 dd{right:0px;}
.super2 dt,.super4 dt{float: right;}
.super2 dt em,.super4 dt em{right:0;}
.super2 dd,.super4 dd{left:0px;}
.super3 dd{padding:32px 45px 35px;}
@media screen and (max-width:1680px) {
  .super-con dd span{display: none;margin-top: 22px;}
}

 

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


}
/**/
.g-about{background:#fff;height:auto;overflow: hidden; font-family:"Microsoft Yahei";position: relative;box-sizing: border-box;padding:70px 0 0;}
.g-about .tit01{position: relative;z-index: 1;}
.g-about .tit01 p{background:url(../images/abttitbg.png) no-repeat center top;}
.g-about img{width: 100%;display: block;}
.about{position: relative;margin-top:-48px;}
.about dl dt{text-align: center;}
.about dl dd {width: 600px;position: absolute;left:10%;top:12.5vw;margin-left: 11.25vw; z-index: 2;}
.about dl dd p{ font-size: 16px; color: #333333;line-height: 28px;text-align: justify;}
.about dd span{display: block; margin:2.8vw 0 0;background: url(/images/about-btn.gif) no-repeat; width: 132px;height: 42px;line-height: 42px;text-align: left;font-weight: bold;font-size: 16px;color: #fff;padding-left: 24px;box-sizing: border-box;float: right;}



@media screen and (max-width:1680px) {
    .about dl dd {margin-left:8.25vw;}

}

/**/
.g-show{background:none;height:auto;overflow: hidden;padding-bottom: 15px; font-family:"Microsoft Yahei";position: relative;box-sizing: border-box;max-width: 1920px;margin:-70px auto 0;}
.show{overflow: hidden;position: relative;padding:20px;background: #fff;box-shadow:3px 0 7px rgba(191, 191, 191, 0.35);box-sizing: border-box;}
.show-nav{float: right;width:34.28%; max-width: 480px;height:158px;background:#e6e6e6;}
.show-nav a{display: block;width:190px; height:158px; float: left;font-size: 22px;color: #333333; line-height: 42px;text-align: center;padding-top:2vw;box-sizing: border-box;position: relative;}
.show-nav a.cur::after{content: ""; width: 0;height:0;position: absolute; top:50%;margin-top:-6px; left:-8px;border-right: 8px solid #62b06d;border-top:6px solid rgba(0, 0, 0, 0);border-bottom:6px solid rgba(0, 0, 0, 0);}
.show-nav  em{width:40px;height: 34px;display: block;margin:0 auto; position: relative;overflow: hidden;;}
.show-nav  em img{position: absolute;left:0;top:0;}
.show-nav a.cur{background: #62b06d;color: #fff;}
.show-nav a.cur em img{top:-34px;}


.show-con{overflow: hidden;width: 61.4%;max-width: 860px; float: left;}
.show li{width:32.55%;position: relative; float: left;}
.show li em{width:100%;display: block;border:0px solid  #f0f0f0;box-sizing: border-box;}
.show li em img{width:100%; display: block;}
.show li h4{font-size:16px;color: #666666;font-weight: normal;text-align: center; line-height: 35px;height: 35px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.show li:hover em{border-color: #335270;}


/*友情链接*/
.link{height:auto;width: 1400px;line-height:30px;position: relative;margin: 0 auto;font-size:14px;color:#333;padding:10px 0;}
.link_c{width:100%;text-align: left;}
.link a{display: inline-block;color:#666;padding:0 15px;}


@media screen and (max-width:1680px) {
  .link{width: 1200px;}
  .link_c{margin-left: -144px;}
}


@-webkit-keyframes spin{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*animation*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}