@charset "utf-8";
body {
	margin: 0;
	padding: 0px;
	font-family: '微软雅黑', Arial, sans-serif;
    font-size: 15px;
	color: #000000;
	line-height: 25px;
	background-color: #AFCBD1;
/*	background-image: url(images/mainbg.gif);*/
	background-repeat: repeat-x;
}

a {
	color: #3D5C63;
	font-weight: normal;
}
img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    right: 50%;
    position: static;
    margin-left: 0%;
}

.image-container {  
    width: 100%; /* 确保容器占据可用空间 */  
}  
  
.responsive-image {  
    max-width: 100%; /* 图片最大宽度不超过其容器宽度 */  
    height: auto;    /* 自动调整高度以保持宽高比 */  
}




#container {
	width: 1069px;
	margin: 0 auto;
}
#content {
	margin: 0;
	background-repeat: repeat-y;
	background-image: url(images/bg-content.gif);
	padding: 0;
}
.toplink {
	float: right;
}

.navbar {  
    letter-spacing: 0px;  
    padding: 0 0 0 340px; /* 保持原样，但请确保这是您需要的左填充 */  
    background-image: url('images/navbar.gif');  /*保持背景图像，但路径应该是正确的 */  
    background-repeat: no-repeat;  
    font-family: '微软雅黑', Arial, sans-serif; /* 添加备选字体族 */  
    font-size: 12px;  
    height: 45px;  
    line-height: 45px; /* 添加行高以垂直居中单行文本 */  
}  

/* 样式化导航栏 */  
.navbar {  
    position: sticky; /* 使导航栏在滚动时保持位置 */  
    top: 0; /* 将导航栏固定在页面顶部 */  
    z-index: 100; /* 确保导航栏位于其他内容之上 */  
    background-color: #f5f5f5; /* 背景色，确保在滚动时不会与页面其他部分混淆 */  
}  
  
/* 样式化内容区域 */  
.contentarea {  
    margin-top: 60px; /* 为导航栏留出空间，防止被遮挡 */  
    /* 其他样式 */  
}  
  
/* 样式化无序列表和列表项，与之前保持一致 */  
ul.noticeable-list {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
    display: flex;  
    justify-content: space-between;  
}  
  
ul.noticeable-list li {  
    /* 样式与之前保持一致 */  
}  
  
/* 其他样式与之前保持一致 */
  
.navbar ul {  
    margin: 0;  
    padding: 0;  
    list-style-type: none; /* 这个属性可以移动到这里，因为它适用于所有的li */  
}  
  
.navbar li {  
    display: inline-block; /* 改为inline-block以获得更好的布局控制 */  
    margin-right: 10px; /* 添加一些间距在列表项之间 */  
}  
  
.navbar a {  
    text-decoration: none;  
    color: #FFFFFF;  
    display: block; /* 使链接占据整个li的空间，便于点击 */  
    padding: 5px 10px; /* 为链接添加一些内填充 */  
}  

/* 样式化无序列表 */  
ul.noticeable-list {  
    list-style: none; /* 移除默认的列表标记 */  
    padding: 0; /* 移除默认的内边距 */  
    margin: 0; /* 移除默认的外边距 */  
    display: flex; /* 使列表项水平排列 */  
    justify-content: space-between; /* 均匀分布列表项 */  
}  
  
/* 样式化列表项 */  
ul.noticeable-list li {  
    background-color: #87ceeb; /* 设置一个浅色的背景 */  
    border-radius: 5px; /* 添加圆角 */  
    margin-right: 13px; /* 添加右侧外边距，分隔列表项 */  
}  
  
/* 最后一个列表项不需要右边距 */  
ul.noticeable-list li:last-child {  
    margin-right: 13;  
}  
  
/* 样式化链接 */  
ul.noticeable-list li a {  
    display: block; /* 让链接占据整个列表项的空间 */  
    padding: 7px 12px; /* 调整内边距以适应水平排列 */  
    color: #333; /* 设置文字颜色 */  
    text-decoration: none; /* 移除下划线 */  
    transition: background-color 0.3s ease; /* 添加背景色过渡效果 */ 
	border-radius: 5px; /* 添加圆角 */ 
}  
  
/* 样式化标题 */  
ul.noticeable-list li a h5 {  
    margin: 0; /* 移除标题的默认外边距 */  
    font-size: 16px; /* 调整字体大小以适应水平排列 */  
    font-weight: bold; /* 设置字体加粗 */  
}  
  
/* 悬停效果 */  
ul.noticeable-list li a:hover {  
    background-color: #e0e0e0; /* 改变背景色 */ 
	border-radius: 5px; /* 添加圆角 */ 
}
  
.navbar h5 {  
    margin: 0;  
    padding: 0;  
    font-family: '微软雅黑', Arial, sans-serif;/* 保持字体一致性 */  
    font-size: 2.00em; /* 使用相对单位，以便更容易地进行响应式设计调整 */  
    font-weight: normal;  
    color: #3d5c63;  
    line-height: 1.2; /* 为多行文本设置合适的行高 */  
}  
  
/* 如果h5标签位于a标签内，可以添加额外的样式来控制它 */  
.navbar a h5 {  
    color: #000000; /* 使h5的颜色与链接颜色一致 */  
}  
  
/* 响应式设计考虑 */  
@media (max-width: 768px) {  
    .navbar {  
        padding: 0; /* 在小屏幕上移除左填充 */  
    }  
    .navbar li {  
        display: block; /* 在小屏幕上使列表项堆叠 */  
        margin-right: 0; /* 移除列表项之间的间距 */  
    }  
    .navbar a {  
        padding: 10px; /* 调整链接的内填充以适应触摸设备 */  
    }  
}

/* 样式化导航栏中的图片 */  
.noticeable-list li a .nav-image {  
    display: inline-block; /* 让图片以内联块元素显示 */  
    vertical-align: middle; /* 垂直居中对齐图片 */  
    margin-right: 5px; /* 图片与标题之间添加一些间距 */  
    width: auto; /* 设置图片的宽度 */  
    height: 30px; /* 设置图片的高度 */  
}

.contentarea {
	margin: 0;
	background-image: url(images/content-top.gif);
	background-repeat: no-repeat;
	padding: 25px 40px 0 40px;
}
.contentbottom {
	background-image: url(images/content-footer.gif);
	background-repeat: no-repeat;
	height: 36px;
	margin: 0;
}

.contentarea  h2 {
	font-family: '微软雅黑', Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
	letter-spacing: -1px;
	color: #3d5c63;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bfc9cc;
}
.contentarea  h3 {
	font-family: '微软雅黑', Arial, sans-serif;
	font-size: 40px;
	font-weight: normal;
	margin: 10px 0 10px 0;
	padding: 0 0 10px 0;
	letter-spacing: 4px;
	color: #3d5c63;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bfc9cc;
}

h3.product-intro {  
    /*display: inline-block;  让标题根据内容宽度自适应，而不是占满整行 */  
    background-color: #3d5c63; /* 设置一个深色的背景 */  
    color: #ffffff; /* 设置文字为白色，以确保在深色背景上的可读性 */  
    padding: 35px 10px; /* 添加内边距，使标题不会贴着边框 */  
    border-radius: 5px; /* 添加圆角，使标题看起来更加柔和 */  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* 添加一点阴影，增加立体感 */  
    font-family: '微软雅黑', Arial, sans-serif;
    font-size: 40px; /* 设置字体大小 */  
    font-weight: normal; /* 设置字体加粗 */  
    margin-bottom: 20px; /* 添加一些下方的外边距，与后续内容分隔开 */  
	text-align: center; /* 添加这一行来使文字居中 */ 
}

.contentarea h7 {  
    font-family: '微软雅黑', Arial, sans-serif; 
    font-size: 17px; /* 默认字体大小，适用于较大的屏幕 */  
    font-weight: normal;  
    margin: 30px 0 18px 0;  
    padding: 0 0 10px 0;  
    letter-spacing: 1px;  
    color: #000000;  
} 

.contentarea h6 {  
    font-family: '微软雅黑', Arial, sans-serif; 
    font-size: 16px; /* 默认字体大小，适用于较大的屏幕 */  
    font-weight: normal;  
    margin: 15px 0 15px 0;  
    padding: 0 0 10px 0;  
    letter-spacing: 0px;  
    color: #000000; 
	line-height: 1.6;
}  
  
/* 针对手机字体设置 */  
@media screen and (max-width: 1281px) {  
    .contentarea h6 {  
        font-size: 24px; /* 在平板电脑上使用的字体大小 */  
    }  
}  

.contentarea h9 {  
    font-family: '微软雅黑', Arial, sans-serif; 
    font-size: 17px; /* 默认字体大小，适用于较大的屏幕 */  
    font-weight: normal;  
    margin: 15px 0 15px 0;  
    padding: 0 0 10px 0;  
    letter-spacing: 0px;  
    color: #000000; 
	line-height: 1.4;
}  
  
/* 针对手机字体设置 */  
@media screen and (max-width: 1281px) {  
    .contentarea h9 {  
        font-size: 24px; /* 在平板电脑上使用的字体大小 */  
    }  
}  

.clearboth {
	clear: both;
}
.img-padding {
	padding: 0 0 15px 0;
}




.topheader {
	background-image: url(images/topheader.gif);
	background-repeat: no-repeat;
	height: 222px;
	margin: 0;
}
.logo {
	height: 44px;
}
.description {
	padding: 0;
	margin: 0px 0 0px 0;
}
.des-img {
	float: left;
	height: 149px;
	width: 226px;
	margin: 0 15px 0 0;
}
.top-area {
	margin: 0;
	padding: 0 16px 0 0;
}
.top-area  h1 {
	font-family: '微软雅黑', Arial, sans-serif;
	color: #3d5c63;
	font-size: 26px;
	letter-spacing: -1px;
	font-weight: normal;
	margin: 0 0 15px 0;
	padding: 10px 0 0 0;
	line-height: 18px;
}
.shipdetails {
	background-color: #dddddd;
	margin: 15px 0 20px 0;
	padding: 13px;
	color: #000000;
}

.policybox {
	border: 1px solid #bfc9cc;
	margin: 15px 0 15px 0;
	padding: 12px;
}
.thumb {
	float: left;
	width: 168px;
	margin: 10px 35px 0 0;
}
.thumb1 {
	float: left;
	width: 168px;
	margin: 10px 0 10px 0;
}
.txt-bold {
	font-weight: bold;
}
.txt-padding {
	padding: 0 0 0 57px;
}



.txt-padding2 {
	padding: 0 0 0 12px;
}
.eimg {
    left: 50px;
    position: static;
    margin-left: 25%;
}
.eimg2 {
    margin-left: 20%;
}
.eimg3 {
    display: block;      /* 将图片设置为块级元素 */  
    margin-left: auto;   /* 左边距自动 */  
    margin-right: auto;  /* 右边距自动 */  


}
.eimg4 {
    margin-left: 20%;

}
.eimg5 {
    margin-left: 16%;
}
.eimg6 {
    margin-left: 20%;

}
.eimg7 {
    margin-left: 25%;
}
.eimg8 {
    margin-left: 16%;
}
.eimg9 {
    margin-left: 2.5%;
}
.strength1 {
	font-family: '微软雅黑', Arial, sans-serif;
	font-size: 25px;
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	letter-spacing: 1px;
	color: #3d5c63;
    
}

/* 针对手机字体设置 */  
@media screen and (max-width: 1281px) {  
    .strength1 {  
        font-size: 30px; /* 在平板电脑上使用的字体大小 */  
    }  
}  

.but {
    width: 774px;
    background-color: #DDDDDD;

}

.table {  
    border: 1px solid #000;  
    width: 100%;  
    height: auto; /* 表格高度根据内容自动调整 */
	border-collapse: collapse; /* 合并相邻边框 */  
}

.table td,  
.table th {  
    border: 1px solid #000; /* 为单元格添加实线边框 */  
    padding: 4px; /* 可选：添加内边距以增加单元格内的空间 */  
}

.copyright {  
    text-align: center; /* 水平居中 */  
    margin: 20px 0; /* 添加一些上下外边距，以便与周围内容分隔开 */  
    /* 可选：添加其他样式，如字体大小、颜色等 */  
}

.download-link-container {  
    text-align: left; /* 居中显示 */  
    padding: 20px; /* 添加内边距 */  
    background-color: #f5f5f5; /* 浅色背景 */  
    border-radius: 5px; /* 圆角边框 */  
}  
  
.download-link {  
    display: inline-block; /* 让链接表现为行内块级元素 */  
    text-decoration: none; /* 移除下划线 */  
    color: #007bff; /* 蓝色文本 */  
    padding: 10px 20px; /* 内边距 */  
    border: 1px solid #007bff; /* 蓝色边框 */  
    border-radius: 4px; /* 圆角 */  
    transition: background-color 0.3s ease; /* 过渡效果 */  
}  
  
.download-link:hover {  
    background-color: #007bff; /* 鼠标悬停时的背景色 */  
    color: white; /* 鼠标悬停时的文本颜色 */  
}  
  
.download-text {  
    /* 可以添加额外样式，比如字体大小 */  
    font-weight: bold; /* 加粗文本 */  
}  
  
.download-filename {  
    /* 文件名字体的样式 */  
    margin-left: 5px; /* 左外边距 */  
}  
  
.download-icon {  
    /* 下载图标的样式 */  
    margin-left: 10px; /* 左外边距 */  
    font-size: 1.2em; /* 图标大小 */  
}