@charset "utf-8";
img{ max-width: 100%;}
.sb-search {
	position: relative;
	margin-top: -5px;
	width: 0%;
	min-width: 60px;
	height: 60px;
	float: right;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
	-webkit-backface-visibility: hidden;
}

.sb-search-input {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	outline: none;
	background: #efefef;
	width: 200px;
	height: 60px;
	margin: 0;
	z-index: 10;
	padding: 20px 65px 20px 20px;
	font-family: inherit;
	font-size: 16px;
	color: #ddd;
}

.sb-search-input::-webkit-input-placeholder {
	color: #999;
}

.sb-search-input:-moz-placeholder {
	color: #999;
}

.sb-search-input::-moz-placeholder {
	color: #999;
}

.sb-search-input:-ms-input-placeholder {
	color: #999;
}

.sb-icon-search,
.sb-search-submit  {
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
}

.sb-search-submit {
	background: #fff; /* IE needs this */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
	color: transparent;
	border: none;
	outline: none;
	z-index: -1;
}

.sb-icon-search {
	color: #0099d9;
	background: #fff;
	z-index: 90;
	font-size: 22px;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
	content: "";
}

/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
	width: 260px;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
	background: #0099d9;
	color: #fff;
	z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
	z-index: 90;
}
.demo-nav.fixed.fixed-top {
    z-index: 8;
    background: #fff;
    width: 100%;
    padding: 0;
    border-bottom: solid 3px #0a8;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .175);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .175);
}
.quan{ background: #a5a5a5;border-radius:50%;color:#fff;text-align:center;width:20px; height:20px; margin-left: 10px; line-height:20px; display: inline-block;}
.quan i{color: #fff;}
.quan:hover{ background: #ff9000;}
#weixin2 {
	position: absolute;
    display: none;
    margin-top: 8px; margin-left: -40px; z-index: 999; width: 80px; height: 80px;
}
#weixin4 {
    position: absolute;
    display: none;
    margin-left: 45px;
    margin-top: -40px;
}
.maxwidth{ width:100%; max-width: 1920px; margin: auto;}
.indexpro{padding: 70px 0; border-top:solid 1px #cdcdcd; border-bottom:solid 1px #cdcdcd;}
.indexpro div {
    text-align: center;
    border-right: solid 1px #ddd;-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;
}
.indexpro h2 {
    font-size: 24px; line-height: 2; margin-bottom: 0;
    -moz-transition: all .8s ease 0s;
    -ms-transition: all .8s ease 0s;
    -o-transition: all .8s ease 0s;
    transition: all .8s ease 0s;
}
.indexpro p{margin: 50px auto 20px auto;}
.indexpro img{-moz-transition: all 1.8s ease 0s;-ms-transition: all 1.8s ease 0s;-o-transition: all 1.8s ease 0s;transition: all 1.8s ease 0s;}
.indexpro span{ display: block;  margin: auto; -moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.indexpro .button{ margin-bottom: 50px;}
.indexpro div:hover{ background: #212121;}
.indexpro div:hover h2{ font-weight: bold;}
.indexpro div:hover img{transform: scale(1.2);-moz-transform: scale(1.2);-webkit-transform: scale(1.2);}
.indexpro div:hover p{}
.indexpro div:hover span{ width: 70%;}

.indexpro1 div {
    text-align: center;
    border-right: solid 1px #ddd; padding-bottom: 20px;
}
.indexpro1 h2 {
    font-size: 16px; line-height: 2; height: 3rem;
    -moz-transition: all .8s ease 0s;
    -ms-transition: all .8s ease 0s;
    -o-transition: all .8s ease 0s;
    transition: all .8s ease 0s;
}
.indexpro1 p{margin: 35px auto 15px auto; height: 58px;}
.indexpro1 img{-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.indexpro1 span{ display: block; background: #d4d4d4; width: 35px; height: 6px; margin: auto; border-radius: 6px;-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.indexpro1 div:hover h2{ font-size: 20px; font-weight: bold;}
.indexpro1 div:hover img{transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1);}
.indexpro1 div:hover p{ margin-bottom: 15px;}
.indexpro1 div:hover span{ width: 70%;}

.henggang{display: block; background: var(--color-main); width: 36px; height: 4px; margin: 10px 0;}
.daxie{text-transform:Uppercase; color: #e3e3e3; font-size: 6rem !important; font-weight: 100; margin-bottom: -1rem !important; line-height: 1;}
.text-align-center{ text-align: center;}
.rongyubg{background: #0099d7 url(/skin/haitian/images/rongyubg.jpg) no-repeat center top; display: table; padding: 60px 0;}
.rongyu{ background: url(../images/jiangbei.png) no-repeat left top; max-width: 600px; color: #fff; padding-left: 68px;}
.indexyewu{ width: 20%; float: left; color: #fff; display: table; position: relative; overflow: hidden;}
.indexyewu img{ z-index: -2;}
.indexyewu p{ background: #003874;filter: alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8; height: 25%;position: absolute; bottom: -16px; z-index: 1;width: 100%;}
.indexyewu h1{ font-size: 22px;position: absolute; bottom: 45px; text-align: center;width: 100%;z-index: 2;}
.indexyewu h2{ font-size: 13px;position: absolute; bottom: 20px; text-align: center;width: 100%;z-index: 2;}
.indexyewu:hover img{transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1); -moz-transition: all 1.8s ease 0s;-ms-transition: all 1.8s ease 0s;-o-transition: all 1.8s ease 0s;transition: all 1.8s ease 0s;}
.indexyewu:hover p{ height: 100%;-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.indexyewu:hover h1{ bottom: 60%;-moz-transition: all .5s ease .5s;-ms-transition: all .5s ease .5s;-o-transition: all .5s ease .5s;transition: all .5s ease .5s;}
.indexyewu:hover h2{ bottom: 45%;-moz-transition: all .7s ease .5s;-ms-transition: all .7s ease .5s;-o-transition: all .7s ease .5s;transition: all .7s ease .5s;}
.indexmessage dd{float: left; padding: 12px 5px 0;}
.idpro .img{overflow: hidden; width: 100%;}
.idpro .img img{width: 100%;}
.idpro:hover .img img{transform: scale(1.1);-moz-transform: scale(1.1);-webkit-transform: scale(1.1); -moz-transition: all 1.8s ease 0s;-ms-transition: all 1.8s ease 0s;-o-transition: all 1.8s ease 0s;transition: all 1.8s ease 0s;}
.idpro:hover{background: #efefef;}
.abindex{background: url(../images/abbg.jpg) no-repeat center top; padding: 4.5em 0 3em 0;}
.ab1{ padding: 0 5em;}
.ab2{ padding: 0 5em 0 5em;}
.zhongtu{ margin:10px auto; float: none;}
.indexsearchbg2 input:focus{border: none;border-color:none;}
.effect-hover>div>.open-width {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    background: rgba(0,0,0,.2);
}
.open-width {
    opacity: 0;
    width: 0;
    height: 100%;
    transition: all .35s ease;
}
.open-width1 {
    opacity: 0;
    width: 0;
    height: 100%;
    transition: all .35s ease;
}
.effect-hover > .effect-content > strong {
    font-size: 1.25rem;
    margin-top: 10%;
    transition: all 0.3s ease;
}
.effect-hover > .effect-content > strong.weight-big{
	 color: #292929; position: absolute; bottom: 10%; left: 10%;
}
.effect-hover > .effect-content > strong {
    color: #fff;
    font-weight: normal;
}
.effect-hover > .effect-content > p {
    display: block;
    font-size: .875rem;
    color: #fff;
    margin-top: -1.75rem;
    transition: all 0.3s ease;
}
.effect-hover > .effect-content {
    opacity: 0;
    transition: all 0.3s ease;
}
.effect-hover > .effect-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.effect-hover:hover>.effect-content{opacity:1;}
  .effect-hover:hover>.effect-content>i.icon-add{margin-bottom:0;}
  .effect-hover:hover>.effect-content>em{height:25%;}
  .effect-hover:hover>.effect-content>strong{transform:translateY(-.875rem);}
  .effect-hover:hover>.effect-content>p{transform:translateY(.875rem);}
  .effect-hover>.effect-content>i.icon-add:hover{transform:rotate(180deg);color:#fff!important;}
.effect-hover span{ position: absolute;opacity: 1; bottom: 40px; margin-left: 50px; font-weight: bold; font-size: 1.4em;}
.effect-hover span div{ font-weight: normal; font-size: .7em;}
.effect-hover:hover span{ opacity: 0;-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.effect-hover:hover strong.weight-big{ color: #fff;}
.aboutus{ background: url(../images/abbg.jpg) no-repeat center top; padding-top: 150px; padding-bottom: 100px; margin-top: 80px;}
ul.num-change{margin-top: 55px;height: 110px;margin-bottom: 60px;}
ul.num-change li{width: 25%;text-align: center; float: left;}
ul.num-change li:after{content: "";width: 1px;height: 110px;background: #ddd;float: right;margin-top: -100px;}
ul.num-change li h3{position: relative;font-size:2.6em;font-weight: bold; margin-bottom: .7rem;}
ul.num-change li h3 span{font-size:2.6em;font-weight: bold;}
ul.num-change li h3:after{content: "";display: block;position: absolute;top: 0;right: 30%;font-size: 30px; color: #f38200;}
ul.num-change li h3.nojia:after{content: none;}
ul.num-change li h3 b{ font-size: .8em; font-weight: normal;}
ul.num-change li h4{position: relative;font-size:50px;font-weight: bold;}
ul.num-change li h4 span{font-size:50px;font-weight: bold;}
ul.num-change li h4:after{content: "";display: block;position: absolute;top: 0;right: 10%;font-size: 30px; color: #f38200;}
ul.num-change li h4.nojia:after{content: none;}
ul.num-change li.nobian::after {
    background: none;
}
ul.num-change li p{font-size: 1em;}
.abmenu{ padding: 7em 0;}
.nav-tabs li{ background: #656565; width: 216px; height: 50px; line-height: 50px; text-align: center; font-size: 1.2em; cursor: pointer;float: left;}
.nav-tabs li.active{background:var(--color-main);}
.nav-tabs li a{color: #fff; background: none; border: none;}
.nav-tabs li a:hover{color: #fff; background: none; border: none;}
.nav-tabs li.active > a{color: #fff; background: none; border: none;}
.nav-tabs li.active > a:hover{color: #fff; background: none; border: none;}
.nav-tabs1 {
    width: auto;
}
.newsindex{padding: 2em 0 3em 0;}
.liuyan{background: url(../images/liuyanbg.jpg) no-repeat center top; height: 391px;}
.guanjianci1{padding: 20px 0 20px 0;}
.guanjianci1 span{ margin: 0 1em; }
.bottom_zhong{padding: 20px 0; border-top: solid 1px #696969 !important; clear: both;}
.caseli a{ margin: 0 .2rem; font-size: 1.4rem;}
.effect-hover:hover .open-height{
    height: 100% !important;
    opacity: 1;
}
.effect-hover:hover .open-width1{
    width:100%; opacity: 1;
}
  .effect-hover>div>.open-width{position:absolute;top:0;left:0;width:0;background:rgba(0,0,0,.8);}
  .effect-hover>div>.open-width1{position:absolute;top:0;left:0;width:0;background:rgba(0,0,0,.5);}
  .effect-hover>div>.open-height{position:absolute;top:0;left:0;right:0;height:100%;background:rgba(221,0,2,.6);}
  .open-height1{position:absolute;top:0;left:0;right:0;height:0;background:rgba(0,0,0,.2);}
  .effect-hover>.effect-content{opacity:1;transition:all 0.3s ease;}
  .effect-hover>.effect-content>i.icon-add{display:inline-block;font-size:2rem;margin-bottom:1.5rem;transition:all 0.3s ease;}
  .effect-hover>.effect-content>em{background:rgba(255,255,255,.25);margin-bottom:.5rem;width:1px;height:1rem;transition:all 0.3s ease;}
  .effect-hover>.effect-content>strong{font-size:1.5rem;margin-top:40%;transition:all 0.3s ease;}
  .effect-hover>.effect-content>p{opacity:0;display:flex;font-size:.875rem;color:#fff;margin-top:0;transition:all 0.3s ease;width: 92%;}
  .effect-hover>.effect-content>p .padding{ padding: .5em !important;}
  .effect-hover:hover>.effect-content{opacity:1;}
  .effect-hover:hover>.effect-content>i.icon-add{margin-bottom:0;}
  .effect-hover:hover>.effect-content>em{height:25%;}
  .effect-hover:hover>.effect-content>strong{transform:translateY(-1.875rem); margin-top: 0;}
  .effect-hover>.effect-content>strong.case1{ opacity: 0;}
  .effect-hover:hover>.effect-content>strong.case1{ opacity: 1;}
  .effect-hover:hover>.effect-content>p{opacity:1;transform:translateY(1.875rem);}
  .effect-hover>.effect-content>i.icon-add:hover{transform:rotate(180deg);color:#fff!important;}
  .jt{ background: var(--color-main); color: #fff; width: 2.1em; height: 2.1em; line-height: 2.1em; position: absolute; z-index: 10; right: 0; bottom: 0; text-align: center;}
  .effect-hover:hover .jt{ margin: auto;}
.caseimg>div{ border: solid 4px var(--color-light);}
.caseimg div a{overflow: hidden;}
.input250{width:300px; height: 48px;}
.lightbox .lb-image{ max-width: max-content;;}
.yewu{ background:url(../images/yewubg.jpg) no-repeat center bottom ; padding-bottom: 10em;}
.bb{ position: absolute; top:50%}
.bb div{padding: 0 2em;}
.bb p{padding-top: .5em;}
.bb a p{ opacity: 0;-moz-transition: all .8s ease 0s;-ms-transition: all .8s ease 0s;-o-transition: all .8s ease 0s;transition: all .8s ease 0s;}
.bb a:hover p{ opacity: 1; transform:translateX(.875rem);}
.bb2{position: absolute; top:25%; left: 30%;}
.bb2 h1{font-size: 2.6em !important;}
.bb2 h1 div{ font-size: .9em; padding-top: .6em;}
.bottom_tou .button{ padding: .5em 5em;}
.bannerline{border-top:solid 4px var(--color-main); padding-bottom: 3.8em; margin-top: -8px;}
.proindex{background:url(../images/probg.jpg) no-repeat center top ;}
.nav-tabs-card li a{ padding:0 1em; line-height:3em;}
.nav-tabs-card li .dropdown a{  line-height:2.5em; font-size: 1rem;}
.dropdown .nav.nav-menu{ border-top: none;}
.dabiaoti span.daxie{font-size: 2.6rem !important;}
.biaogan{font-size: 2.4rem !important;}
#navButtons{ position:fixed; z-index:9999;left:0;right:0;bottom:0;height:4rem;background:var(--color-dark);}
.navButtons ul{display:-webkit-box;display:-moz-box;display:box;width:100%; margin: 0; padding-left: 0;}
.navButtons li{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}
.navButtons li.on{background: var(--color-main);;height:4rem; }
.navButtons li a{text-align:center;color:#fff;display:block;font-size:.8rem; padding-top:2rem;line-height:2rem;height:16px;background-position:center 5px;background-repeat:no-repeat;background-size:28px 28px}
.navButtons li .indexPage{background-image:url("../images/fw03/navbuttons_01.png")}
.navButtons li .telephoneButton{background-image:url("../images/fw03/navbuttons_02.png")}
.navButtons li .sendMail{background-image:url("../images/fw03/navbuttons_03.png")}
.navButtons li .weixin{background-image:url("../images/fw03/navbuttons_06.png")}
.navButtons li .companyMap{background-image:url("../images/fw03/navbuttons_04.png")}
.navButtons li .pageShare{background-image:url("../images/fw03/navbuttons_05.png")}
.pdmenu li a{ line-height: 2.2em !important;}
.pdmenu li.bg-light a{ color: #555 !important; line-height: 1.8em !important;}
.pdmenu li.bg-light a:hover{ color: #fff !important;}
.pdmenu li.bg-light a.bg-dot{ color: #fff !important;}
.prolist a{ background: var(--color-light) ;}
.prolist a:hover{background: var(--color-main) ; color: #fff;}
.prolist a p{ color: var(--color-gray);}
.prolist a:hover p{color: #fff;}
.prolist1 a{ background: var(--color-light) ;}
.prolist1 a:hover{background: var(--color-dark) ; color: #fff;}
.prolist1 a p{ color: var(--color-gray);}
.prolist1 a:hover p{color: #fff;}
.service img {
    max-width: max-content;
}
@media(min-width:1600px){
  .effect-hover>.effect-content>i.icon-add{font-size:3rem;}
}
@media(max-width:1600px){
  .input250{width:250px; height: 48px;}
  .bottom_tou .difuwu .button{ padding: .5em 2em;}
  .nav-tabs-card li a{ font-size: 1rem !important; line-height: 2; padding: 0 .5em;}
  h4{ font-size: 1rem !important;}
}
@media(max-width:1280px){
  .input250{width:200px; height: 48px;}
  .productnav{display: none;}
  .bottom_tou .difuwu .button{ padding: .5em 1em;}
  .nav-tabs-card li a{ font-size: .8rem !important; line-height: 2;}
  h4{ font-size: 1rem !important;}
}
@media(max-width:1024px){
  .input250{width:180px; height: 48px;}
  .nav-tabs-card li a{ font-size: .8rem !important; line-height: 2;}
  h4{ font-size: 1rem !important;}
}
@media(max-width:768px){
  .input250{width:400px; height: 48px;}
  .newsbox2{ float:right; padding-left: 0;}
  .bb2{position: absolute; top:10%; left: 10%;}
  .bb2 h1{font-size: 2em !important;}
  .effect-hover span{ position: absolute;opacity: 1; bottom: 40px; margin-left: 30px; font-weight: bold; font-size: 1.4em;}
  .newsindex{padding: 160px 0 30px 0;}
  .yewu{ padding-bottom: 3em;}
  .content div.c h1{ font-size: 1em !important; font-weight: normal; }
  .content div.c .jianjie{display: none;}
  .tuijianyewu{display: none;}
  h2{font-size:1.1rem !important;}
  .h2{font-size:1rem !important;}
  h2 .size-large{font-size: var(--size-big) !important;}
  .nav.nav-big > li > a{font-size: .8em !important; padding:.5em .3em !important;}
  .nav > li.drop > a::after{margin-left: 0; border:none;}
  .jiancexiangmu td{word-wrap: break-word; word-break: normal;}
  .margin-top-large{margin-top: var(--box-big) !important;}
  .c h2{ font-size: 1rem !important; line-height: 1.5 !important;}
  .daodu{font-size: .8rem;}
  .content .t{font-size: .8rem;}
  .nav-tabs-card li a{padding:0 .2em; line-height:2; font-size: .8rem !important;}
  h1.dabiaoti{ font-size: 1.2rem !important; line-height: 30px;}
  
  .dabiaoti span.daxie {
      font-size: 1.2rem !important;
  }
  .padding-left-large{ padding-left: 1rem !important;}
  .padding-right-large{ padding-right: 1rem !important;}
  .margin-bottom-large{ margin-bottom: 1rem !important;}
  .margin-top-large{ margin-top: 1rem !important;}
  .padding-top-large{ padding-top: 1rem !important;}
  .h3{ font-size: 1.1rem !important;}
  h1{ font-size: 1.5rem !important;}
  h2{ font-size: 1.5rem !important;}
  h4{ font-size: 1rem !important;}
  .h1{ font-size:1.2rem !important ; margin-top:0 !important ;}
  ul.num-change {
      margin-top: 0px; height: 130px; margin-bottom: 0; padding-left: 0;}
  ul.num-change li{ width: 50%;}
  ul.num-change li h3{ margin-bottom: .2rem;}
  ul.num-change li h3 span {
      font-size: 28px;
  }
  ul.num-change li p {
      font-size: 14px;
  }
  ul.num-change li::after {
      content: "";
      width: 1px;
      height: 70px;
      background: #ddd;
      float: right;
      margin-top: -60px;
  }
  .topnews p{ display: none;}
  .topnews h5{ display: none;}
  .ab1{ padding: 0;}
  .ab2 .border-top{ border-top: none !important;}
  .abindex {
      background: url(../images/abbg.jpg) no-repeat center top;
      padding: 1.5em 0 2em 0;
  }
  .effect-hover > .effect-content > strong{ font-size: .8rem;}
  .h6{ font-size: .8rem !important;}
  .effect-hover:hover > .effect-content > strong {
      transform: translateY(0);
  }
  .yewu{ margin-top: 0 !important;}
  .biaogan{font-size: 1.4rem !important;}
  .h3{ font-size: 1rem !important;}
  .biaoyu . align-right{ text-align: center !important;}
  .bannerline{ padding-bottom: 1rem;}
  .proindex>div{ width: 50% !important; border-bottom:solid 1px #ddd;}
  .caseimg>div{ width: 50% !important;}
  .bottom {
      padding-bottom: 4rem;
  }
  .topnews{ margin-bottom: 1rem;}
  .nav > li > a{ font-size: 1rem; text-align: center;}
  .caseli{display: contents;}
  .caseli > li > a{ display: inline-block; margin-bottom: .2rem;}
  .caseli > li:first-child{ margin-left: -.2rem;}
  #gongsijianjie{ padding-top: 2em;}
  .newsindex a{ padding: 0 !important;}
  .newsindex {
      padding: 20px 0 10px 0;
  }
  .w10{ width: 100%;}
  .guige{ padding: 0 !important;}
  .effect-hover>.effect-content>p{ display: none;}
  .effect-hover>.effect-content>strong{ margin-top: 20%;}
}