﻿@charset "utf-8";
/*首頁改版新增的css*/
.ab_wx_img {position: absolute;top: 42px;left: 10px;z-index: 9;border: 1px solid #CCC;background: #FFF;padding: 10px;}
.n-container{margin:auto;width:1190px;position:relative;}
.t-title{text-align:center;}
.t-title h2{font-size:38px;color:#2186ce;letter-spacing: 8px;margin-bottom:10px;}
.t-title span{display:block;font-size:16px;color:#cecece;}
.t-title p{width:970px;margin:20px auto 0 auto;color:#292929;line-height:30px;font-size:16px;}
.n-sevices{background:#fff;width:100%;min-width:1190px;padding:30px 0 60px 0;}
.n-sevices ul{overflow:hidden;margin-top:30px;}
.n-sevices ul li{float:left;width:25%;text-align:center;font-size:14px;color:#277dba;line-height:25px;}
.n-sevices ul li h3{font-weight:bold;font-size:20px;line-height:20px;margin:25px 0;}
.n-sevices ul li p{width:230px;margin:auto;}
.n-advantage{position:relative;width:100%;min-width:1190px;}
.n-advantage img{display:block;width:50%;}
.n-advantage .advantage-img{position:absolute;top:0;right:0;}
.n-aobutsevices{background:#fff;width:100%;min-width:1190px;padding:60px 0 70px 0;}
.n-aobutsevices ul{width:1092px;height:445px;margin:110px auto 0 auto;}
.n-aobutsevices ul li{position:relative;float:left;width:330px;height:400px;background:#eff3fb;margin:0 17px;text-align:center;}
.n-aobutsevices ul li .img-box{position:absolute;top:-45px;left:75px;width:180px;height:180px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;overflow:hidden;}
.n-aobutsevices ul li h3{padding-top:165px;font-size:22px;color:#223a56;font-weight:bold;margin-bottom:15px;}
.n-aobutsevices ul li span{color:#a0abc1;font-size:14px;}
.n-aobutsevices ul li .line{position:relative;width:260px;height:1px;background:#d4ddf0;margin:30px auto 40px auto;}
.n-aobutsevices ul li .line span{position:absolute;bottom:0;left:110px;width:40px;height:4px;background:#2186ce;}
.n-aobutsevices ul li p{color:#55617a;font-size:14px;width:260px;line-height:22px;height:66px;overflow:hidden;margin:auto;}
.n-case{background:#eff3fb;width:100%;min-width:1190px;padding:60px 0 110px 0;}
.n-case.t-title p{color:#6c6e72;}
.m-showimg{position:relative;}
.m-showimg .show-box{width: 1064px;height:445px;margin: 80px auto 0 auto;overflow:hidden;position:relative;}
.m-showimg ul{height:445px;width:2000%;position:absolute;}
.m-showimg ul li{float:left;margin:0 24px;}
.m-showimg ul li a{display:block;background:#439bfd;color:#fff;text-align:center;box-shadow: 0 10px 10px rgba(0,0,0,.1);margin-top:25px;}
.m-showimg ul li .img-box{width:290px;height:290px;background:#fff;overflow:hidden;text-align:center;line-height:290px;}
.m-showimg ul li .img-box img{height:100%;}
.m-showimg ul li .img-info{padding:25px 10px;font-size:16px;/* height:55px; */;}
.m-showimg ul li .img-info h3{font-size:18px;font-weight:bold;margin-bottom:10px;}
.m-showimg ul li a:hover{background:#2186ce;}
.m-showimg .left-btn,.m-showimg .right-btn{display:block;width:38px;height:38px;position:absolute;top:200px;}
.m-showimg .left-btn{left:0;background:url("/images/peitong/new/arrow_l.png") no-repeat center;}
.m-showimg .right-btn{right:0;background:url("/images/peitong/new/arrow_r.png") no-repeat center;}
.m-showimg ul li .big{margin-top:0;}
.m-showimg ul li .big .img-box{width:340px;height:340px;line-height:340px;}
.n-process{position:relative;width:100%;height:980px;min-width:1190px;background:url("/images/peitong/new/newjiaoyibg00.jpg") no-repeat center;}
.n-process .t-title h2{color:#fff;margin-top:10px;}
.n-process ul{overflow:hidden;margin-top:40px;padding:0 50px;}
.n-process ul li{float:left;color:#fff;}
.n-process ul li .img-box{overflow:hidden;}
.n-process ul li .process-icon{float:left;width:120px;height:120px;}
.n-process ul li .process-arrow{float:left;width:175px;height:26px;margin:40px 50px 0 55px;}
.n-process ul li h3{font-weight:bold;font-size:22px;margin:10px 0 20px 20px;}
.n-process ul li h3 strong{font-size:26px;}
.n-process ul li p{color:#a5bfe1;width:265px;line-height:20px;font-size:13px;margin-left:20px;height:180px;}
.n-process .process-left,.n-process .process-right{position:absolute;top:330px;}
.n-process .process-left{left:0;}
.n-process .process-right{right:0;}
/* 特效 */
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both; animation-fill-mode: both;}
.fadeinT_s {-webkit-animation-name: fadeinT_s;-moz-animation-name: fadeinT_s; -ms-animation-name: fadeinT_s;animation-name: fadeinT_s;}
.n-banner{width:100%;min-width:1190px;background:url("/images/peitong/new/banner01.png") no-repeat center;height:498px;font-size:18px;color:#fff;line-height:35px;}
.n-banner a{display:block;width:130px;height:36px;text-align:center;line-height:36px;border:1px solid #83cbf1;color:#a5cff2;margin-top:30px;}
.n-banner img{display:block;padding:115px 0 30px 0;}
.n-banner .banner-info{padding-left:80px;}
.bounce,.flip,.flash,.shake,.swing,.wobble,.ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease}
.fadein,.fadeinT,.fadeinT_s,.fadeinR,.fadeinB,.fadeinB_s,.fadeinL,.bouncein,.bounceinT,.bounceinR,.bounceinB,.bounceinL,.rotatein,.rotateinLT,.rotateinLB,.rotateinRT,.rotateinRB,.flipin,.flipinX,.flipinY,.slideWid{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards}
.fadeout,.fadeoutT,.fadeoutR,.fadeoutB,.fadeoutL,.bounceout,.bounceoutT,.bounceoutR,.bounceoutB,.bounceoutL,.rotateout,.rotateoutLT,.rotateoutLB,.rotateoutRT,.rotateoutRB,.flipout,.flipoutX,.flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards}
.fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}
.fadeinT_s{-webkit-animation-name:fadeinT_s;-moz-animation-name:fadeinT_s;-ms-animation-name:fadeinT_s;animation-name:fadeinT_s}
.flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}
.rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}
.rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}
.bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
.fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}
.bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}
.bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}
.bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}
.bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    60%{opacity:1;-webkit-transform:translateX(-30px)}
    80%{-webkit-transform:translateX(10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    60%{opacity:1;-moz-transform:translateX(-30px)}
    80%{-moz-transform:translateX(10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    60%{opacity:1;-ms-transform:translateX(-30px)}
    80%{-ms-transform:translateX(10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px)}
    60%{opacity:1;transform:translateX(-30px)}
    80%{transform:translateX(10px)}
    100%{transform:translateX(0)}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    60%{opacity:1;-webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    60%{opacity:1;-moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    60%{opacity:1;-ms-transform:translateY(-30px)}
    80%{-ms-transform:translateY(10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px)}
    60%{opacity:1;transform:translateY(-30px)}
    80%{transform:translateY(10px)}
    100%{transform:translateY(0)}
}
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px)}
    60%{opacity:1;-webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinT{
    0%{opacity:0;-moz-transform:translateY(-100px)}
    60%{opacity:1;-moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinT{
    0%{opacity:0;-ms-transform:translateY(-100px)}
    60%{opacity:1;-ms-transform:translateY(30px)}
    80%{-ms-transform:translateY(-10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px)}
    60%{opacity:1;transform:translateY(30px)}
    80%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}
@-webkit-keyframes bounceinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    60%{opacity:1;-webkit-transform:translateX(30px)}
    80%{-webkit-transform:translateX(-10px)}
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    60%{opacity:1;-moz-transform:translateX(30px)}
    80%{-moz-transform:translateX(-10px)}
    100%{-moz-transform:translateX(0)}
}
@-ms-keyframes bounceinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    60%{opacity:1;-ms-transform:translateX(30px)}
    80%{-ms-transform:translateX(-10px)}
    100%{-ms-transform:translateX(0)}
}
@keyframes bounceinL{
    0%{opacity:0;transform:translateX(-100px)}
    60%{opacity:1;transform:translateX(30px)}
    80%{transform:translateX(-10px)}
    100%{transform:translateX(0)}
}
@-webkit-keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinL{
    0%{opacity:0;-moz-transform:translateX(-100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinL{
    0%{opacity:0;-ms-transform:translateX(-100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinL{
    0%{opacity:0;transform:translateX(-100px)}
    100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px)}
    60%{opacity:1;-webkit-transform:translateY(-30px)}
    80%{-webkit-transform:translateY(10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceinB{
    0%{opacity:0;-moz-transform:translateY(100px)}
    60%{opacity:1;-moz-transform:translateY(-30px)}
    80%{-moz-transform:translateY(10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceinB{
    0%{opacity:0;-ms-transform:translateY(100px)}
    60%{opacity:1;-ms-transform:translateY(-30px)}
    80%{-ms-transform:translateY(10px)}
    100%{-ms-transform:translateY(0)}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px)}
    60%{opacity:1;transform:translateY(-30px)}
    80%{transform:translateY(10px)}
    100%{transform:translateY(0)}
}
@-webkit-keyframes fadeinR{
    0%{opacity:0;-webkit-transform:translateX(100px)}
    100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeinR{
    0%{opacity:0;-moz-transform:translateX(100px)}
    100%{opacity:1;-moz-transform:translateX(0)}
}
@-ms-keyframes fadeinR{
    0%{opacity:0;-ms-transform:translateX(100px)}
    100%{opacity:1;-ms-transform:translateX(0)}
}
@keyframes fadeinR{
    0%{opacity:0;transform:translateX(100px)}
    100%{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes fadeinT_s{
    0%{opacity:0;-webkit-transform:translateY(-40px)}
    100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeinT_s{
    0%{opacity:0;-moz-transform:translateY(-40px)}
    100%{opacity:1;-moz-transform:translateY(0)}
}
@-ms-keyframes fadeinT_s{
    0%{opacity:0;-ms-transform:translateY(-40px)}
    100%{opacity:1;-ms-transform:translateY(0)}
}
@keyframes fadeinT_s{
    0%{opacity:0;transform:translateY(-40px)}
    100%{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg)}
    60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}
    80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}
    100%{-webkit-transform:perspective(400px);}
}
@-moz-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg)}
    60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}
    80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}
    100%{-webkit-transform:perspective(400px);}
}
@-ms-keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg)}
    60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}
    80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}
    100%{-webkit-transform:perspective(400px);}
}
@keyframes flipinX{
    0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);opacity:0}
    40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg)}
    60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}
    80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}
    100%{-webkit-transform:perspective(400px);}
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
          animation-name: flipInX;
}
@-webkit-keyframes rotateinLT{
    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}
    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinLT{
    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}
    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinLT{
    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}
    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinLT{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1}
}
/* 转入-从右上 */
@-webkit-keyframes rotateinRT{
    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}
    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}
}
@-moz-keyframes rotateinRT{
    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}
    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}
}
@-ms-keyframes rotateinRT{
    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}
    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}
}
@keyframes rotateinRT{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1}
}























