/*

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

公司网址:www.hanett.com

HMM编写

*/





.block{ width:1300px; margin:0 auto; }

header{ width: 100%; height: 100px; line-height: 100px; z-index: 999; box-shadow: 0px 2px 10px #3333;position: fixed;
    background: #fff;
    opacity: 0.8; }

header .logo{ width: 186px;}

header .logo img{ width: 100%;}

header .nav{ }

header .nav li{ float: left;color: #333;  font-size: 18px; position: relative; }

header .nav li a{ color: #333;padding: 0 20px; display: block;font-family:"黑体" }

header .nav li:hover::after{width: 30px;height:2px;content: "";background:#0091d5;display:block;position:absolute;left:50%;transform:translateX(-50%);bottom: 0 }

header .nav li.on::after{ width: 30px; height: 2px;content: "";background:#0091d5; display:block;position:absolute;left:50%;transform:translateX(-50%);bottom: 0 }

header .nav li a:hover{color: #0091d5}

header .nav li.on a{color: #0091d5}

header .nav li dl{background:#fff;text-align:center;top:90px;opacity:0;visibility:hidden;-webkit-transition:all .35s ease-out;transition:all .35s ease-out;-webkit-transform:translateY(10px);transform:translateY(10px);position:absolute;width:120px;z-index:3;box-shadow:0 0 6px rgba(66,171,234,.1)}

header .nav li dl dd{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e1e1e1;text-align:left}

header .nav li dl dd a{padding:0 10px 0 10px;display:block;font-size:14px;color:#666}

header .nav li.on dl dd a{padding:0 10px 0 10px;display:block;font-size:14px;color:#666}

header .nav li dl dd:last-child{border:none}

header .nav li dl dd a:hover{color:#000029;border:none}

header .nav li:hover dl{opacity:1;visibility:visible;-webkit-transform:translateY(0);transform:translateY(0)}

header .nav li dl dd a:hover{color: #0091d5}


header .nav li .lang{ float: left; }
header .nav li img{ width: 18px;vertical-align: -4px; }
header .nav li:last-child{
 position: relative;
}

header .nav li .arrow:after {
 content: "";
 position: absolute;
 right: 0px;
 top: 50%;
 margin-top: -7px;
 width: 8px;
 height: 8px;
 border-left: 1px solid #999;
 border-bottom: 1px solid #999;
 transform: rotate(-45deg);
}





.mobile .m-logo{margin-left:5%;padding:16px 0;width:110px;}

.mobile .m-logo img{display:block;margin:0;width:100%;}

.mobile{position:fixed;top:0;left:0;z-index:99999;display:none;width:100%;height:50px;background:#fff;}

.mobile-inner{position:relative;margin-right:auto;margin-left:auto;width:100%;}

.mobile-inner img{margin-bottom:30px;width:100%;}

.mobile-inner p{margin:0;padding-right:30px;padding-bottom:30px;padding-left:30px;color:#676767;font-size:16px;line-height:25px;}

.mobile-inner-header{position:absolute;top:0;right:0;width:50%;height:50px;}

.mobile-inner-header-icon{position:relative;float:right;width:50px;height:50px;color:#fff;text-align:center;font-size:25px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s;}

.mobile-inner-header-icon:hover{background-color:rgba(255,255,255,.2);cursor:pointer;}

.mobile-inner-header-icon span{position:absolute;top:calc((100% - 0px)/ 2);left:calc((100% - 25px)/ 2);width:25px;height:1px;background-color:rgba(0,0,0,1);}

.mobile-inner-header-icon span:nth-child(1){transform:translateY(8px) rotate(0);}

.mobile-inner-header-icon span:nth-child(2){transform:translateY(-8px) rotate(0);}

.mobile-inner-header-icon span:nth-child(3){transform:translateY(0) rotate(0);}

.mobile-inner-header-icon-click span:nth-child(1){animation-duration:.5s;animation-fill-mode:both;animation-name:clickfirst;}

.mobile-inner-header-icon-click span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:clicksecond;}

.mobile-inner-header-icon-click span:nth-child(3){display:none;}

@keyframes clickfirst{0%{transform:translateY(8px) rotate(0);}

100%{transform:translateY(0) rotate(45deg);}

}

@keyframes clicksecond{0%{transform:translateY(-8px) rotate(0);}

100%{transform:translateY(0) rotate(-45deg);}

}

.mobile-inner-header-icon-out span:nth-child(1){animation-duration:.5s;animation-fill-mode:both;animation-name:outfirst;}

.mobile-inner-header-icon-out span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:outsecond;}

@keyframes outfirst{0%{transform:translateY(0) rotate(-45deg);}

100%{transform:translateY(-8px) rotate(0);}

}

@keyframes outsecond{0%{transform:translateY(0) rotate(45deg);}

100%{transform:translateY(8px) rotate(0);}

}

.mobile-inner-nav{position:absolute;top:50px;left:0;display:none;padding-top:0;padding-bottom:0;width:100%;height:calc(100vh - 50px);border-top:solid 1px #ddd;background-color:#fff;}

.mobile-inner-nav a{display:inline-block;padding:0 15px;width:100%;border-bottom:solid 1px #ddd;color:#333;text-decoration:none;font-weight:300;line-height:50px;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;}

.mobile-inner-nav a:hover{border-bottom:solid 1px rgba(255,255,255,.2);color:#999;}

.mobile-inner-nav dl{ display: none ;width: 90%;margin: 0 auto;}

.mobile-inner-nav dl a{border-bottom: solid 1px #eee; height: 40px; line-height: 40px;}







.banner_pic{ width:100%;position: relative;margin-top: 100px;}

.banner_pic img{ width:100%;}

.banner_pic .swiper-pagination-bullet-active{ background:#0091d5;  }

.banner_pic .swiper-pagination-bullet{ background: #fff; }







.proinfo{margin-top: 80px;}

.proinfo .box{ margin-bottom:80px; }

.proinfo .box .proinfo_fl{float: left;width: 48%;padding-top:50px;}

.proinfo .box .proinfo_fl h1{font-size:30px;font-weight:normal;color:#a78a73;line-height:36px;}

.proinfo .box .proinfo_fl dd{font-size:18px;line-height:2;margin-top:20px; color: #666}

.proinfo .box .proinfo_fr{float: right;width: 48%;}

.proinfo .box .proinfo_fr img{ display: block; width: 100%; }

.proinfo .box:nth-child(2) .proinfo_fl{float: right}

.proinfo .box:nth-child(2) .proinfo_fr{float: left}



.proinfo .box .proinfo_fl span{margin:20px 0 0 0;display:block;width:120px;text-align:center;background:#00a0f0;margin-top:30px;line-height:40px;}

.proinfo .box .proinfo_fl span a{display:block;color:#fff;font-size:15px;}

.proinfo .box .proinfo_fl span:hover{background:none; }

.proinfo .box .proinfo_fl span a:hover{color:#00a0f0;border:1px solid #00a0f0;}







.index-contact{ background: #f9f9f9;padding:50px 0 80px 0;}

.indextitle{ font-size: 30px; text-align: center; margin-bottom:60px;color: #0091d5 }

.index-contact li{ float: left; margin:0 auto; width: 25%; text-align: center;position: relative; }

.index-contact li img{ width: 90px; height: 90px;border:1px solid #e1e7ec;border-radius: 50%; padding:10px;display: block; margin:0 auto; }

.index-contact li h4{ color: #374250;font-size:16px;font-weight:normal; margin-top: 20px; }

.index-contact li p{ font-size: 14px;color: #9da9b9; line-height:1.5;word-break:break-all; width: 90%; margin:0 auto; margin-top: 10px;  }

.index-contact li .ewm{ display: none; }

.index-contact li .ewm img{border-radius: 0;padding:2px; background: #fff;width:106px; height: 106px; }



.index-contact li:hover img{-webkit-animation: swing 1s ease 0s 1 both;}







.foot{ height: 50px; line-height: 50px; background: #f1f1f1; }

.foot span{ color: #666;}

.foot .fr{ color: #666;}

.foot .fr a{ color: #666}

.foot .fr a.a1{ color: #666}



.inzhan{ margin:100px auto; }

.inzhan .swiper-container{ width: 100%; }

.inzhan .swiper-container img{ width: calc(100% - 100px); display: block; margin:0 auto; }

.inzhan .swiper-slide{ position: relative; }

.inzhan .swiper-slide dd{display:block;position:absolute;z-index:2;left:50px;bottom:30px;background:url(../images/headerbg.png) repeat center center scroll;color:#fff;overflow:hidden;padding:10px 30px;line-height:24px;font-size:15px;width:30%;box-sizing: border-box;}











#demo {overflow:hidden;border: 0px dashed #CCC;width:100%;}

#demo img {border: 0px solid #F2F2F2;height:202px;}

#indemo {float: left;width:2000%;}

#demo1 {float: left;}

#demo2 {float: left;}





.bgincase{ margin-bottom:80px; }



.banner{ width: 100%;margin-top: 100px;}

.banner img{ width: 100%; }



.product{ margin:100px auto; }

.product ul li{float:left;width:48%;}

.product ul li:nth-child(2){float:right;}

.product ul li a{ display:block;}

.product ul li a .pic{width:100%;overflow:hidden;}

.product ul li a img{width:100%;display:block;transition: all 0.6s;}

.product ul li a:hover img{transform: scale(1.1);}

.product ul li a h3{font-size:24px;text-align:center;color:#0091d5;font-weight:normal;margin:20px 0 10px 0;}

.product ul li a dd{font-size:15px;color:#555;display:block;line-height:2;}











.suoyao{background: url(../images/suoyao.jpg)no-repeat center;padding:80px 0 80px 0;height: 500px;}

.suoyao{margin:0 auto;text-align:center;}

.suoyao img{ width: 200px; }

.suoyao span{display:block;margin:30px auto;width:200px;}

.suoyao span a{display:block;line-height:48px;text-align:center;color:#fff;background:#0091d5;font-size:20px;}

.suoyao span a:hover{background:#003c7d;}

.suoyao h3{font-weight:normal;font-size:24px;}

.suoyao h3 font{font-weight:bold;font-size:30px;font-family:Arial;}









.bigtitle{ text-align: center; margin:12rem 4% 4%; }

.bigtitle h4{ font-size:32px; font-weight: 500; color: #666; }

.bigtitle h5{ font-size:30px; font-weight: 500; color: #a28d7c; margin-top:15px;}



 .probox{ margin-top:90px; }

 .probox .list{ position: relative; margin-bottom:60px;}

 .probox .list .pic{ width:50%; float: right; overflow:hidden;position:relative;}

 .probox .list .pic img{ max-width:80%;transition: all .5s; display: block;position:relative; z-index: 2;margin:0 0 0 auto}

 .probox .list .pic:hover img{ transform:scale(1.02); }

 .probox .list .text{ width:50%; background: #fff; left: 0; position: absolute; height: 100%; box-sizing: border-box;}

 .probox .list .text .text1{ position: absolute; top: 50%; transform: translateY(-50%);left:0; }

 .probox .list .text h4{ font-size:32px; font-weight: 500; color: #666; }

 .probox .list .text h5{ font-size:30px; font-weight: 500; color: #a28d7c; margin-top:15px;}

 .probox .list .text .zhaiyao{ margin-top: 60px; line-height:2; color: #666; font-size: 16px;}

 .probox .list .text .more{ position: absolute; bottom: 10px;margin:20px 0 0 0;display:block;width:120px;text-align:center;background:#00a0f0;margin-top:30px;line-height:40px;color:#fff; font-size:15px;display:block; right: 0}

 .probox .list .text .more:hover{background:none; color:#00a0f0;border:1px solid #00a0f0; }

 .probox .list .text h3{ font-size:30px; font-weight: 500; margin-top: 30px;/*color: #0091d5;*/color: #a28d7c; }

 .probox .list .text h3 span{display:inline-block;line-height:30px;font-weight:bold;color:#a28d7c;font-size:40px;opacity: 0.1;}

 .probox .list .text h3 .pp{ margin-top: -10px; }







 .proboxs .list .text .title{ display: table; }

 .proboxs .list .text .title .left{ float: right; overflow:hidden; margin-top:10px;  margin-left: 15px;}

 .proboxs .list .text .title .left .p1{ float: left; font-size: 30px;font-weight: 600;margin-top: 5px; }

 .proboxs .list .text .title .left .p2{float: left; font-size:15px; border-left:1px solid #333; margin-left: 10px; padding-left: 10px; line-height: 20px;width: 85px;}

 .proboxs .list .text .title .imgs{ width: 50px; float: left;  }

 .proboxs .list .text .title .imgs img{ width: 100% }





 .probox .list:nth-child(odd) .pic{ float: left;}

 .probox .list:nth-child(odd) .pic img{ margin: 0 auto 0 0  }

 .probox .list:nth-child(odd) .text{ right: 0; left: auto}

 .probox .list:nth-child(odd) .text .more{left: 0}

 .proboxs .list .pic{float: left;}

 .proboxs .list .pic img{margin:0 auto 0 0 }

 .proboxs .list .text{ position: absolute;right: 0;left: auto;}

 .proboxs .list .text .more{ left: 0}

 .proboxs .list:nth-child(odd) .pic{ float: right;}

 .proboxs .list:nth-child(odd) .pic img{margin:0 0 0 auto }

 .proboxs .list:nth-child(odd) .text{ left: 0;}

 .proboxs .list:nth-child(odd) .text .more{right: 0; left: auto;}

 .proboxs .list:nth-child(odd) .text .left{float: left; margin-right: 15px;margin-left: 0;}







.proinfos{ margin:100px auto; }



.child{margin:20px auto;overflow:hidden;text-align:center;display: none}

.child:nth-child(1) {display: block;}

.child .li{font-size:18px;margin:20px auto; }

.child dd{overflow:hidden;border:1px solid #fff;padding:10px;margin-bottom:10px;}

.child dd img{display:block;width: 100%; }

.child .li:hover dd{border:1px solid #d9dee8;}

.child p{font-size: 18px;}

.child .li:hover p{color: #0091d5}



.proinfo .indextitle{ margin-top: 40px; }

.indextitle a{ padding:4px 10px; color: #999; margin: 0 10px; position: relative; }

.indextitle a.on{background:#0091d5;color: #fff;}

.indextitle a:after{ display: block;content: ''; width: 1px; height: 80%; position: absolute; right: -10px; top: 10%; background: #ddd; }

.indextitle a:last-child:after{ display: none; }

.childs{margin:30px auto;overflow:hidden;text-align:center;}

.childs .li{ position:relative; margin-bottom:20px; }



.childs .li span{position:absolute;bottom:15px;right:30px;font-size:15px;color:#fff;}



.childs .li:hover span{color:#000;}



.childs .li img{ width: 100%; }



.childss{margin:30px auto 50px auto;overflow:hidden;text-align:center;}



.childss-fl{ width: 75% ; float: left;border-right: 1px solid #ddd;}



.childss-fr{ width: 25%; float: right; }



.childss .li{ position:relative; margin:10px auto; }



.childss .li span{position:absolute;bottom:15px;right:30px;font-size:15px;color:#fff;}



.childss .li:hover span{color:#000;}



.childss .li img{ width: 100%; }



.childss h5{    font-size: 15px;color: #999;font-weight: bold; padding: 0 15px;  }





.about{ margin:8rem auto 5rem; }

.about .btitle{ text-align: center; }

.about .btitle h4{ font-size: 30px; color: #a28d7c; font-weight: 500;}

.about .btitle p{ color:#c8c2bd; font-size: 14px; margin-top: 10px; text-transform:uppercase;}

.about .content{ margin-top: 40px;}

.about .content h5{ font-size: 16px; color: #a78a73; margin: 20px auto; }

.about .content  p{font-size: 16px;  line-height: 2; text-align: justify;}

.about  .pic{ margin-top: 20px;}

.about  .pic .fl{ width: 49%;}

.about  .pic .fr{ width: 49%; position: relative;}

.about  .pic .fr .text{ position: absolute; width: 80%; left:50%; top: 50%; transform: translate(-50%,-50%); }

.about  .pic .fr .text h5{    font-size: 20px;color: #a78a73; font-weight: 500; margin-bottom: 20px}

.about  .pic .fr .text p{ font-size: 16px; color: #666;line-height: 1.7 }

.about  .pic img{ width: 100%;}

.about .intro{font-size: 16px;  margin-top: 20px; line-height: 2; text-align: justify;}

.about .intro p{font-size:16px;  color: #666;}

.about .intro p img{ width:9px; vertical-align:-2px;margin-right: 4px; }

.about .ditu{ width: 100%; margin-top: 40px; }

.about .ditu img{ width: 100% }





.guige{margin:20px auto;overflow:hidden;text-align:center; padding: 20px 0}

.guige .li{ display:inline-block;margin:10px 0;font-size:13px;}

.guige dd{overflow:hidden;margin:0 auto;border:1px solid #fff;margin-bottom:10px;width:150px;height:150px;border-radius:75px;}

.guige dd img{display:block; }

.guige p{overflow:hidden; line-height:1.5}

.guige .li:hover p{color: #0091d5}

.guige_tit{text-align:center;margin-top:10px;font-size:18px;line-height:1.8;color:#555;}

.guige_tit2{text-align:center;margin-top:20px;font-size:15px;line-height:1.8;color:#00a0f0;border-bottom:1px solid #d9dee8;padding-bottom:5px;}





.tesetext{ font-size: 16px; line-height:1.7;margin: 60px auto; }

.tesetext p{ color: rgb(127, 127, 127);}









.sevice{ margin:100px auto 60px auto; }

.sevice .fwtitle{ font-size: 40px; color: #a28d7c; font-weight:400 }

.sevice .content{margin-top: 30px;line-height: 2;color: #666;font-size: 16px;}

.sevice .list{ margin-top:60px; border-bottom:1px solid #ddd; padding-bottom: 20px; }

.sevice .fwtitles{ font-size: 30px; color: #a28d7c; font-weight:400 }

.sevice .pics{ width: 120px; margin-bottom:10px; }

.sevice .pics img{ width: 100% }

.sevice .list:last-child{ border-bottom: none }









.abouts{ display: table; margin: 0 auto; }

.about form{margin-top: 40px;}

.about .fl{ float:left; width:530px;}

.about .fl h4{ font-size:24px; color:#333; text-align:center; font-weight:500; margin-bottom:30px;}

.about .list{ color:#ccc;  overflow:hidden; margin-bottom:20px;}

.about .list span{ width:90px; display:block; float:left; height:44px; line-height:44px; color:#666; font-size:16px; }

.about .list input{ display:block;width:420px; height:44px; box-sizing:border-box; border:1px solid #ddd; float:left; border-radius:6px; padding:0 10px;}

.about .list textarea{ display:block;width:420px; height:160px; box-sizing:border-box; border:1px solid #ddd;float:left;border-radius:6px; resize:none;padding:0 10px; line-height:30px;}

.about .list input[type="button"]{ font-size:18px; background:#a68d79; color:#fff; border:1px solid #a68d79; width:180px; transition:all .6s;cursor:pointer;}

.about .list input[type="button"]:hover{ background:none; color:#a68d79; border-radius:0;}

.error{ color: red }







.bigtitle li{ float: left; width: 33.3333%; text-align: left;border-right:1px solid #666; text-indent: 10%}

.bigtitle li:last-child{ border:none; }





.ul1{width: 80%; margin: 0 auto;}

.ul1 li{ width: 50%; overflow:hidden; float: left; padding: 3%; box-sizing: border-box; }

.ul1 li:nth-child(1){border-right:1px solid #ddd;border-bottom:1px solid #ddd;}

.ul1 li:nth-child(2){border-bottom:1px solid #ddd;}

.ul1 li:nth-child(3){border-right:1px solid #ddd;}

.ul1 li .img{ width: 50%;  float: left;}

.ul1 li .img img{ width: 100%; }

.ul1 li .text{ float: right; width: 45%; margin-top:20%}

.ul1 li .text p{ text-align: left; font-size: 16px; margin-top: 20px ; color: #666;}

.ul1 li .text .num{ width: 26px; height: 26px; line-height: 26px; font-size: 16px; background: #a78a73; color: #fff; margin: 0 auto; border-radius: 50%; }





.function{margin:auto 4%;}

.function .list{ overflow:hidden; margin-top: 40px; }

.function .list .title{padding: 20px 0; width: 170px; text-align: center; background: #beb4aa; float: left;}

.function .list .title img{ width:60px; }

.function .list .title div{ font-size: 20px; color: #fff; margin-top:6px;}

.function .list .text{ float: right; width: calc(100% - 300px) }

.function .list .ul2 li{ float:left; width: 50%; text-align: left; font-size: 15px; line-height:1.7; margin-bottom: 10px; color: #666 }

.function .list .ul2 li p:last-child{ font-size: 14px; }

.proinfos .lists{ margin-top: 30px }

.proinfos .lists img{ max-width: 100% }