﻿@charset "utf-8";

a{font-family:Arial,"Microsoft YaHei",微軟雅黑,"微软雅黑",Verdana,"宋體","細明體",Helvetica, sans-serif;font-size:14px;text-decoration:none;}
a:link   {color:#14202e;}
a:visited{color:#14202e;}
a:hover  {color:#08afaf}
a:active {color:#14202e;}
a.a2{ text-decoration:underline; cursor:hand; cursor:pointer;}

/*去掉链接（包括图片链接）的虚线边框*/
a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; }/* for Firefox */

/*IE滚动条样式*/
body { SCROLLBAR-ARROW-COLOR:#FFFFFF;SCROLLBAR-FACE-COLOR:#181818;SCROLLBAR-DARKSHADOW-COLOR:#181818;SCROLLBAR-HIGHLIGHT-COLOR:#181818;SCROLLBAR-3DLIGHT-COLOR:#181818;SCROLLBAR-SHADOW-COLOR:#181818;SCROLLBAR-TRACK-COLOR:#E6E6E6;}
/* Webkit内核滚动条样式 */
::-webkit-scrollbar {width:8px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 0px; border-radius:0px;}/*滑轨*/
::-webkit-scrollbar-thumb {-webkit-border-radius:16px;border-radius:16px; background: rgba(8,175,175,1.0); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);}/*滑块*/
::-webkit-scrollbar-thumb:window-inactive {background:rgba(24,24,24,0.8);}

body {color:#020f18; margin:0; background:#fff; text-align:center;  line-height:2em; }

div,ul,dl,dt,dd{ margin:0; padding:0;list-style:none;}
body,td,input,select,textarea{ font-family:Arial,"Microsoft YaHei",微軟雅黑,"微软雅黑",Verdana,"宋體",Helvetica, sans-serif; font-size: 14px;}
body.bg2{ background:#f8f8f8;}
img{ border:0; }
form{ margin:0}
input,select{ vertical-align:middle;}
input[type=text],input[type=password],textarea{ border:#d7d7d7 1px solid; color:#7d7d7d}
input::-webkit-input-placeholder{ color:#b8c2c9; } input:-moz-placeholder{ color:#b8c2c9; } input::-moz-placeholder{ color:#b8c2c9; } input:-ms-input-placeholder{ color:#b8c2c9; }/*提示文字*/
textarea::-webkit-input-placeholder{ color:#b8c2c9; } textarea:-moz-placeholder{ color:#b8c2c9; } textarea::-moz-placeholder{ color:#b8c2c9; } textarea:-ms-input-placeholder{ color:#b8c2c9; }/*提示文字*/
.placeholder{position:absolute;z-index:2;top:50%;left:0;width:100%;margin-top:-10px;box-sizing:border-box;color:#b8c2c9;line-height:20px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
input[type="submit"],input[type="reset"],input[type="button"]{ -webkit-appearance: none; }/*重置iphone浏览器默认样式*/
hr{border-top:#cdcdcd 1px dotted; border-bottom:none; background:none; border-left:none; border-right:none; margin:2rem auto;}
*{-webkit-text-size-adjust:none;/*解决webkit内核浏览器强制最小字体*/ -webkit-box-sizing:border-box; -moz-box-sizing:border-box;box-sizing:border-box;}
/*css3过渡效果*/
/*a,li,p,div,span,dl{transition:box-shadow 0.3s;-webkit-transition:background-color 0.3s,opacity 0.3s,box-shadow 0.3s;-moz-transition:background-color 0.3s,opacity 0.3s,box-shadow 0.3s; -o-transition:background-color 0.3s,opacity 0.3s,box-shadow 0.3s;}*/

/*公共*/
.blank{ height:0; line-height:0; font-size:0; margin:0; padding:0; clear:both;}
.clearfix:after{content:"";display: block; clear: both; height:0; overflow: hidden; font-size:0;}
.global_width{ width:1200px; margin:0 auto; text-align:left; position:relative;}
.fullWidth{ position:relative; width:100%; min-width:1200px; max-width:1920px; margin:0 auto;}
.basePadding{ padding-left:5%; padding-right:5%;}
.tc{ text-align: center;}.tl{ text-align: left;}.tr{text-align:right;}
.floatL{ float:left;}.floatR{ float:right;}
.red,a.red{color:#e53f0d;}
.gray,a.gray{color:#a0a0a0;}
.white{ color:#fff;}
.baseColor{ color:#08afaf;}

.h4{font-size: 1rem;}
.h3{font-size:1.5rem;}
.h2{font-size: 2rem;}
.h1{font-size: 3rem;}

/*flex布局*/
.flex, .disFlex{display: flex;}
.flex-col{ flex-direction: column;}
.flex0{ flex:0 0 auto;}
.flex1{ flex: 1 1 auto;}
.flex-wrap{ flex-wrap: wrap;}
.justify-center{justify-content: center;}
.justify-between{justify-content:space-between;}
.justify-space{ justify-content: space-around;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.items-start{align-items: start;}
.items-center{align-items: center;}
.items-stretch{align-items: stretch;}
.content-stretch{align-content:stretch;}
.content-start{align-content:flex-start;}

/*更多按钮*/
.more,a.more{display:inline-block; line-height:2.25rem; color:#43abb1; padding:0 1.25rem 0 1.5rem; position:relative;text-align:center;  border:rgba(67,171,171,0.25) 1px solid; border-radius:1.5rem; transition:all 0.3s; overflow: hidden;}
.more:after{
	content:""; position: relative; z-index: 2; display: inline-block; width:1rem; height:1.5rem; margin-left:0.4rem; vertical-align: middle; background:url("../images/arrow.png") center top no-repeat; transition: transform 0.3s;
}
.more:before{
	content:""; position: absolute; z-index:1; left:2px; top:2px; width:0; height:calc(100% - 4px); background:#43abb1; border-radius:1.5rem; transition: width 0.3s;
}
.more span,a.more span{position: relative; z-index:2; display: inline-block; vertical-align: middle;}

.more:hover{ border-color:rgba(67,171,171,1);}
.more:hover:before{ width: calc(100% - 4px);}
.more:hover{ color:#fff;}
.more:hover:after{ background-position: center bottom; transform: translateX(0.5rem);}


/*页头*/
#header{ position:fixed; z-index:999; min-width:1200px; top:0; left:0; right:0; margin:0 auto; height:150px; transition:all 0.4s; background-image:linear-gradient(to bottom,rgba(0,0,0,0.92),rgba(0,0,0,0)); text-align: right;}
#header.haveBG,body.nobanner #header{ height:80px; backdrop-filter:blur(6px); background:rgba(34,34,34,0.9); box-shadow:rgba(0,0,0,0.25) 0 0.25rem 1rem;}
#headBlank,.headBlank{ height:80px;}
/*#head{padding-top:1px; text-align: center;}*/
#logo{ text-align:left;float:left; background:#fff; border-radius:0 0 0.5rem 0.5rem; margin-left:5%;}
#logo img{ max-width:200px; vertical-align:middle; }
#logo a{display:inline-block;vertical-align:middle; padding:0.75rem;}

/*滚动到此页头变化*/
#mark{ position:absolute; left:0; top:200px; height:0; width:100%;}

/*主导航*/
#menu{ position:relative; margin:1rem auto 0 auto; height:64px; display: inline-block;}
#nav{white-space: nowrap;}
#nav li{ position:relative; display: inline-block; /*float:left;*/}
#nav li a{ display:inline-block; width:100%; height:64px; line-height:48px; font-size:1rem;text-align:center; padding:0 1.5rem; color:#fff;}
#nav li.haveSub>a:after{content:"";display:inline-block; width:0; height:0; border-top:rgba(255,255,255,0.5) 5px solid; border-left:transparent 4px solid; border-right:transparent 4px solid; vertical-align:middle; margin:-2px 0 0 0.5rem;/* transform:rotate(135deg);*/ transition:color 0.4s,transform 0.4s;}
#nav li.curr a,#nav li a:hover,#nav li.hover a{ color:#f1c71f;}
#nav li a:hover:after{ border-top-color:#f1c71f; transform: rotate(180deg);}
#nav li p{ position:absolute; left:0; top:100%; margin:-1px 0 0 0; display:none; white-space:pre-wrap; padding:10px 16px; min-width:100%; background:#ffffff; border-top: none; border-bottom:#08afaf 2px solid;}
/*#nav li p:after{content:""; display:inline-block; width:0; height:0; position:absolute; top:auto; left:30%; bottom:100%; border-bottom:8px solid #f6f6f6; border-left:transparent solid 8px; border-right:transparent solid 8px;}*/
#nav li p a,#nav li.hover p a{ position:relative; height:34px; line-height:34px; padding:0; font-size:13px; color:#14202e;white-space:nowrap;display: inline-block; width:100%;}
#nav li p a:after,#nav li.hover p a:after{display:none;}
#nav li p a:hover{ color:#08afaf;}
#slide{ position:absolute; left:0; top:1rem; height:16px; background:url("../images/runner.png"); width:0;}

#fun{float:right; margin:1.5rem 1.5rem 0 0; display:inline-block; vertical-align:middle; white-space:nowrap; height:32px; line-height:32px; color:#808080;}

/*搜索*/
/*#Searchform{position:relative; line-height:30px;width:152px; height:30px; padding:0 6px; vertical-align:middle; white-space: nowrap; display:inline-block; }
#Searchform:after{content:"";display:inline-block;width:0; height:100%; !*background:#e1e1e1;*! border-radius: 4px; transform:skewX(-8deg); position:absolute; left:auto;right:0; bottom:0; transition:width 0.25s,border 0.25s; z-index:10; box-sizing: border-box;}
#searchInput{float:left; position:relative; z-index: 11;  padding:0 0 0 2px; width:0; height:30px; background:none; color:rgba(255,255,255,0.75);border:none; font-size:13px; transition:width 0.25s;}
#SearchBtn,a#SearchBtn{ position:relative; z-index:11; float:right; display:inline-block; height:32px;width:32px;overflow: hidden;line-height: 0;box-sizing:border-box; text-align: left; padding:0; margin-top:-1px;}
#Searchform:hover:after{width:100%; border:rgba(225,225,225,0.5) 1px solid;}
#Searchform:hover #searchInput{width:108px;}*/

/*语言*/
#language{display:inline-block; margin-left:1rem; vertical-align:middle; font-size: 0; background:rgba(0,0,0,0.25); border:#43abb1 1px solid; padding:2px; border-radius:1rem; line-height:1.5rem; height:30px;}
#language > a{display: inline-block; position: relative; font-size:0.75rem; padding:0 0.75rem; color:#b1b6b6; height: 1.5rem; border-radius:1rem;}
#language > a:hover{ color:#43abb1;}
#language > a.active{ background:#43abb1; color:#fff;}

/*图标*/
.icos{display:inline-block;background:url(../images/icos.png) left top no-repeat; vertical-align:middle;width:32px; height:32px;}
.ico1{ background-position:left top;}.ico1:hover{ background-position:left -32px;}
.ico2{ background-position:left -64px;}

/*公共样式*/
.coverLink{position:absolute; z-index:3; left:0; top:0; width: 100%; height: 100%; background: url(../images/blank.gif);}
#error{ position: absolute; z-index: 10; left: 0; right: 0; top:-200px; margin: 0 auto; display: inline-block; width:auto; max-width:25%; padding: 1em; background:#ec1e28; color:#fff; border-radius:0 0 0.5em 0.5em; -webkit-transition:top 0.3s; -moz-transition:top 0.3s; -o-transition:top 0.3s;transition:top 0.3s;}
#error.show{ top:0;}
.spacingM{ letter-spacing:0.6rem;}
.spacingL{ letter-spacing:1rem;}

.fancybox-slide--iframe .fancybox-content {
	max-width :680px;
	max-height: 80%;
	margin: 0;
  background: #fff;
}

/*层滚动条*/
.scrollbar::-webkit-scrollbar {width:0.4em;  }
.scrollbar::-webkit-scrollbar-track { -webkit-border-radius: 0px; border-radius:0px;}
.scrollbar::-webkit-scrollbar-thumb {-webkit-border-radius:2px;border-radius:2px; background:rgba(8,175,175,0.8);}
.scrollbar::-webkit-scrollbar-thumb:window-inactive {background:rgba(8,175,175,0.8);}

/*数据*/
#datas{ margin:0 auto; display:flex; flex-wrap: wrap; justify-content:space-between;}
#datas dl{position:relative; width:calc(50% - 0.75rem); padding:1.5rem; background: rgba(239,245,251,0.75); border-radius: 1.5rem; margin-bottom:1.5rem; transition: all 0.3s;  backdrop-filter:blur(3px);}
#datas dl:hover{ background: rgba(239,245,251,1);}
#datas dt{display:inline-block; width:3.5rem; height:3.5rem; overflow:hidden; margin: 0; padding: 0; }
#datas dt img{width:100%; height:auto; vertical-align:bottom;}
#datas dt.ico_datas2 img{ margin-top:-3rem;}
#datas dt.ico_datas3 img{ margin-top:-7rem;}
#datas dt.ico_datas4 img{ margin-top:-10.5rem;}
#datas dd{text-align: right; color:#9ba0a5; white-space: nowrap}
#datas dd.datasNumber {color:#134d77; font-size:1.5rem; font-weight: bold; padding:0;  margin-top: 1rem;}
#datas dd.datasNumber b{font-size:0;}
#datas dd.datasNumber sup{font-size:1rem; position: relative; }
#datas dd.datasNumber sup.big{font-size:2rem; top:-1rem;}
#datas dd.datasNumber i{display:inline-block; width:22px; height:48px;background-image:url("../images/number.png"); margin:0; background-position:center -360px; background-repeat:no-repeat; transition:background-position 2s ease-out;}
/*#datas dl dd:last-child{color:#606060; line-height: 1.2em;}*/

/*公共大标题*/
.indexTitl{/*padding:0;*/ margin:2rem auto;  position:relative; text-align: left; align-items:center;}
.indexTitl dt{ font-size:1.5rem; font-weight:bold; white-space: nowrap; padding:0 1rem 0 0.5em; margin:0; line-height:150%; background:url("../images/titleDecorate.png") left center no-repeat; }
.indexTitl dd{font-size:0.875rem; color:#8c9b9b;  margin:0; line-height: 125%; padding-top:0.25em;}

.indexTitl.big{margin:3rem auto;}
.indexTitl.big dt{font-size: 3rem; background:url("../images/titleDecorate_big.png") left center no-repeat;}
.indexTitl.big dd{font-size: 1rem; color:#134d77;}


/*产品系列*/
#proSeries dl{ margin: 0; padding: 0; position: relative; width:440px; float:left; }
#proSeries dl dt{position: relative; width:100%; height:0; padding-bottom:125%; overflow: hidden; background:#fff; border-radius:1.5rem;}
#proSeries dl dt img{ width: 100%; height: auto; transition: transform 0.4s;}
#proSeries dl dt span{
	position: absolute; display: inline-block; left: auto; right:2.5rem; top:2.5rem; border:rgba(255,255,255,0.6) 1px solid; border-radius:0.5rem; width:3rem; height:3rem; line-height:3rem; text-align: center; font-size: 0; transition: all 0.4s;
}
#proSeries dl dt span:before{
	content:"●"; font-size:0.75rem; margin-right:-0.25rem; color:rgba(255,255,255,0);  vertical-align: middle; transition:color 0.3s;
}
#proSeries dl dt span:after{
	content:""; display: inline-block; width:1rem; height: 1.5rem; vertical-align: middle; background: url("../images/arrow.png") center bottom no-repeat; transition: all 0.4s;
}
#proSeries dl dd{  width: 100%; font-size:1.5rem; padding:0 0.5rem 0 0.5rem; margin-top: 1.5rem; color:#134d77; text-align: left; transition:all 0.4s; }
#proSeries dl dd span{display: inline-block; border-left:#d9e2e9 1px solid; color:#8c9b9b; padding-left:0.5rem; margin-left: 0.5rem; line-height: 1em; font-size:0.875rem;}
#proSeries dl dd.dd2{
	font-size: 0.875rem; color:#020f18; line-height:1.25rem; max-height:3.75rem; overflow: hidden;
}

#proSeries dl:hover dt img{ transform: scale(1.06,1.06);}
#proSeries dl:hover dt span{ background:#f1c71f;}
#proSeries dl:hover dt span:after{ transform: translateX(0.2rem);}
#proSeries dl:hover dt span:before{color:rgba(255,255,255,0.75);}
#proSeries dl:hover dd.dd3 .more:after{ /*background-position: center bottom;*/ transform: translateX(0.5rem);}


/*新闻列表*/
#news{ text-align: center; display: flex; flex-wrap: wrap; justify-content:space-between;}
#news dl{width:330px; margin:0 0 4.5rem 0;position: relative; display: inline-block;}
/*#news dl:nth-child(3n+0){margin-right:0;}*/
#news dt{width:100%; position: relative; margin-bottom:3rem; }
#news dt a{display: inline-block; width:100%; height: 0; padding-bottom:60%; overflow: hidden;background:#3c4551; border-radius: 0.5rem; vertical-align: bottom;}
#news dt a img{width:100%;height: auto; vertical-align:bottom;}
#news dt p{margin: 0;padding:0.5rem; background:#144b74; color:#fff; text-align: center; width:4rem; display: inline-block; position:absolute;left:1.5rem;top:auto; bottom:-2rem; font-size:0; line-height: 0; border-radius: 4px; transition: background 0.3s;}
#news dt p b{display: inline-block; width:100%; font-size:32px;line-height:2rem;height:2rem; font-weight: normal;}
#news dt p span{font-size:12px;line-height: 1rem; height: 1rem;  display: inline-block; width:100%;}
#news dd b{display: inline-block; width:100%; height:3rem; line-height:1.5em; font-size:1rem;  overflow: hidden; text-align: justify;}
#news dd p{font-size: 12px; color:#8c9b9b; line-height:1.5em; height:4.5em; overflow: hidden; margin:0.5rem 0 1.5rem 0; padding:0; text-align: justify; transition: color 0.3s;}
#news dd span{display: inline-block; width:100%; text-align: right; color:#8c9b9b;}
#news dd span:before{content:"";display: inline-block; width:1.8rem; height:1px; overflow:hidden; background:#b8bfc6; vertical-align: middle; transition:width 0.25s; margin-right:0.5rem;}
#news dl:hover dt p{ background:#08afaf;}
#news dl:hover dd span{color:#08afaf;}
#news dl:hover dd p{color:#000e2f;}
#news dl:hover dd span:before{width:5rem; background:#08afaf;}

/*页脚*/
.clearFootMargin{ margin-top:-4rem;}

#foot{color:#fff;  padding:2rem 0; margin-top:4rem; background: url("../images/bg-foot.jpg") center top repeat-y; text-align: center;}
#foot a{color:#fff; }
#foot a:hover{color:#f1c71f;}
#footBox{ text-align: center; position: relative;}

#foot_right{ position: absolute; left:auto; right:0; top:1.5rem; display: inline-block; text-align: right; color:#fff; }
#foot_right img{ max-width: 100px; height: auto; margin:0 0 1rem 0.5rem;}

#foot_link{ border-bottom:rgba(255,255,255,0.1) 1px solid;  display:inline-block; padding:1rem 2rem;}
#foot_link a{ padding:0 1rem;}

#foot_contact b{font-size: 1rem; letter-spacing:1px; font-family:Verdana, Helvetica, sans-serif; }
#copy {margin-top:1.5rem; line-height: 1.75em; font-size:0.75rem; opacity: 0.6;}
#copy a{ font-size: 0.75rem;}

/*浮动窗*/
#CS{ position:fixed; z-index:100; top:auto; bottom:25%; left:auto; right:0; background:#2b3240; width:44px; min-height:44px; line-height:0; border-radius:4px;}
#CS a{ position:relative; display:inline-block; width:44px; height:55px; background-image:url(../images/CS.png); background-repeat:no-repeat; cursor:hand; cursor:pointer;}
a#CS_Top{ position: relative; background-position: center top; background-color:#08afaf; height:0; overflow: hidden; transition: height 0.25s;border-radius:4px 4px 0 0;}
a#CS_Top:after{ content:""; display: inline-block; position: absolute; left: 0; right: 0; margin: 0 auto; top: auto; bottom: 100%; width: 0; height: 0; border-bottom:#08afaf 5px solid; border-left:transparent 5px solid; border-right:transparent 5px solid;}
a#CS_Top.visible{ height:44px; overflow: visible;}
a#CS_QQ{ background-position:center -44px;}
a#CS_EWM{ background-position:center -99px;}
a#CS_EWM p{ position:absolute; left:auto; right:120%; top:auto; bottom:0;margin:0 0; width:0; opacity:0; background:#fff;padding:0; border:#ebebeb 1px solid; line-height:1rem; transition:right 0.25s,opacity 0.25s,padding 0s; overflow: hidden; font-size: 0;}
a#CS_EWM p img{max-width:100%; height:auto; vertical-align: bottom;}
a#CS_EWM:hover p{ width:110px;right:100%; opacity: 1; color:#606060; padding:5px; font-size:12px;}
