﻿/*

函信网络 设计编写 原创设计 请勿仿制

公司网址:www.hanett.com

HMM编写

*/

/*@font-face {

  font-family: "SY";

  src:url("../fonts/SourceHanSansCN-ExtraLight.otf"),

       url("../fonts/SourceHanSansCN-ExtraLight.woff2") format("woff2"),

       url("../fonts/SourceHanSansCN-ExtraLight.woff") format("woff"),

       url("../fonts/SourceHanSansCN-ExtraLight.ttf") format("truetype"),

       url("../fonts/SourceHanSansCN-ExtraLight.eot") format("embedded-opentype"),

       url("../fonts/SourceHanSansCN-ExtraLight.svg") format("svg");

}*/



@font-face {

  font-family: 'icomoon';

  src:  url('../fonts/icomoon.eot?gssctm');

  src:  url('../fonts/icomoon.eot?gssctm#iefix') format('embedded-opentype'),

    url('../fonts/icomoon.ttf?gssctm') format('truetype'),

    url('../fonts/icomoon.woff?gssctm') format('woff'),

    url('../fonts/icomoon.svg?gssctm#icomoon') format('svg');

  font-weight: normal;

  font-style: normal;

}



[class^="icon-"], [class*=" icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'icomoon' !important;

  speak: none;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;



  /* Better Font Rendering =========== */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.icon-more:before {

  content: "\e900";

}


/*.w1200{ width:1200px; margin:0 auto;}
header{ position: relative; }
.header_inner{ height:100px; }
.header_inner .logo{ float:left; width:207px;}
.header_inner .logo img{ width:100%;}

.nav{ float:right;}
.nav ul { float:left;}
.nav li{ float:left; width:110px; text-align:center; height:80px; margin-top:20px; line-height:80px; font-size:16px;transition: all 1s ease 0s; }
.nav li a{ display:block;color:#343434;}
.nav li a:hover {color:#343434;}
/* .nav li:before{background: #3c99e2 none repeat scroll 0 0;bottom: 0;content: "";height: 2px;left: 0;opacity: 0;position: absolute;transition: all 0.5s ease 0s;visibility: hidden;width: 0;} */
/*.nav li:hover::before{width: 100%;opacity: 1;visibility: visible;}
.nav li .ul{ position:absolute; top:70px; display:none;z-index: 999;}
.nav li .ul li{line-height:normal; ;}
.nav li .ul li a{background:#3399cc;line-height:normal; color:#fff; display: flex;align-items: center;justify-content: space-around;flex-direction: column;height: 70px;width: 100%; }
.nav li .ul li a:hover{ background:#115f85; color:#fff;}

.nav .search{ float:left; width:35px; height:35px;margin-top: 40px; position:relative; cursor:pointer;}
.nav .search img{ transition:all .5s;}
.nav .search img:hover{ transform:translateY(-5px)}
.nav .search .search_input{ z-index:999;width: 200px;position: absolute;top: 140%;right: 0;background: rgba(0,88,160,0.9);position: absolute;display: none;}
.nav .search .search_input .s1{width: 100%;box-sizing: border-box; 
  height: 36px;border: none;background: none;padding: 0 10px;color: #333;}
.nav .search .search_input .s1::-webkit-input-placeholder{color: #fff;}
.nav .search .search_input .s2{width: 32px;height: 32px;display: block;background: url(../images/search1.png) no-repeat center center;border: none;position: absolute;right: 0;top: 2px;}
.nav .on .search_input{display: block;}

.navigation{ position:absolute; top: 100px; width: 100%; z-index: 999; left: 0; background: #E6E6E6; border-top: 1px solid #eee; padding: 20px 0;  display: none }
.navigation .list{width: 190px; float: left;}
.navigation dl{ width: 100%; text-align: left;   }
.navigation dl dd{ height: 30px; line-height: 30px; font-weight: 600; }
.navigation dl dt{ line-height: 24px; }
.navigation dl dt a{ font-size: 14px; color: #333; }
.navigation dl dt dl{ padding-left: 10px; }
.navigation dl dt dl a{ color: #999; background: url(../images/ioc_l.png) no-repeat left center; background-size: 5px; padding-left: 13px; }
*/


.w1200{ width:1200px; margin:0 auto;}
.header_inner{ height:100px;  }
.header_inner .logo{ float:left; width:207px;}
.header_inner .logo img{ width:100%;}
@media (max-width:1440px){
.header_inner .logo{ width:160px;margin-top: 10px;}

}



.nav{ float:right;    margin-right: 1%;}
.nav ul { float:left;}
.nav li{ float:left; width:100px; text-align:center; position:relative; height:100px; line-height:100px; font-size:16px;transition: all 0.3s ease 0s; position:relative; }
.nav li a{ display:block;color:#343434;}
.nav li:hover a{color:#343434;}
.nav li::before{
  background: #3c99e2 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease 0s;
  visibility: hidden;
  width: 0;
}
.nav li:hover::before{
  width: 100%;
  opacity: 1;
  visibility: visible;
}


.nav li .ul{ position:absolute; top:70px; display:none;z-index: 999;}
.nav li .ul li{line-height:normal;}
.nav li .ul li a{background:#3399cc;line-height:normal; color:#fff; display: flex;align-items: center;justify-content: space-around;flex-direction: column;height: 70px;width: 100%; }
.nav li .ul li a:hover{ background:#115f85; color:#fff;}
.nav .search{ float:left; width:35px; height:35px;margin-top: 30px; position:relative; cursor:pointer;}
.nav .search img{ transition:all .5s;}
.nav .search img:hover{ transform:translateY(-5px)}
.nav .search .search_input{ z-index:999;width: 200px;position: absolute;top: 140%;right: 0;background: rgba(0,88,160,0.9);position: absolute;display: none;}
.nav .search .search_input .s1{width: 100%;box-sizing: border-box; height: 36px;border: none;background: none;padding: 0 10px;color: #fff;}
.nav .search .search_input .s1::-webkit-input-placeholder{color: #fff;}
.nav .search .search_input .s2{width: 32px;height: 32px;display: block;background: url(../images/search1.png) no-repeat center center;border: none;position: absolute;right: 0;top: 2px;}
.nav .on .search_input{display: block;}


.nav li .subnav{width:150px;position:absolute;background:#fff;left:0;margin-left:0px; opacity: 0;-webkit-transform: translateY(15px);transform: translateY(15px);visibility: hidden;-webkit-transition: all .35s ease-out;transition: all .35s ease-out; z-index:99999;}
.nav li:hover .subnav{opacity:1;-webkit-transform: translateY(0);transform: translateY(0);visibility: visible; }
.nav li .subnav li a{width:100%;line-height:30px;display:block;
  text-align:center;box-sizing:border-box;padding:0px;color:#333;
 position: relative;padding-right: 0px;  
    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;  }
.nav li .subnav li a:hover{color:#0058a0;}
.nav li .subnav li{width: 100%;    margin-top: 0;height: auto;line-height: 30px;font-size:14px;}
.nav li .subnav li::before{
  background: #ccc none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 1;
  position: absolute;
  transition: all 0.5s ease 0s;
  visibility:visible;
  width:100%;
}
.nav li .subnav li:last-child::before{ width:0;}



.nav li .subnav1{width:150px;position:absolute;background:#fff;left:0;margin-left:0px; opacity: 0;-webkit-transform: translateY(15px);transform: translateY(15px);visibility: hidden;-webkit-transition: all .35s ease-out;transition: all .35s ease-out; z-index:99999;}
.nav li:hover .subnav1{opacity:1;-webkit-transform: translateY(0);transform: translateY(0);visibility: visible; }
.nav li .subnav1 li a{width:100%;line-height:30px;display:block;text-align:center;box-sizing:border-box;padding:0 20px;color:#333;text-align: left;position: relative;padding-right: 30px;    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;  }
.nav li .subnav1 li:hover a{color:#0058a0;}
.nav li .subnav1 li{width: 100%;    margin-top: 0;height: 30px;line-height: 30px;font-size:14px;}
.nav li .subnav1 li::before{
  background: #ccc none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 1;
  position: absolute;
  transition: all 0.5s ease 0s;
  visibility:visible;
  width:100%;
}
.nav li .subnav1 li:last-child::before{ width:0;}


.nav li .subnav li .subnav-nav{ background: #f5f5f5;width: 150px;}
.nav li .subnav li .subnav-nav li a{ line-height: 35px; text-indent: 10px;}
.nav li .subnav a:hover{ color: #3399cc}






















.banner_pic img {

	width: 100%;

}

.banner_pic .swiper-pagination-bullet {

	width: 2%;

	height: 5px;

	background: #000;

	border-radius:0; 

}

.banner_pic .swiper-pagination-bullet-active {

	background:#0064b3;

}

.swiper-container-horizontal>.swiper-pagination{bottom:5%;}





.wrapper{ padding: 80px 0; }

.index-title{ width:100%; border-bottom:1px solid #cccccc; height:60px; line-height:60px;}

.index-title .title{ float:left;}

.index-title .title:after{ display:block; width:60px; height:2px; background:#3c99e2; content:''; margin-top:-8px;}

.index-title .title strong{ color:#3c99e2; font-size:30px; font-family:"SY"; font-weight:500;}

.index-title .title span{ font-size:16px; color:#666666;}

.index-title .index-more{ float:right;}

.index-title .index-more a{ color:#999; font-size:14px;}

.index-title .index-more a span{vertical-align: -1px;}

.index-title .index-more a:hover{ color:#3c99e2;}











.index-pro{ width:100%;}

.index-pro ul{ padding:0 5px}

.index-pro li{ width:50%; float:left; overflow:hidden; margin-top:40px; box-sizing:border-box; transition:all .5s;}

.index-pro li:nth-child(2n){ margin-right:0;}

.index-pro li.right .text{ float:left; width:240px; margin-left:33px; position:relative;}

.index-pro li.right .text h3{ font-size:18px; font-weight:normal; text-align:right; margin-top:20px;}

.index-pro li.right .text h3 a{ color:#3c99e2;}

.index-pro li.right .text p{ font-size:16px; color:#666; margin-top:8px;text-align:right;}

.index-pro li.right .text .zhaiyao{font-size:14px; color:#666; margin-top:15px; border:1px dashed #999; border-width:1px 0 1px 0; padding:10px 0; line-height:22px; text-align:justify;}

.index-pro li.right .pic{ margin-left:20px;float:left; width:290px; overflow:hidden;}

.index-pro li.right .pic img{ display:block; width:100%; transition:all .5s;}

.index-pro li.right .pic:hover img{ transform:scale(1.1)}

.index-pro li.right .text:before{ width:2px; height:20px;background:#3c99e2; content:''; position:absolute; right:-10px; top:15%;}

.index-pro li.right .text:after{content: '';width: 0;position: absolute;top:19%;margin-top: -10px;height: 0;border-top:13px solid transparent;border-bottom:13px solid transparent;right: -35px;

border-left:15px solid #E8ECF0; z-index:999;}

.index-pro li.left .text{ float:left; width:240px; position:relative;margin-right:33px;}

.index-pro li.left .text h3{ font-size:18px;font-weight:normal; margin-top:20px;}

.index-pro li.left .text h3 a{ color:#3c99e2 ; }

.index-pro li.left .text p{ font-size:14px; color:#999999; margin-top:8px;}

.index-pro li.left .text .zhaiyao{font-size:14px; color:#666; margin-top:15px; border:1px dashed #999; border-width:1px 0 1px 0; padding:10px 0; line-height:22px; text-align:justify;}

.index-pro li.left .pic{ margin-right:20px;float:left; width:290px; overflow:hidden;}

.index-pro li.left .pic img{ display:block; width:100%;transition:all .5s;}

.index-pro li.left .text:before{ width:2px; height:20px;background:#3c99e2; content:''; position:absolute; left:-10px; top:15%;}

.index-pro li.left .text:after{content: '';width: 0;position: absolute;
top:19%;margin-top: -10px;height: 0;border-top:13px solid transparent;border-bottom:13px solid transparent;left: -35px;

border-right:15px solid #E8ECF0;}

.index-pro li .pic:hover img{ transform:scale(1.1)}

.index-pro li:hover{ box-shadow:0 2px 2px 2px #ccc;}



.index-pro .swiper-container-horizontal>.swiper-pagination{bottom:0px;}

.index-pro .swiper-container{ padding-bottom:40px;}

.index-pro .swiper-pagination-bullet {

	width: 8px;

	height: 8px;

	background:none; border:1px solid #000;

}

.index-pro .swiper-pagination-bullet-active {

	background:#0064b3;border:1px solid #0064b3;

}





.index-about .pic{ width:600px; float:left; overflow:hidden;}

.index-about .pic img{ width:100%; display:block;transition:all .5s;}

.index-about .pic:hover img{ transform:scale(1.1)}

.index-about .text{ width:530px; float:left; margin-left:36px;}

.index-about .text .title{  height:60px; line-height:60px; }

.index-about .text .title:after{ display:block; width:60px; height:2px; background:#3c99e2; content:''; margin-top:-7px;}

.index-about .text .title strong{ color:#3c99e2; font-size:30px; font-family:"SY"; font-weight:500;}

.index-about .text .title span{ font-size:16px; color:#666666;}

.index-about .text .content{margin-top:25px;}

.index-about .text .content p{ color:#999;  line-height:24px;text-align: justify;}

.index-about .text .content ul{ overflow:hidden; margin-top:35px;}

.index-about .text .content li{ float:left; width:95px; border:1px solid #b2b2b2; text-align:center; padding:15px 0; margin-right:15px; }

.index-about .text .content li .icon{ width:50px; height:50px; display:block; margin:0 auto;}

.index-about .text .content li p{font-size:12px; color:#999; margin-top:10px;text-align: center;}

.index-about .text .content li{ background:#3c99e2; border:1px solid #3c99e2;}

.index-about .text .content li p{font-size:12px; color:#fff;}

.index-about .text .content li:nth-child(1) .icon{ background:url(../images/index-a11.png) no-repeat center;}

.index-about .text .content li:nth-child(2) .icon{ background:url(../images/index-a22.png) no-repeat center;}

.index-about .text .content li:nth-child(3) .icon{ background:url(../images/index-a44.png) no-repeat center;}









.service{width:100%}

.service li{float:left;overflow:hidden;margin-top:45px;margin-right:45px;width:370px}

.service li:nth-child(3){margin-right:0}

.service .box{position:relative;perspective:750pt}

.service .box .box-img{transition:all .5s ease-in-out 0s;transform:rotateY(0); border:1px solid #eee;}

.service .box:hover .box-img{transform:rotateY(-90deg)}

.service .box .box-img img{width:100%;height:auto}

.service .box .box-content{position:absolute;top:0;left:0;box-sizing:border-box;padding:20px 20px;width:100%;height:100%;background:rgba(60,153,226,.8);text-align:center;transition:all .5s ease-in-out 0s;transform:rotateY(90deg)}

.service .box:hover .box-content{transform:rotateY(0)}

.service .box .title{margin-top:30px;color:#fff;text-transform:uppercase;font-size:20px}

.service .box .description{margin-top:20px;color:#fff;font-size:14px;line-height:24px}

.service .box .description:after{display:block;margin:15px auto;width:60%;border-bottom:1px solid #fff;content:""}

.service .box .social-links{margin:0;padding:0;list-style:none}

.service .box .social-links li{display:inline-block;margin:0 10px}

.service .box .social-links li a{color:#a6a6a6;font-size:20px}

.service .box .social-links li a:hover{color:#fff;text-decoration:none}











.news{ width:1200px; position:relative;height:700px;}

.news .line{ width:1px; height:700px; background:#cccccc; position:absolute; left:50%; margin-left:-1px;}

.news .list{ width:530px; box-sizing:border-box; position:relative; clear:both; margin-top:-50px; border:1px solid #fff;}

.news .list:nth-child(2){ margin-top:70px;}

.news .list h3{ color:#333; font-size:20px; font-weight:normal;padding:0 40px; margin-top:25px; }

.news .list p{ font-size:15px; color:#999; line-height:25px; margin-top:10px;padding:0 40px; }

.news .list .time{ height:60px; line-height:60px; background:#3c99e2;padding:0 40px; margin-top:35px; position:relative; }

.news .list .time span{ float:left;color:#999;}

.news .list .time span i{ font-size:30px; font-weight:600; float:left;     color: #fff}

.news .list .time span font{ font-size:16px; font-weight:500; float:left; margin-left:10px;    color: #fff}

.news .list .time a{ float:right; width:40px; height:40px; display:block; border:1px solid #999; color:#999; border-radius:50%; margin-top:10px;}

.news .list .time a span{ font-weight:400; font-size: 24px;margin-left: 6px; padding-top: 8px;}

.news .list.left .time:after{content: '';width: 0;
position: absolute;top:17px;height: 0;
border-top:13px solid transparent;border-bottom:13px solid transparent;right: -15px;

border-left:15px solid #3c99e2; z-index:999;}

.news .list:after{content: ''; 
width:14px; height:14px; border-radius:50%;
 border:1px solid #999; 
 position:absolute; right:-79px; background:#fff;
  top:50%; margin-top:-8px;box-shadow: 0 0 0 10px #fff;}





.news .left{ float:left;}

.news .right{float:right;}

.news .list.right .time:after{content: '';width: 0;
position: absolute;top:17px;height: 0;border-top:13px solid transparent;
border-bottom:13px solid transparent;left: -15px;

border-right:15px solid #3c99e2; z-index:999;}

.news .list.right:after{content: ''; width:14px; height:14px; border-radius:50%; border:1px solid #999; position:absolute; left:-79px; background:#fff; top:50%; margin-top:-8px;box-shadow: 0 0 0 10px #fff;}



.news .list:hover{ border:1px solid #ececec; box-sizing:border-box;}

.news .list:hover .time{background:#ececec;}

.news .list.left:hover .time:after{content: '';width: 0;position: absolute;top:17px;height: 0;border-top:13px solid transparent;border-bottom:13px solid transparent;right: -15px;

border-left:15px solid #ececec; z-index:999;}

.news .list.right:hover .time:after{content: '';width: 0;position: absolute;top:17px;height: 0;border-top:13px solid transparent;border-bottom:13px solid transparent;left: -15px;

border-right:15px solid #ececec; z-index:999;}

.news .list:hover:after{content: ''; width:14px; height:14px; border-radius:50%; border:1px solid #3c99e2; position:absolute; right:-79px; background:#fff; top:50%; margin-top:-8px;box-shadow: 0 0 0 10px #fff;}

.news .list:hover .time span{ float:left;color:#fff;}

.news .list:hover .time a{border:1px solid #fff;}














.scrollTop{ background:#3c99e2; color:#fff;margin-top:0px; text-align:right; height:40px; line-height:40px; cursor:pointer;}

.scrollTop span{ transform:rotate(-90deg); display:block; float:right; margin-top:16px;margin-left: 6px;}

footer{ background:url(../images/bottom.jpg); padding-top:50px; }

.footer li:nth-child(1){ width:280px; float:left; color:#999;}

.footer li:nth-child(1) h4{ font-weight:600; font-size:16px; color:#999; margin-top:15px;}

.footer li:nth-child(1) p{ font-size:14px; color:#999; margin-top:12px; line-height:20px;}

.footer li:nth-child(1) p span{ float:left; margin-right:10px;}





.footer li{ width:80px; float:left; color:#999; margin-right:4.5%; position: relative;}
.footer li:nth-child(3){ width:120px; float:left; color:#999; margin-right:4.5%;}

.footer li:nth-child(7){ margin-right:0;}

.footer li h5{ font-weight:600; font-size:16px; color:#999; margin-top:15px; border-bottom:2px solid #3c99e2; margin-bottom:20px; padding-bottom:10px;    text-align: center;}

.footer li a{ display:block; color:#999; margin-bottom:15px;    text-align: center;}

.footer li a:hover{ color:#fff;}

.copyright{ border-top:1px solid #999; height:50px; line-height:50px; margin-top:40px; color:#999; text-align:center; font-size:12px; font-family:"宋体"}

.copyright a{ color:#999;}

.copyright span a{ color:#fff;font-family:"宋体"}

.copyright span{ color:#fff; margin-left:10px;font-family:"宋体"}

.copyright a:hover{ color:#fff;}

.copyright span a:hover{ color:#999;}





.profile .profrow{background:#fff;cursor:pointer;}
.profile .profrow .profinfo{width:38%;float:left;overflow:hidden;box-sizing:border-box;} 
.profile .profrow .profimg{width:62%;float:left;overflow:hidden;transition: 600ms;-webkit-transition: 600ms;}
.profile .profrow .profimg img{width:100%;transition: 600ms;-webkit-transition: 600ms;}
.profile .profrow:hover .profimg img{transform: scale(1.1);-webkit-transform: scale(1.1);}
.profile .profrow:nth-child(1) .profimg{float:right;}
.profile .profrow .profinfo{box-sizing:border-box;padding:20px 4%;}
.profile .profrow .profinfo p{font-size:16px;color:#333;line-height:30px;margin-top:120px;}
.profile{margin:0 auto  100px auto; }










































