﻿@keyframes fadedown {
    from { transform: translateY(-100%); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }
}
@keyframes fadedown {
    from { transform: translateY(-100%); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }
}
.banner { position: relative; overflow: hidden; }
.banner .bannerfix >li { height: 100%; line-height: 0; opacity:0; transition:opacity 1000ms linear; -webkit-transition:opacity 1000ms linear; float:left;}
.banner .bannerfix >li .bimg { line-height: 0; width: 100%; position: relative; transition: transform 5s ease; -webkit-transition: transform 5s ease; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.banner .bannerfix >li.imgIn{ opacity:1; z-index:10; display:block;}
.banner .bannerfix >li.imgIn .bimg { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
.banner .bannerfix >li.imgIn .bbox small{ opacity:1; visibility:visible; top:0; transition:420ms 0ms;}
.banner .bannerfix >li.imgIn .bbox h1{ opacity:1; visibility:visible; top:0; transition:420ms 120ms;}
.banner .bannerfix >li.imgIn .bbox b{ opacity:1; visibility:visible; top:0; transition:420ms 240ms;}
.banner .bannerfix >li.imgIn .bbox p{ opacity:1; visibility:visible; top:0; transition:420ms 460ms;}
.banner .bannerfix >li.imgIn .bbox .details{ opacity:1; visibility:visible; top:0; transition:420ms 580ms;}

.banner .bannerfix >li.imgIn .bbox2 h1{ opacity:1; visibility:visible; top:0; transition:420ms 120ms;}
.banner .bannerfix >li.imgIn .bbox2 b{ opacity:1; visibility:visible; top:0; transition:420ms 240ms;}
.banner .bannerfix >li.imgIn .bbox2 .line2{ opacity:1; visibility:visible; top:0; transition:420ms 460ms;}
.banner .bannerfix >li.imgIn .bbox3 h1{ opacity:1; visibility:visible; left:0; transition:420ms 580ms;}

.banner .bannerfix >li.imgIn .bbox4 h1{ opacity:1; visibility:visible; top:0; transition:420ms 120ms;}
.banner .bannerfix >li.imgIn .bbox4 b{ opacity:1; visibility:visible; top:0; transition:420ms 240ms;}
.banner .bannerfix >li.imgIn .bbox4 .line2{ opacity:1; visibility:visible; top:0; transition:420ms 460ms;}
.banner .bannerfix >li.imgIn .bbox5 h1{ opacity:1; visibility:visible; left:0; transition:420ms 460ms;}

.banner .flex-control-nav{ width:100%; height:20px; position:absolute; left:0; bottom:59px; text-align:center; z-index:20;}
.banner .flex-control-nav li{ display:inline-block; position:relative; margin-right:14px; width:5px; height:20px;}
.banner .flex-control-nav li:last-child{ margin-right:0;}
.banner .flex-control-nav li span{ display:block; text-indent:999px; overflow:hidden; width:5px; height:7px; position:absolute; background:#fff; transition:320ms; left:0; top:6px;}
.banner .flex-control-nav li a.flex-active span{ height:20px; top:0;}
.bbox{ max-width:552px;width:40%; margin:auto; position:absolute; right:2.8%; top:20%; text-align:center;}
.bbox h1{ line-height:1; color:#fff; font-size:48px; text-align:left; opacity:0; visibility:hidden; position:relative; top:30px;}
.bbox h1 img{width:100%; height: auto;}

.bbox2{ width:561px;  margin:auto; position:absolute; left:15%;  top:42%; text-align:center;  }
.bbox2 h1{ line-height:1; color:#155e9f; font-size:45px; text-align:left; opacity:0; visibility:hidden; position:relative; top:30px;}
.bbox2 h1 span{ color:#282c30;}
.bbox2 b{ display:block; line-height:1.8; text-align:left; color:#555555; font-size:24px; margin-top: 25px; margin-bottom:40px; opacity:0; visibility:hidden; position:relative; top:30px; min-height:36px; font-weight: normal;}
.bbox2 .line2{ height: 2px; width: 141px; background: #929292;opacity:0;top:50px;}

.bbox3{ max-width:682px;width:40%;  margin:auto; position:absolute; left:50%;top:25%; }
.bbox3 h1{line-height:1; color:#155e9f; font-size:45px; text-align:left; opacity:0; visibility:hidden; position:relative; left:30px;}
.bbox3 h1 img{width:100%; height: auto;}

.bbox4{ width:561px;  margin:auto; position:absolute; left:15%;  top:42%; text-align:center;}
.bbox4 h1{ line-height:1; color:#fff; font-size:45px; text-align:left; opacity:0; visibility:hidden; position:relative; top:30px;}
.bbox4 b{ display:block; line-height:1.4; text-align:left; color:#fff; font-size:22px;margin-top: 35px;  margin-bottom:40px; opacity:0; visibility:hidden; position:relative; top:30px; min-height:36px; font-weight: normal;}
.bbox4 .line2{ height: 2px; width: 141px; background: #ffffff;opacity:0;top:50px;}

.bbox5{ max-width:432px;width:40%;  margin:auto; position:absolute; left:50%;top:25%; }
.bbox5 h1{line-height:1; color:#155e9f; font-size:45px; text-align:left; opacity:0; visibility:hidden; position:relative; left:30px;}
.bbox5 h1 img{width:100%; height: auto;}




.details{ width:180px; height:51px; margin:auto; position:relative; opacity:0; visibility:hidden; position:relative; top:30px;}
.details:before{ content:""; width:100%; height:100%; background:#fff; position:absolute; left:0; top:0; transition:320ms ease-in-out;  transform:scaleY(0); -webkit-transform:scaleY(0); -moz-transform:scaleY(0); opacity:0; visibility:hidden;}
.details a{ display:block; border:2px solid #fff; padding-left:39px; line-height:47px;  position:relative; color:#fff; font-size:14px; text-align:left; background:url(/Public/images/arrow1.png) 106px center no-repeat;}
.details:hover:before{ opacity:1; transform:scaleY(1); -webkit-transform:scaleY(1); -moz-transform:scaleY(1); visibility:visible;}
.details:hover a{ color:#0c7040; background:url(/Public/images/arrow2.png) 112px center no-repeat;}

.bamnline { width: 100%; bottom: 0; background:rgba(21,94,159,0.0); z-index:20; position:absolute;}
.bamnline span { display: block; width: 0; height: 2px; background: #f3b61f; }
.bamnline.load span { width: 100%; transition: 5.8s 0s linear; -webkit-transition: 5.8s 0s linear; -moz-transition: 5.8s 0s linear; }


.bannerTel{ display: none; }
.slick4_bantel{position:relative; overflow:hidden; max-width:1004px; padding-top: 50px;}
.slick4_bantel .slick img{ width:100%;}
.slick4_bantel .slick-dots{ position:absolute; left:0; text-align: center; width: 100%; bottom:20px;}
.slick4_bantel .slick-dots li{display:inline-block; margin:0 8px; width:10px; height:10px; background: url(../image/ico3.png) no-repeat; }
.slick4_bantel .slick-dots .slick-active{ background: url(../image/ico3on.png) no-repeat;}

/*********indexPart1*********/
.indexPart1{background: url(../image/001.jpg) no-repeat center #155e9f; padding: 20px 0;}
.indexPart1 ul{}
.indexPart1 ul li{ width:25%; float: left; background: url(../image/002.png) no-repeat right; color: #fff;}
.indexPart1 ul li:nth-child(2n){background:none;}
.indexPart1 ul li h2{ font-size: 57px; font-family: Arial; height: 40px;margin-bottom: 40px; padding-left: 20%;  }
.indexPart1 ul li h2 span{ font-size: 18px; font-weight: normal;}
.indexPart1 ul li p{ font-size: 16px;padding-left: 20%; margin-bottom: 10px;}

/*********indexPart2*********/
.indexPart2{padding:3.5% 0 7% 0; width: 100%; margin: 0 auto; background:url(../image/003.jpg) no-repeat bottom #e6ecf2;}
.indexPart2 .name{ text-align: center;padding-bottom: 4%; }
.indexPart2 .name h2{font-size: 36px; background: url(/Public/images/017.png) no-repeat bottom  center; color: #333333; font-weight: bold;}
.indexPart2 .name .line{ width:90px; height: 1px; background: #ccc; margin: 10px auto;}
.indexPart2 .name p{ color: #6b6b6b; font-size: 14px;}

.indexPart2 .i_cp_box{}

.i_ser_box{  margin-right: 0px;}
.i_ser_box .box { width: 95%; height:100%; overflow:hidden; margin:0 auto; position: relative;}
.i_ser_box .box .img { width: 63%; float: right; -o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;height:auto;word-break: break-all;}
.i_ser_box .box .img img { width: 100%; height: auto;}
.i_ser_box .box .txt { width: 37%; color: #fff;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;overflow:hidden;word-break: break-all; padding-bottom:9999px; margin-bottom:-9999px; float:left;
background: -webkit-linear-gradient(left top, #1c6cb3 , #035399); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(bottom right, #1c6cb3 , #035399); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(bottom right, #1c6cb3 , #035399); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to bottom right, #1c6cb3 , #035399); /* 标准的语法 */ 
}
.i_ser_box .box .txt h2 { color: #fff; font-size: 20px;   line-height:20px;transition:.5s; padding: 22% 10% 5% 10%;}
.i_ser_box .box .txt .line{ width:39px; height: 3px; background: #fff; margin: 25px 10%;}
.i_ser_box .box .txt p{font-size:14px; color: #c0dffa; line-height: 30px;padding: 0% 10%; height: 127px; overflow: hidden;} 
.i_ser_box .box .txt .more{height: 36px; width: 36px; margin-left: 10%; margin-top: 30px; -o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;}
.i_ser_box .box:hover .txt  .more { 
	-webkit-transform:rotate(90deg) scale(1); 
	-moz-transform:rotate(90deg) scale(1);
	-ms-transform:rotate(90deg) scale(1);
	-o-transform:rotate(90deg) scale(1);
}

.slick2 .slick-prev, .slick2 .slick-next { position: absolute; display: block; width: 141px; height:96px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 0%; margin-top: 0px; padding: 0; border: none; outline: none;  background: none;}

.slick2 .slick-prev {top: 38%;  left: -12%;background: url(../image/004.png) no-repeat center; background-size:cover cover;}

.slick2 .slick-next {top: 38%;  right: -12%;background: url(../image/005.png) no-repeat center; background-size:cover cover; }
.slick2 .slick-prev:hover{ background: url(../image/004.png) no-repeat center;background-size:cover cover;}
.slick2 .slick-next:hover{ background: url(../image/005.png) no-repeat center;background-size:cover cover;}

.slick2 .slick-dots{ position:absolute; left:0; text-align: center; width: 100%; bottom:-60px;}
.slick2 .slick-dots li{display:inline-block; margin:0 3px; border-radius: 50%; width:8px; height:8px; background:#9c9c9c; }
.slick2 .slick-dots .slick-active{ background:#f3b61f;}




.ip2box{background: url(/Public/images/007.jpg) no-repeat bottom right #fafafa; }
.ip2box .left{ width:43%; float: left;}
.ip2box .left img{width:100%; height: auto;}
.ip2box .right{ width:57%; float: left;}
.ip2box .right .r_top{ width:100%; height: 65%; background: url(/Public/images/006.jpg) no-repeat top right #0075cf;  padding: 6% 5%;}
.ip2box .right .r_top h2{ color:#fff; font-size: 24px; margin-bottom: 2%;}
.ip2box .right .r_top p{ color:#fff;  font-size: 14px;margin-bottom: 4%; height: 53px; overflow: hidden;}
.ip2box .right .r_top .more{ width:139px; height: 44px; line-height: 44px; border: 1px solid #308fd8; text-align: center;  color: #fff;}

.indexPart2 .slick3{ padding: 0 1.42rem 1.22rem 1.42rem; position: relative;}


.slick3 .slick-prev, .slick3 .slick-next { position: absolute; display: block; width: 100px; height:63px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 0%; margin-top: 0px; padding: 0; border: none; outline: none;  background: none;}

.slick3 .slick-prev {top: 71%;  left: 46%;background: url(/Public/images/nimg42_left.png) no-repeat center; background-size:cover cover;}

.slick3 .slick-next {top: 71%;  left: 53%;background: url(/Public/images/nimg42_right.png) no-repeat center; background-size:cover cover; }
.slick3 .slick-prev:hover{ background: url(/Public/images/nimg42_lefton.png) no-repeat center;background-size:cover cover;}
.slick3 .slick-next:hover{ background: url(/Public/images/nimg42_righton.png) no-repeat center;background-size:cover cover;}




/*********indexPart3*********/
.indexPart3{ padding:4% 0;background:#f7f7f7;}
.indexPart3 .name{ text-align: center;padding-bottom: 4%; }
.indexPart3 .name h2{font-size: 36px; color: #333333; font-weight: bold;}
.indexPart3 .name .line{ width:90px; height: 1px; background: #18609b; margin: 10px auto;}
.indexPart3 .i_a_left{ width:44%; float: left; padding-left: 3%;}
.indexPart3 .i_a_left h2{font-size:20px; color: #333333;  }
.indexPart3 .i_a_left .line{ width:48px; height: 3px; background: #f5b51f; margin: 20px 0;}
.indexPart3 .i_a_left .more{ width:150px; height: 40px; line-height: 40px; color:#fff; background: #155fa0; text-align: center; margin-top: 50PX; }
.indexPart3 .i_a_left .more a{ color:#fff;}
.indexPart3 .i_a_left .more:hover{background:#f3b61f; color:#fff;}
.indexPart3 .i_a_left p{ line-height: 26px; margin-bottom: 15px; }
.indexPart3 .i_a_right{ width:48%; float:right;}
.indexPart3 .i_a_right img{ width:100%; height: auto; max-width:570px;}

/*********indexPart4*********/
.indexPart4{ padding:60px 0 80px ; position: relative; background: #fff;}
.indexPart4 .name{ text-align: center; margin-bottom: 50px;}
.indexPart4 .name h2{ font-size: 32px; color: #000;}
.indexPart4 .name .line{ width:90px; height: 1px; background: #cccccc; margin: 10px auto 15px auto;}
.indexPart4 .name p{ font-size:12px; width: 80%; margin: 0 auto; color:#888888;}

.indexPart4 .par_box { text-align: center;}
.indexPart4 .par_box img { border: 1px solid #e5e5e5; margin: 0 auto; width: 100%; height: auto;}
.indexPart4 .par_box:hover img{border: 1px solid #c6daed; }

.indexPart4 .par_box p { width: 100%; height: 40px; line-height: 40px; text-align: center; color: #999;}
.indexPart4 .swiper-container{ }
.indexPart4 .swiper-pagination-bullets { bottom: 0px; position: absolute}

.indexPart4 .more{ width:120px; height: 40px; line-height: 40px; text-align: center; color: #fff; border-radius: 40px; background:#155fa0; margin: 50px auto 0 auto;}
.indexPart4 .more:hover{ background:#f3b61f; color:#fff;}


