/* ========== 一些常用的偏移 ========== */
/* Padding */
.pad90 { padding-top:90px; }
.pad45 { padding-top:45px; }
.pad30 { padding-top:30px; }
.pad25 { padding-top:25px; }
.pad15 { padding-top:15px; }
.pad10 { padding-top:10px; }
.pad5 { padding-top:5px; }
/* Margins */
.marg-bottom5 { margin-bottom:5px; }
.marg-left5 { margin-left:5px; }
.marg-right5 { margin-right:5px; }
.marg-bottom10 { margin-bottom:10px; }
.marg-left10 { margin-left:10px; }
.marg-right10 { margin-right:10px; }
.marg-bottom30 { margin-bottom:30px; }
.marg-left30 { margin-left:30px; }
.marg-right30 { margin-right:30px; }

/* ========== header背景色 + 样式适配 ========== */
.header {
	background-color: #323A45; /* 推荐深色背景（可替换为你想要的颜色） */
	padding: 15px 0; /* header上下内边距，让导航不贴边 */
	width: 100%; /* 全屏宽度 */
  }
/* Bootstrap下拉菜单改为鼠标悬停触发 */
.dropdown:hover .dropdown-menu {
	display: block; /* 鼠标移到父元素时，显示下拉菜单 */
}
/* 导航容器：靠右对齐 + 强制一行不换行 */
.nav-wrapper {
	/*float: right;*/ /* 容器整体靠右 */
	/*.nav-wrapper 仅靠 float: right 无法在 .col-8 容器内完全靠右*/ 
	/*（栅格列默认是块级容器，float: right 仅让导航相对于 .col-8 靠右，但 .col-8 本身占了容器右侧 8 列宽度，视觉上没 “贴边”）；*/
	white-space: nowrap; /* 强制内部元素不换行 */
	display: flex; /* Flex布局 */
	justify-content: flex-end; /* 内部元素靠右（核心！） */
	align-items: center; /* 垂直居中，与logo对齐 */
	padding: 10px 0; /* 可选：上下间距 */
}
/* 导航项：横向排列（Bootstrap原生，加固不换行） */
.nav-pills > li {
	display: inline-block; /* 行内块，保证一行 */
	margin: 0 8px; /* 可选：项之间的间距，避免拥挤 */
}
/* 可选：去掉焦点边框，优化视觉 */
.nav-pills > li > a:focus {
	outline: none;
}
/* 导航文字颜色（适配深色背景） */
.nav-pills > li > a {
	color: #fff; /* 文字白色 */
	font-size: 14px; /* 可选：调整文字大小 */
	padding: 8px 12px; /* 可选：调整导航项内边距 */
}
  /* 导航文字hover/active颜色 */
.nav-pills > li > a:hover {
	color: #19C1C3; /* hover时浅蓝色（可自定义） */
	background-color: transparent; /* 取消hover默认背景色 */
}
  /* 下拉菜单样式适配（与header背景协调） */
.dropdown-menu {
	background-color: #323A45; /* 下拉菜单与header同背景 */
	border: none; /* 取消默认边框 */
	box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 可选：轻微阴影提升层级 */
	padding: 5px 0; /* 下拉菜单上下内边距（可选） */
}
.dropdown-menu > li > a {
	color: #fff; /* 下拉菜单文字白色 */
	font-size: 13px; /* 可选：调整文字大小 */
	padding: 12px 15px; /* 上下内边距（控制行高/行间距，关键！） */
	line-height: 1.8; /* 行高（可选，叠加padding进一步调整） */
}
.dropdown-menu > li > a:hover {
	color: #19C1C3; /* 下拉项hover颜色 */
	font-size: 13px; /* 可选：调整文字大小 */
	background-color: transparent; /* 取消下拉项hover默认背景 */
}
/* logo垂直居中（与导航对齐） */
.logo {
	display: flex;
	align-items: center;
}
.logo img {
	max-height: 40px; /* 限制logo高度，避免过高 */
}

/* ========== banner + 样式适配 ========== */
.banner {
	/*background-color: #323A45;*/  /* 推荐深色背景（可替换为你想要的颜色） */
	/* 核心：从左到右的三色线性渐变（可自定义颜色和比例） */
	/*background: linear-gradient(to right, #1a2980, #323A45, #26d0ce);*/
	/* 兼容旧浏览器（可选） */
	/*background: -webkit-linear-gradient(left, #1a2980, #323A45, #26d0ce);*/
	padding: 15px 0; /* header上下内边距 */
	width: 100%; /* 全屏宽度 */
	/* 可选：防止渐变重复（全屏场景一般不需要） */
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.banner-info {
	margin-top: 4em;
	max-width:100%;
}
.banner-info h1{
	color:#f5f5f5;
	font-size:3em;
}
.banner-info h2{
	color:#f5f5f5;
	font-size:2em;
}
.banner-info h6{
	font-size:1.3em;
}
.banner-info p{
	color:#eeeeee;
	font-size:1.2em;
	max-width:90%;
}
.hand {
	margin-top: 4em;;
	max-width:100%;
}
.hand img{
	display: block; 
	margin:0 auto; 
	max-width:100%;
}
.downloadbtn-spec{
	margin-left: 2em;
}

/* ========== hotproduct + 样式适配 ========== */
.hotproduct{
	margin-top:4em;
	text-align:center;
}

/* ========== portfolio-item （通常是作品集 / 产品展示卡片）定义基础样式 + 视觉效果 + 过渡动画，打造带有轻微阴影、圆角、悬浮交互的卡片组件 ========== */
.portfolio-item {
	position: relative;
	background: #FFF;
	margin-top:20px;
	margin-bottom: 40px;
	margin-left:10px;
	border: 2px solid #FFF;
	-webkit-border-radius: 5px;
	-webkit-background-clip: padding-box;
	-moz-border-radius: 5px;
	-moz-background-clip: padding;
	border-radius: 5px;
	background-clip: padding-box;
	-webkit-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
	-moz-box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
	box-shadow: inset 0 1px #fff,0 0 8px #c8cfe6;
	color: inset 0 1px #fff,0 0 8px #c8cfe6;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
  }
  .portfolio-item .portfolio-image {
	overflow: hidden;
	text-align: center;
	position: relative;
  }
  .portfolio-item .portfolio-image img {
	max-width: 100%;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	-ms-transition: all .25s ease;
	transition: all .25s ease;
  }
  .portfolio-item:hover {
	border: 2px solid #4f8db3;
  }
  .portfolio-item:hover .portfolio-image img {
	position: relative;
	-webkit-transform: scale(1.1) rotate(2deg);
	-moz-transform: scale(1.1) rotate(2deg);
	-o-transform: scale(1.1) rotate(2deg);
	-ms-transform: scale(1.1) rotate(2deg);
	transform: scale(1.1) rotate(2deg);
  }
  .portfolio-item ul {
	list-style-type: none;
	margin-left: 0;
	margin-top: 20px;
	text-align: center;
	padding: 0;
  }
  .portfolio-item ul li {
	line-height: 28px;
  }
  .portfolio-item .portfolio-project-name {
	font-size: 1.4em;
  }
  .portfolio-item .portfolio-project-name h4{
	  color:#03C;
	  font-weight:700;
  }
  .portfolio-item .read-more {
	text-align: center;
	padding-top: 10px;
	margin-bottom:10px;
  }
  .portfolio-item .portfolio-info-fade {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
	top: 0;
	position: absolute;
	background: #000;
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	color: #FFF;
	text-shadow: 2px 2px 4px #000000;
	filter: dropshadow(color=#000000, offx=2, offy=2);
	-webkit-transition: opacity .25s linear;
	-moz-transition: opacity .25s linear;
	-o-transition: opacity .25s linear;
	-ms-transition: opacity .25s linear;
	transition: opacity .25s linear;
  }
  .portfolio-item .portfolio-info-fade ul {
	margin-top: 10%;
  }
  .portfolio-item .portfolio-info-fade .btn:hover {
	background: #4f8db3;
  }
  .portfolio-item .portfolio-info-fade ul {
	margin: 10% 20px 0 20px;
	padding: 0;
  }
  .portfolio-item .portfolio-info-fade ul li {
	text-align: center;
  }
  .portfolio-item .portfolio-info-fade ul li:first-child {
	border-bottom: 1px solid #CCC;
  }
  .portfolio-item:hover .portfolio-info-fade {
	display: block;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
  }


/*=========基础卡片样式 + 特殊标签（hot/free）角标 + 内部元素排版==============*/
/* Index Boxes */
.tile {
	background-color:  #f1f1f1; /* 浅灰色背景，区分卡片与页面背景 */
	/* 圆角：6px，兼容webkit/moz老浏览器 + 标准写法 */
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	padding: 14px; /* 内边距，让内容不贴边 */
	position: relative; /* 关键: 为伪元素（hot/free角标）提供绝对定位参考 */
	text-align: center;  /* 内部所有内容水平居中（核心布局） */
	margin-bottom:25px; 
}
/* 热门标签(hot)：右上角显示ribbon.png丝带角标 */
.tile.tile-hot:before {
    background: url("../images/ribbon.png") 0 0 no-repeat; /* 角标背景图 */
    background-size: 82px 82px; /* 强制背景图尺寸82x82px，适配不同屏幕 */
    content: ""; /* 伪元素必须有content，空内容仅作装饰 */
    height: 82px; /* 伪元素高度=背景图高度 */
    position: absolute; /* 绝对定位，脱离文档流 */
    right: -4px; /* 向右偏移-4px，超出卡片右侧边缘 */
    top: -4px; /* 向上偏移-4px，超出卡片顶部边缘 */
    width: 82px;/* 伪元素宽度=背景图宽度 */
}
/* 免费标签（free）：右上角显示free.png角标，逻辑与hot一致 */
.tile.tile-free:before {
    background: url("../images/free.png") 0 0 no-repeat;
    background-size: 82px 82px;
    content: "";
    height: 82px;
    position: absolute; /* 绝对定位，脱离文档流 */
    right: -4px;
    top: -4px;
    width: 82px;/* 伪元素宽度=背景图宽度 */
}
.tile p { margin: 10px 0 22px 0; color:#888888;font-weight:normal;}
.tile-image {
  height: 100px;/* 固定图片高度100px */
  margin: 25px 0 15px;/* 上下外边距：上25px，下15px，左右0 */
  vertical-align: bottom;/* 消除图片底部默认的行内间隙 */
}
/* 大插图变体：调整尺寸和上边距 */
.tile-image.big-illustration {
    height: 111px; /* 比普通图片高11px */
    margin-top: 10px; /* 上边距缩小为10px（更紧凑） */
    width: 112px; /* 额外固定宽度（普通图片仅定高，宽自适应） */
}
.tile-title {  font-size: 18px; margin: 0; color:#333333; font-weight:bold;}
/* ========== 核心：按钮底部30px + 水平居中 ========== */
.tile h6 {
	/* 绝对定位：脱离文档流，固定在tile底部 */
	position: absolute;
	bottom: 20px; /* 距离tile底部30px */
	left: 0;
	right: 0; /* 左右设为0，配合text-align:center实现水平居中 */
	text-align: center; /* 按钮水平居中 */
	margin: 0; /* 清除h6默认边距，避免位置偏移 */
  }
  
/* 可选：统一按钮样式（确保按钮宽度/对齐一致） */
.tile .btn {
	display: inline-block; /* 确保按钮行内块，不占满整行 */
	min-width: 120px; /* 可选：统一按钮最小宽度，视觉更整齐 */
}
  /* 鼠标悬浮：添加阴影效果 */
.tile:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* 柔和悬浮阴影 */
	border-radius: 8px; /* 可选：阴影加圆角，视觉更柔和 */
}


/* ========== VTextitem 实现一个组合，图片与文字上下布局，图片和文字都是水平局中，无边框，背景透明，鼠标移上去有阴影效果 ========== */
 .VTextitem {
	/* 基础布局：水平居中 + 透明背景 + 无边框 */
	background: transparent; /* 背景透明 */
	border: none; /* 无边框 */
	text-align: center; /* 内部所有元素水平居中 */
	padding: 15px 0; /* 上下内边距，避免内容贴边 */
	/* 过渡动画：悬浮效果平滑过渡 */
	transition: all 0.3s ease;
	/* 可选：限制最小高度，保证布局统一 */
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center; /* 强化水平居中（兼容复杂内容） */
	justify-content: center; /* 垂直居中（可选，按需开启） */
  }

  /* 直接控制VTextitem内的img样式 */
  .VTextitem img {
	display: block; /* 消除图片默认行内间隙 */
	margin: 0 auto 20px; /* 图片水平居中，与h4间距20px */
	max-width: 80px; /* 限制图片最大宽度，适配布局 */
	height: auto; /* 保持图片比例 */
  }

  /* 直接控制VTextitem内的h4样式 */
  .VTextitem h4 {
	color: #333; /* 标题文字颜色 */
	font-size: 18px; /* 标题字号 */
	margin-bottom: 15px; /* 与p标签间距15px */
	font-weight: 600; /* 标题加粗 */
  }

  /* 直接控制VTextitem内的p样式 */
  .VTextitem p {
	color: #666; /* 正文文字颜色 */
	font-size: 14px; /* 正文字号 */
	line-height: 1.6; /* 行间距，提升可读性 */
	margin: 0; /* 清除默认边距 */
	padding: 0 10px; /* 左右内边距，避免文字贴边 */
  }

  /* 鼠标悬浮：添加阴影效果 */
  .VTextitem:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* 柔和悬浮阴影 */
	transform: translateY(-3px); /* 轻微上移，增强交互（可选） */
	border-radius: 8px; /* 可选：阴影加圆角，视觉更柔和 */
  }


/* ========== 返回顶部按钮基础样式（固定定位 + 隐藏）========== */
.go-top {
	position: fixed; /* 固定在页面右下角 */
	right: 20px;
	bottom: 20px;
	z-index: 999; /* 置顶显示，避免被遮挡 */
	display: none; /* 默认隐藏 */
	cursor: pointer; /* 鼠标手型 */
	/* Bootstrap 圆角 + 阴影（原生样式） */
	border-radius: 50%;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	transition: opacity 0.3s ease; /* 平滑显示/隐藏 */
  }
  /* 图片适配圆形按钮 */
  .go-top img {
	width: 40px;
	height: 40px;
	display: block;
  }

/* ========== footer 实现一个末尾的状态效果 ========== */
#footer2 {
	position:relative;
	text-align:center;
	padding:39px 0 36px; 
	background:#323A45;
	color:#999;
	margin:50px 0px 0px 0px; 
	font-size:13px;
	font-weight:400;
}
.copyright a {color:#888; }
.copyright a:hover {color:#777; }


/* ==========  ========== */
/* product-des2 */	
.product-des2{
	background:#f9f9f9;
	background-size:cover;
	min-height:300px;
	position:relative;
	margin-top:50px;
}
/* product-des */	
.product-des{
	background:#FFF;
	background-size:cover;
	min-height:300px;
	position:relative;
	margin-top:50px;
}
.des-item{
	margin-top:40px;
	padding-bottom:20px;
}
.des-item h3{
	color:#4b80d0;
	font-size:2em;
	margin-bottom:0.6em;
}
.des-item p{
	color:#333333;
	font-size:1.2em;
	font-weight:normal;
}
.des-item img{
	clear: both; 
	display: block; 
	margin:0 auto; 
	max-width:95%;
}
.des-item table{
	 font-size:1.2em;
	 color:#666666;
	 font-weight:100;
	 text-align:center;
}
.des-item table tr td{
	height:60px;
}
.des-item2{
	margin-top:40px;
	padding-bottom:20px;
}
.des-item2 h3{
	color:#4b80d0;
	font-size:2em;
	margin-bottom:0.6em;
}
.des-item2 p{
	color:#333333;
	font-size:1.2em;
}
.des-item2 img{
	clear: both; 
	display: block; 
	float:right;
	max-width:95%;
}
.des-item2 table{
	 font-size:1.2em;
	 color:#666666;
	 font-weight:100;
	 text-align:center;
}
.des-item2 table tr td{
	height:60px;
}
.lefttwoword{
	padding-left:20px;
}

.des-item3{
	margin-top:0px;
	padding-bottom:10px;
}
.des-item3 img{
	clear: both; 
	display: block; 
	float:left;
	max-width:100%;
}

.des-item4{
	margin-top:0px;
	padding-bottom:0px;
}
.des-item4 img{
	clear: both; 
	display: block; 
	margin:0 auto; 
	max-width:100%;
	text-align: center;
}
.des-item4 h3{
	text-align:center;
	color:#4b80d0;
	font-size:1.8em;
}
.des-item4 p{
	text-align:center;
	color:#333333;
	font-size:1.0em;
	font-weight:normal;
}

/* res-item-border */	
.res-item-border{
	border-width: 1px;
  border-style: dashed;
	border-color: #ababab;
	border-left:none;
	border-right:none;
	border-top:none;
}
.res-item-border h3{
	color:#4b80d0;
	font-size:2em;
	margin-bottom:0.6em;
}
.res-item-border p{
	color:#333333;
	font-size:1.0em;
}


/* res-item */	
.res-item{
	border-width: 1px;
  border-style: dashed;
	border-color: #ababab;
	border-left:none;
	border-right:none;
	border-top:none;
}
.res-item2{
	padding-top:40px;
	padding-bottom:10px;
	border-width: 1px;
  border-style: dashed;
	border-color: #ababab;
	border-left:none;
	border-right:none;
	border-top:none;
	background:#f6f6f6;
}
.res-item p{
	font-size:1em;
	color:#5a5a5a;
}

/* res-des-item */	
.res-des-item{
	padding-top:30px;
	padding-bottom:10px;

}
.res-des-item h2{
	color:#0b1f53;
	padding-top:10px;
	padding-bottom:5px;
}
.res-des-item h3{
	color:#4b80d0;
	padding-top:10px;
	padding-bottom:5px;
}
.res-des-item img{
	clear: both; 
	display: block; 
	margin:10px auto; 
	max-width:80%;
}
.res-des-item p{
	color:#555555;
	font-size:1em;
}

/* ========= 自定义 CSS，强制 row 内的列等高 ====================*/
.row.equal-height {
	display: -webkit-box; /* 开启 Flex 布局（兼容webkit内核：Chrome/Safari） */
	display: -ms-flexbox; /* 开启 Flex 布局（兼容IE10+的ms前缀） */
	display: flex; /* 标准 Flex 布局（现代浏览器） */
	-ms-flex-wrap: wrap; /* 兼容IE10+：允许 Flex 子元素（col-3）换行，保留 4 列布局的响应式特性 */
	flex-wrap: wrap; /* 标准写法：Flex 容器内元素超出宽度时自动换行，避免列挤压变形 */
}
/* 让列垂直排列，tile 撑满高度 */
.row.equal-height .col-3 {
	display: -webkit-box; /* 开启 Flex 布局（兼容webkit内核） */
	display: -ms-flexbox;/* 开启 Flex 布局（兼容IE10+） */
	display: flex; /* 标准 Flex 布局 */
	-webkit-box-orient: vertical;  /* 兼容webkit内核：设置 Flex 子元素垂直排列（列方向） */
	-webkit-box-direction: normal;
	-ms-flex-direction: column; /* 兼容IE10+：设置 Flex 子元素垂直排列 */
	flex-direction: column;  /* 标准写法：Flex 容器内的元素从顶部到底部垂直排列（保留 tile 原有上下布局） */
}
.row.equal-height .tile {
	-webkit-box-flex: 1; /* 兼容webkit内核：设置 Flex 子元素的扩展比例为1（撑满父容器） */
	-ms-flex: 1; /* 兼容IE10+：设置 Flex 子元素的扩展比例为1 */
	flex: 1; /* 标准写法：Flex 扩展比例为1，强制 tile 撑满 col-3 的高度 */
}

/* ========= 自定义 CSS，问题列表 questionlist ====================*/
.questionlist{
	background:#FFF;
	background-size:cover;
	min-height:100px;
	position:relative;
	padding-top:20px;
	text-align: center;
}
.question-group{
	margin-top:8px;
	margin-bottom:0px;
	background:#ffffff;
	border:1px solid #cccccc;
}
.question-group-heading{
	text-align: left;
	height: 54px;
}
.question-group-heading button{
	text-align: left;
	width: 100%;
	height: 100%;
	background:#ffffff;
	border:0px solid #ffffff;
	color: #316cb4;
	font-size: 1.1em;
  font-weight: 500;
  background-image: url('../images/down2.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size:contain;
  padding-right: 20px;
}
.question-group-heading button:focus{
	outline:none;
}
.question-group-body{
	display:none;
	text-align: left;
	margin-left: 30px;
	margin-bottom:20px;
	margin-right:8px;
}
.question-group-body p{
	margin-top:8px;
	margin-bottom:8px;
	color: #333333;
}