/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* start editing from here */
a {
  text-decoration: none;
}
.txt-rt {
  text-align: right;
} /* text align right */
.txt-lt {
  text-align: left;
} /* text align left */
.txt-center {
  text-align: center;
} /* text align center */
.float-rt {
  float: right;
} /* float right */
.float-lt {
  float: left;
} /* float left */
.clear {
  clear: both;
} /* clear float */
.pos-relative {
  position: relative;
} /* Position Relative */
.pos-absolute {
  position: absolute;
} /* Position Absolute */
.vertical-base {
  vertical-align: baseline;
} /* vertical align baseline */
.vertical-top {
  vertical-align: top;
} /* vertical align top */
.underline {
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  margin: 0 0 20px 0;
} /* Add 5px bottom padding and a underline */
nav.vertical ul li {
  display: block;
} /* vertical menu */
nav.horizontal ul li {
  display: inline-block;
} /* horizontal menu */
img {
  max-width: 100%;
}
/*end reset*/
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
}
.wrap {
  width: 80%;
  margin: 0 auto;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
.header-top .wrap {
  width: 100%;
  display: flex;
  justify-content: space-between; /* 左右两侧分布 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 20px; /* 添加一些内边距 */
}
.header-top {
  background: #106dff;
  padding: 1% 2%;
}
.search_box {
  border: 1px solid #4d4c4c;
  position: relative;
  float: right;
}
.search_box form input[type='text'] {
  border: none;
  outline: none;
  background: none;
  font-size: 0.85em;
  color: #fff;
  width: 74%;
  padding: 9px;
  -webkit-apperance: none;
}
.search_box form input[type='submit'] {
  border: none;
  cursor: pointer;
  background: url(../images/search-icon.png) no-repeat 0px 12px;
  position: absolute;
  right: 0;
  width: 25px;
  height: 32px;
  outline: none;
}
.follow_icon {
  list-style: none;
  float: right;
}
.follow_icon li {
  float: left;
  margin-left: 5px;
  padding-top: 18%;
}
.follow_icon li a img {
  vertical-align: middle;
}
.follow_icon li a:hover {
  opacity: 0.7;
}
.why-choose-us {
  text-align: center;
  margin-bottom: 20px;
}

.why-choose-us h3 {
  font-size: 24px;
  color: #333;
}

.why-choose-us p {
  font-size: 18px;
  color: #666;
}

/*--menu--*/
/* 通用样式 */
.header-navbar-link {
  text-decoration: none;
  color: #fff; /* 文字颜色改为白色 */
}

/* 默认的导航栏样式 */
.header-navbar-navbar {
  background-color: #106dff; /* 背景色改为 #106dff */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: relative; /* 设置为相对定位 */
  z-index: 10; /* 保证导航栏在其他内容上层 */
}

.header-navbar-navbar-list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.header-navbar-navbar-list li {
  margin: 0 15px;
}

.header-navbar-navbar-list .header-navbar-link {
  color: white;
  padding: 10px 15px;
  display: block;
}

/* 移动端样式 */
.header-navbar-mobile-navbar {
  display: none; /* 默认不显示移动端导航栏 */
  background-color: #106dff; /* 背景色改为 #106dff */
  padding: 10px 20px; /* 添加左右内边距，避免内容贴边 */
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center; /* 垂直居中 */
  position: relative;
  z-index: 20; /* 确保移动端导航栏显示在其他内容之上 */
}

.header-navbar-menu-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.header-navbar-mobile-nav-dropdown {
  display: none;
  position: absolute;
  background-color: #106dff;
  top: 50px;
  left: 0;
  right: 0;
  transform: scaleY(0); /* 初始状态下收起 */
  transform-origin: top; /* 让动画从顶部展开 */
  opacity: 0; /* 初始状态下完全透明 */
  transition: transform 0.5s ease, opacity 0.5s ease; /* 设置过渡动画 */
  z-index: 30; /* 确保导航栏下拉菜单在页面上层 */
}

.header-navbar-mobile-nav-dropdown ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.header-navbar-mobile-nav-dropdown ul li {
  padding: 10px;
  text-align: center; /* 文字居中 */
}

.header-navbar-mobile-nav-dropdown ul li .header-navbar-link {
  color: white;
  display: block;
  padding: 10px;
}

/* 移动端点击菜单按钮后显示导航栏 */
.header-navbar-mobile-nav-dropdown.show {
  display: block;
  transform: scaleY(1); /* 展开时，使用 scaleY(1) */
  opacity: 1; /* 展开时完全显示 */
}

/* 鼠标悬停效果 */
.header-navbar-mobile-nav-dropdown ul li .header-navbar-link:hover,
.header-navbar-navbar-list li .header-navbar-link:hover {
  background-color: #00a9e4; /* 背景色变暗 */
  border-radius: 20px;
}

.header-navbar-logo img {
  height: 80px;
}

/* 样式优化：下拉菜单 */
.header-navbar-navbar-list .dropdown-menu,
.header-navbar-mobile-nav-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  width: 200px;
  border-radius: 4px;
  padding: 8px 0;
  margin-top: 10px;
  z-index: 999;
  transition: all 0.3s ease-in-out; /* 过渡效果 */
}

/* 保证二级菜单在鼠标移入时不会消失 */
.header-navbar-navbar-list .dropdown:hover .dropdown-menu,
.header-navbar-navbar-list .dropdown-menu:hover {
  display: block;
}

/* 下拉菜单项：整洁的边距和字体 */
.header-navbar-navbar-list .dropdown-menu li,
.header-navbar-mobile-nav-dropdown .dropdown-menu li {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  transition: background-color 0.2s ease-in-out;
}

/* 鼠标悬停时改变下拉项背景色，提升交互性 */
.header-navbar-navbar-list .dropdown-menu li:hover,
.header-navbar-mobile-nav-dropdown .dropdown-menu li:hover {
  background-color: #f5f5f5;
  color: #0073e6; /* 蓝色高亮，符合企业风格 */
}

/* 防止二级菜单超出父元素 */
.header-navbar-navbar-list .dropdown {
  position: relative;

/* Contact page: make content fill the viewport and keep footer at bottom */
.contact-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.contact-page > .wrap {
  flex: 1 0 auto; /* allow main content to grow and fill available space */
}

/* Ensure footer doesn't overlap content and stays at bottom */
.footer {
  flex-shrink: 0;
}
}

/* 调整下拉菜单位置（避免遮挡） */
.header-navbar-navbar-list .dropdown-menu {
  left: 0;
  top: 100%;
}

/* 使下拉菜单在小屏设备中显示清晰 */
.header-navbar-mobile-nav-dropdown .dropdown-menu {
  position: relative;
  box-shadow: none;
  width: 100%;
  padding: 0;
}

/* 修改链接颜色，保持一致的品牌色 */
.header-navbar-navbar-list .dropdown-menu li a,
.header-navbar-mobile-nav-dropdown .dropdown-menu li a {
  text-decoration: none;
  color: #333; /* 标准颜色 */
  padding: 10px 20px;
  display: block;
}

/* 调整菜单和父菜单的层级关系 */
.header-navbar-navbar-list .dropdown-menu li a:hover {
  color: #0073e6; /* 悬停时蓝色 */
  background-color: #f0f0f0; /* 灰色背景 */
}

/* 针对移动端优化：让下拉菜单更加紧凑 */
@media (max-width: 768px) {
  .header-navbar-navbar-list .dropdown-menu {
    width: 100%; /* 使用全宽 */
    box-shadow: none;
    padding: 0;
  }

  .header-navbar-navbar-list .dropdown-menu li {
    padding: 12px 16px;
    font-size: 16px;
  }

  .header-navbar-mobile-navbar .dropdown-menu li {
    padding: 12px 20px;
  }
  .header-navbar-mobile-navbar .dropdown-menu li a {
    text-align: center;
  }
}

/* 响应式媒体查询 */
@media (max-width: 768px) {
  .header-navbar-navbar {
    display: none; /* 隐藏桌面导航栏 */
  }

  .header-navbar-mobile-navbar {
    display: flex;
    background-color: #106dff; /* 背景色改为 #106dff */
    padding: 10px 20px; /* 添加左右内边距，避免内容贴边 */
    justify-content: space-between; /* 左右分布 logo 和菜单按钮 */
    align-items: center; /* 垂直居中 */
    position: relative;
    z-index: 20; /* 确保移动端导航栏显示在其他内容之上 */
  }

  .header-navbar-mobile-nav-dropdown {
    display: none;
    background-color: #106dff;
    position: absolute;
    width: 100%;
    top: 60px; /* 可以调整为合适的高度 */
    transform: scaleY(0); /* 初始状态下收起 */
    transform-origin: top; /* 确保动画从顶部展开 */
    opacity: 0; /* 初始状态透明 */
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: 30; /* 确保导航栏下拉菜单在页面上层 */
  }
  .header-navbar-logo img {
    height: 40px;
  }
}

/* 针对桌面端，确保显示桌面导航栏，移动端不显示 */
@media (min-width: 769px) {
  .header-navbar-mobile-navbar {
    display: none; /* 隐藏移动端导航栏 */
  }
}

/* 添加这个样式来使用 Flexbox 布局 */
.image-container {
  display: flex;
  justify-content: space-between; /* 平均分配每个图片 */
  gap: 20px; /* 设置图片之间的间距 */
}

.col_1_of_5 {
  flex: 1; /* 让每个图片占据相等的宽度 */
  max-width: 33%; /* 限制每个列的最大宽度，确保它们是三列 */
}

.css3 img {
  width: 100%; /* 让图片充满容器 */
  height: auto; /* 保持图片的比例 */
}

.clear {
  clear: both;
}

/* 设置 banner 的位置 */
.banner {
  position: relative;
}

.flexslider {
  position: relative;
}

/* 在第一张图片上添加文字内容 */
.banner-item {
  position: relative;
}

/* 设置文字的样式 */
.banner-text {
  position: absolute;
  top: 30%; /* 控制文字距离图片顶部的距离 */
  left: 30%;
  transform: translateX(-50%); /* 使文字水平居中 */
  text-align: center; /* 文字居中对齐 */
  color: #1b7cff; /* 文字颜色，确保在图片上清晰可见 */
  z-index: 10; /* 确保文字位于图片之上 */
  padding: 20px;
  border-radius: 10px;
}
/* 设置文字的样式 */
.banner-text1 {
  position: absolute;
  top: 30%; /* 控制文字距离图片顶部的距离 */
  left: 25%;
  transform: translateX(-50%); /* 使文字水平居中 */
  text-align: center; /* 文字居中对齐 */
  color: #1b7cff; /* 文字颜色，确保在图片上清晰可见 */
  z-index: 10; /* 确保文字位于图片之上 */
  padding: 20px;
  border-radius: 10px;
}

.banner-text1 h3 {
  font-size: 50px;
  font-weight: bold;
}

/* 设置文字标题的样式 */
.banner-text h2 {
  font-size: 40px;
}
.banner-text h3 {
  font-size: 80px;
  font-weight: bold;
  margin: 10px 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(to right, #49aaeb, #5e4ceb); /* 浅蓝到蓝的渐变 */
  -webkit-background-clip: text; /* 让背景应用到文字 */
  color: transparent; /* 文字颜色设为透明，以显示背景渐变 */
}
.banner-text p {
  font-size: 24px;
  line-height: 2.5;
  margin: 5px 0;
}
.banner-text1 p {
  font-size: 20px;
  margin: 20px 0;
}
/* 圆圈样式 */
.circle-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.circle-text {
  display: inline-block;
  padding: 20px;
  margin: 0 10px;
  border: 2px dashed #1b7cff; /* 设置虚线圆圈 */
  border-radius: 50%; /* 圆形 */
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  color: #1b7cff;
}

.staff-img {
  width: 100%; /* 确保容器宽度占满屏幕 */
  overflow: hidden; /* 防止图片溢出容器 */
}

.staff-img img {
  width: 100%; /* 确保图片宽度占满容器 */
  height: auto; /* 让图片的高度自动调整，避免变形 */
  display: block; /* 确保图片没有下方的间距 */
}

/* 在小屏幕上（例如手机）做响应式调整 */
@media (max-width: 768px) {
  .banner-text {
    top: 3%; /* 可以调整位置让文字在手机上看起来更合适 */
    width: 60%; /* 确保文字区域不会太宽 */
  }
  .banner-text h2 {
    font-size: 16px;
  }
  .banner-text h3 {
    font-size: 12px;
  }
  .banner-text p {
    font-size: 10px;
  }
  .banner-text1 {
    top: 10%;
    width: 60%;
  }
  .banner-text1 h2 {
    font-size: 16px;
  }
  .banner-text1 h3 {
    font-size: 18px;
  }
  .banner-text1 p {
    font-size: 10px;
  }
  .circle-text {
    display: none;
  }
  .header-bottom {
    padding: 15px 18px;
  }
  .header-top .wrap {
    width: 300px;
    margin: 0;
    flex-direction: column; /* 改为垂直排列 */
    align-items: flex-start; /* Logo 和导航栏靠左 */
  }

  /* 设置导航栏显示换行 */
  .header-bottom nav ul {
    flex-direction: column; /* 垂直排列导航项 */
    text-align: left; /* 左对齐 */
  }

  .header-bottom nav ul li {
    width: 100%; /* 每个菜单项占满一行 */
    text-align: center;
    padding: 10px 0;
  }

  .header-bottom nav ul li a {
    width: 100%; /* 使每个链接占满整个宽度 */
    text-align: center;
    padding: 10px 0;
  }
  .more {
    display: none;
  }
}

/*--content--*/
/*  GRID OF FIVE   ============================================================================= */
.col_1_of_5 {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col_1_of_5:first-child {
  margin-left: 0;
}
.span_1_of_5 {
  width: 18.32%;
}
.span_1_of_5 img {
  display: block;
}
/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
  .wrap {
    width: 95%;
  }
}
/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) and (min-width: 480px) {
  .wrap {
    width: 95%;
  }
  .col_1_of_5 {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_5 {
    width: 94%;
    padding: 3%;
  }
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
  .wrap {
    width: 95%;
  }
  .col_1_of_5 {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_5 {
    width: 92%;
    padding: 4%;
  }
}
h4.title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.4em;
  margin-bottom: 10px; /* 标题与横线之间的间距 */
  position: relative; /* 为了定位下边横线 */
  display: inline-block; /* 使标题成为内联块级元素，便于控制宽度 */
}
.title::after {
  content: ''; /* 空的内容生成伪元素 */
  position: absolute;
  bottom: -8px; /* 横线距离标题的距离 */
  left: 50%; /* 从标题的中心开始 */
  width: 50%; /* 横线的宽度为标题宽度的 10% */
  height: 1px; /* 横线的厚度 */
  background-color: #2150aa; /* 横线的颜色 */
  transform: translateX(-50%); /* 将横线水平居中对齐标题 */
}
h4.title a:hover {
  color: #e44f64;
}
p.price {
  color: #e4f265;
  font-size: 1.5em;
  font-family: 'Pacifico', cursive;
  font-size: 1.5em;
}
p.price1 {
  color: #ff8997;
  font-size: 1.5em;
  font-family: 'Pacifico', cursive;
}
p.price2 {
  color: #84e4f2;
  font-size: 1.4em;
  font-family: 'Pacifico', cursive;
}
.item_content {
  padding-bottom: 3%;
}
.content-top {
  padding: 3% 0;
  border-bottom: 1px solid #ddd;
}
.css3 img {
  -webkit-transition-duration: 0.5s;
  webkit: Animation duration;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
.css3 img:hover {
  -webkit-transform: scale(0.9);
  webkit: Scale up image to 1.2x original size;
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  opacity: 1;
}
.item_content1 {
  text-align: center;
  padding: 6%;
}
.item_content2 {
  text-align: center;
  padding: 6%;
}
.item_content3 {
  text-align: center;
  padding: 6%;
}
.col_1_of_2:first-child {
  margin-left: 0;
}
.span_1_of_2 {
  width: 49.2%;
}
.col_1_of_2 {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
/* 设置 ul 为 Flexbox 容器 */
.list2 {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
  max-width: 1200px; /* 限制最大宽度，防止大屏幕显示过宽 */
  width: 100%;
}

.list2 li {
  width: 33%; /* 每个列表项占 30% 宽度 */
  margin-bottom: 20px;
  text-align: center; /* 确保文字居中 */
}

.list2 img {
  width: 100%; /* 图片自适应宽度 */
  height: auto;
  display: block; /* 去除图片下方的空白 */
}

@media (max-width: 768px) {
  .list2 li {
    width: 100%; /* 在小屏幕上，每个图片占满整行 */
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .list2 li {
    width: 100%; /* 在超小屏幕上，图片依然占满整行 */
    margin-bottom: 15px; /* 调整底部间距 */
  }

  .extra-wrap h4 {
    font-size: 16px; /* 小屏幕上文字稍微缩小 */
  }
}

.extra-wrap {
  margin-top: 10px;
}

/* 产品展示标题部分 */
.product-showcase {
  text-align: center; /* 使标题居中 */
  margin-bottom: 20px; /* 添加一些底部间距 */
  margin-top: 40px;
}
.showcase-title {
  font-size: 30px;
  font-weight: bold;
  color: #1b7cff;
  margin-bottom: 10px;
}
.divider {
  width: 4%; /* 短横线宽度为容器的60% */
  margin: 0 auto 20px auto; /* 居中对齐并设置底部间距 */
  border: 1px solid #2150aa; /* 横线颜色 */
}

.product-label {
  font-size: 20px;
  color: #7d7d7d;
  letter-spacing: 2px; /* 增加字母间距 */
}

.span_1_of_2 h3 {
  line-height: 1.8em;
  font-size: 1.1em;
  color: #333;
  text-transform: uppercase;
  font-family: 'Pacifico', cursive;
}
.span_1_of_2 p {
  font-size: 0.8125em;
  padding: 0.5em 0;
  color: #999;
  line-height: 1.5em;
  font-family: verdana, arial, helvetica, helve, sans-serif;
}
p > a {
  color: #aa82d5;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
p > a:hover {
  color: #333;
}
.comment span {
  margin: 0 18px;
}
p > em {
  font-style: normal;
  color: #aa82d5;
}
.content-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}
.more {
  padding-top: 4%;
  color: #b2b2b2;
}
.btn:hover,
.btn1:hover,
.btn2:hover {
  color: #fff;
  text-decoration: none;
}
.extra-wrap {
  text-align: center;
  margin-top: 10px;
}
.extra-wrap h4 {
  font-size: 18px;
  margin: 0;
}
/* 响应式设计：适配小屏设备 */
@media (max-width: 768px) {
  .list2 li {
    flex: 1 1 calc(50% - 20px);
  }

  .list2 li img {
    max-width: 250px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .list2 li {
    flex: 1 1 100%; /* 每个列表项占据 100% 宽度 */
  }

  .list2 li img {
    max-width: 200px; /* 在超小屏设备下调整图片最大宽度 */
  }
}
.btn {
  box-shadow: none;
  position: relative;
  text-decoration: underline;
  padding: 0;
  color: #e4f265;
  font: 17px/24px 'Roboto', Georgia, sans-serif;
  text-decoration: underline;
  border: none;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.btn1 {
  box-shadow: none;
  position: relative;
  text-decoration: underline;
  padding: 0;
  color: #ff8997;
  font: 17px/24px 'Roboto', Georgia, sans-serif;
  text-decoration: underline;
  border: none;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.btn2 {
  box-shadow: none;
  position: relative;
  text-decoration: underline;
  padding: 0;
  color: #84e4f2;
  font: 17px/24px 'Roboto', Georgia, sans-serif;
  text-decoration: underline;
  border: none;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.More_Products {
  width: 100%;
  text-align: center; /* 让按钮居中 */
}
.More_Products button {
  width: 180px;
  padding: 12px;
  background-color: #1b7cff;
  border: none;
  margin-bottom: 40px;
}
.More_Products button a {
  color: #fff;
}
.More_Products button:hover {
  background-color: #0073e6;
}
/* 电话按钮样式 */
.center-button {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.phone-button {
  background-color: #106dff; /* 设置背景颜色 */
  color: white; /* 字体颜色白色 */
  padding: 14px 30px;
  font-size: 16px;
  border: none;
  border-radius: 30px; /* 圆滑边角 */
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.phone-button:hover {
  background-color: #005bb5; /* 悬停时背景色 */
}

/* 上下页按钮样式 */
.page-navigation {
  display: flex;
  justify-content: center;
  gap: 20px; /* 按钮之间的间隔 */
}

.page-button {
  background-color: white;
  color: #333;
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid #ccc; /* 1px灰色边框 */
  border-radius: 30px; /* 圆滑边角 */
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.page-button:hover {
  background-color: #106dff; /* 悬停时背景色 */
  color: white; /* 悬停时字体颜色 */
}

/* 按钮间距 */
.prev-button {
  margin-right: 10px;
}

.next-button {
  margin-left: 10px;
}

/* 浅蓝色表格样式 */
table.product-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: #e6f7ff; /* 浅蓝色背景 */
}

table.product-table th,
table.product-table td {
  padding: 15px;
  text-align: left;
  border: 1px solid #b3d9ff; /* 浅蓝色边框 */
}

table.product-table th {
  background-color: #99c2ff; /* 更深的蓝色作为表头背景 */
  color: #fff;
}

table.product-table td {
  font-size: 16px;
  color: #333;
}

/* 图片和文字并排布局 */
.product-container {
  display: flex; /* 使用 flexbox 使图片和文字并排 */
  justify-content: space-between; /* 分开布局 */
  align-items: flex-start; /* 上对齐 */
  margin-bottom: 30px; /* 底部间距 */
}

.product-image {
  width: 50%; /* 图片区域占45%宽度 */
  text-align: center; /* 图片居中显示 */
}

.product-image img {
  max-width: 70%; /* 使图片不超出容器宽度 */
  height: auto; /* 保持图片比例 */
  border: 1px solid #b3d9ff;
  padding: 10px;
}

.product-info {
  width: 50%; /* 文字区域占50%宽度 */
  padding-left: 20px; /* 左内边距 */
  padding-top: 20px;
  font-size: 16px; /* 字体大小 */
}

.product-info h2 {
  font-size: 24px;
  color: #0056b3; /* 标题颜色 */
  margin-bottom: 15px;
}

.product-info p {
  margin-bottom: 10px;
}

.product-info strong {
  font-weight: bold; /* 加粗 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-container {
    flex-direction: column; /* 小屏幕时调整为竖直排列 */
    align-items: center; /* 居中对齐 */
  }

  .product-image,
  .product-info {
    width: 90%; /* 调整宽度为90% */
    margin-bottom: 20px; /* 底部间距 */
  }

  .product-info {
    padding-left: 0; /* 去掉左边距 */
    text-align: center; /* 文字居中 */
  }

  .product-info h2 {
    font-size: 20px; /* 减小标题字号 */
  }

  table.product-table th,
  table.product-table td {
    font-size: 14px;
    padding: 10px;
  }
}

/*--footer--*/
.footer {
  background: #1b7cff;
  padding: 2% 0;
}
.col_1_of_4:first-child {
  margin-left: 0;
}
.span_1_of_4 {
  width: 23.8%;
}
.col_1_of_4 {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.span_1_of_4 h3,
.span_1_of_footer-lastgrid h3 {
  font-family: 'Pacifico', cursive;
  color: #fff;
  font-size: 1.7em;
  margin-bottom: 0.5em;
}
.span_1_of_4 ul li {
  background: url(../images/marker.png) no-repeat;
  line-height: 0.4em;
  padding: 0 0 19px 13px;
}
.span_1_of_4 ul li a {
  color: #fff;
  font-size: 0.8125em;
  -moz-transition: background 0.5s ease;
  -o-transition: background 0.5s ease;
  -webkit-transition: background 0.5s ease;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  vertical-align: top;
}
.span_1_of_4 ul li a:hover {
  color: #fff4ce;
}
.footer-grid-address p {
  font-size: 0.875em;
  color: #fff;
  line-height: 1.8em;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  margin-top: -4px;
}
.copy-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 20px;
}

.copy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy img {
  height: 20px;
  width: auto;
}

.copy a{
  color: white;
  font-size: 14px;
}

.email-link {
  color: #fff4ce;
  transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  text-transform: lowercase;
}
.email-link:hover {
  color: #fff;
}
/*--about--*/
.project-top-patination {
  padding: 15px 0px;
  border: 1px dashed #c0c0c0;
  border-left: none;
  margin: 0px 0 35px 0px;
  border-right: none;
  border-color: #106dff;
}
.project-top-patination ul li {
  display: inline-block;
}
.project-top-patination ul li a {
  border-right: 1px solid rgba(192, 192, 192, 0.33);
  padding-right: 20px;
  color: #333;
  font: 400 18px/20px Arial;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  text-transform: uppercase;
}
.project-top-patination ul li a:hover {
  color: #106dff;
}
.about-topgrid1 {
  width: 29%;
  float: left;
  margin-right: 5%;
  margin-bottom: 30px;
}
.about-topgrid1 h3 {
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.09);
  margin-bottom: 13px;
  color: #106dff;
  font-size: 1.2em;
  text-transform: uppercase;
}
.about-topgrid1 h4 {
  color: #333;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  font-size: 0.8125em;
  line-height: 1.5em;
  padding: 10px 0px;
}
.about-topgrid1 p {
  font-size: 0.8125em;
  color: #999;
  line-height: 1.5em;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  padding: 4px 0px 8px 0px;
}
.about-histore {
  float: left;
  width: 30%;
}
.about-histore h3 {
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.09);
  margin-bottom: 13px;
  color: #106dff;
  font-size: 1.2em;
  text-transform: uppercase;
}
.about-histore ul li span {
  color: #000;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  font-size: 14px;
  padding: 15px 0px 15px 0px;
  margin-bottom: 13px;
  float: left;
  width: 14%;
}
.about-histore ul li p {
  font-size: 0.8125em;
  color: #999;
  line-height: 1.5em;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  padding: 4px 0px 8px 0px;
  width: 100%;
}
.about-services {
  width: 30%;
  float: left;
  margin-left: 5%;
}
.about-services h3 {
  padding: 15px 0px 15px 0px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.09);
  margin-bottom: 13px;
  color: #106dff;
  font-size: 1.2em;
  text-transform: uppercase;
}
.about-services h4 {
  color: #333;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  font-size: 0.8125em;
  line-height: 1.5em;
  padding: 10px 0px;
}
.about-services p {
  font-size: 0.8125em;
  color: #999;
  line-height: 1.5em;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  padding: 4px 0px 8px 0px;
}
.about-services ul li a {
  color: #7b7c7e;
  font-family: verdana, arial, helvetica, helve, sans-serif;
  font-size: 13px;
  line-height: 2.3em;
}
.about-services ul li a:hover {
  color: #106dff;
}
.about-top {
  padding: 3% 0 0;
}
.project-top-patination p {
  font: 400 15px/22px Arial;
  color: #106dff;
  padding-left: 20px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}
/*--staff--*/
.about-bottom {
  padding: 20px;
}
.dc-head {
  justify-content: center;
  text-align: center;
}
.dc-head {
  width: 33.33%;
  float: left;
}
.dc-head-info span {
  font-family: 'Roboto', sans-serif;
  color: #505050;
  font-size: 1em;
  text-transform: uppercase;
}
.dc-head-img {
}
.dc-head-info h3 {
  font-family: 'Pacifico', cursive;
  color: #106dff;
  font-size: 1.5em;
  text-transform: uppercase;
}
.dc-profile p:before {
  content: url(../images/quotes.png);
  padding-right: 10px;
}
.dc-profile a {
  background: #106dff;
  padding: 8px 15px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 0.875em;
  transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  text-transform: uppercase;
}
.dc-profile a:hover {
  background: #333;
}
.dc-grids {
  padding: 2% 0;
}
.dc-grids1 {
  padding-bottom: 4%;
}
/*--services--*/
.span_1_of_services {
  width: 23.8%;
}
.col_1_of_services {
  display: block;
  float: left;
  margin: 0% 0 0% 1.6%;
}
.col_1_of_services:first-child {
  margin-left: 0;
}
.span_1_of_services h3 span {
  color: #333;
  font-size: 0.8125em;
}
.services_list li a {
  font-size: 0.8125em;
  color: #999;
  display: block;
  padding: 8px 0px 8px 15px;
  background: url(../images/marker1.png) no-repeat 0;
  font-family: verdana, arial, helvetica, helve, sans-serif;
}
.services-bottom {
  padding-top: 2%;
}
.span_1_of_services h3 {
  text-transform: uppercase;
  margin: 5px 0px;
  font-size: 1.6em;
  font-weight: bold;
  font-family: 'Pacifico', cursive;
  line-height: 25px;
}
/*--contact--*/
/*  Contact Form  ============================================================================= */

/* 回到顶部按钮样式 */
.scroll-to-top {
  position: fixed;
  bottom: 30px; /* 距离底部30px */
  right: 30px; /* 距离右边30px */
  width: 50px; /* 按钮的宽度 */
  height: 50px; /* 按钮的高度 */
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* 去掉链接的下划线 */
  cursor: pointer;
  z-index: 1000; /* 确保按钮在其他内容之上 */
}

.scroll-to-top img {
  width: 100%; /* 使用图标的实际尺寸 */
  height: 100%; /* 使用图标的实际尺寸 */
}

/* 案例展示的容器 */
.case-show-images {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 图片之间有间距 */
  gap: 20px; /* 图片间距 */
  margin-top: 20px; /* 与标题的间距 */
  margin-bottom: 30px; /* 与标题的间距 */
}

/* 每个图片块 */
.case-image {
  flex: 1 1 30%; /* 每张图片占 30% 的宽度，三张图片并排 */
  box-sizing: border-box; /* 包括padding和border在内的宽度计算 */
}

.case-image img {
  width: 100%; /* 确保图片宽度自适应 */
  height: auto; /* 高度自适应，避免图片变形 */
  border-radius: 8px; /* 圆角效果 */
}

.contact-info {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #333;
  margin-top: 30px;
  line-height: 1.8;
}

.contact-info p {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}

.contact-info .contact-description {
  font-size: 18px;
  color: #4caf50; /* Green */
  margin-bottom: 15px;
  text-align: center;
}

.contact-info .contact-description span {
  display: block;
  margin-top: 10px;
}

.contact-info .underline {
  width: 50px;
  height: 3px;
  background-color: #87cefa; /* Light Blue */
  margin: 10px auto;
}

.contact-info .contact-img {
  display: flex;
  align-items: center;
  margin-top: 20px;
  flex-direction: column; /* Stack image and text vertically */
  text-align: center; /* Center the text */
}

.contact-map {
  margin-top: 30px;
}
/* 设置地图容器的大小 */
#map {
  height: 400px;
  width: 100%;
  margin-bottom: 20px;
}
.contact-lis {
  text-align: center;
  margin-bottom: 20px;
}
.contact-lis p {
}
/* 小屏幕上调整布局 */
@media (max-width: 768px) {
  .case-image {
    flex: 1 1 100%; /* 在小屏幕下每张图片占100%的宽度 */
  }
}

/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
  .wrap {
    width: 95%;
  }
}
/*  GO FULL WIDTH AT LESS THAN 800 PIXELS */

@media only screen and (max-width: 800px) {
  .wrap {
    width: 95%;
  }
  .span_2_of_3 {
    width: 94%;
    padding: 3%;
  }
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_3 {
    width: 94%;
    padding: 3%;
  }
}

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */

@media only screen and (max-width: 640px) and (min-width: 480px) {
  .wrap {
    width: 95%;
  }
  .span_2_of_3 {
    width: 94%;
    padding: 3%;
  }
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_3 {
    width: 94%;
    padding: 3%;
  }

  .contact-form input[type='text'],
  .contact-form textarea {
    width: 97%;
  }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
  .wrap {
    width: 95%;
  }
  .span_2_of_3 {
    width: 90%;
    padding: 5%;
  }
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_3 {
    width: 90%;
    padding: 5%;
  }
  .contact-form input[type='text'],
  .contact-form textarea {
    width: 92%;
  }
}
.contact {
  padding-bottom: 2%;
}
/*--404--*/
.page-not-found h1 {
  font-size: 15em;
  color: #f0f0f0;
  text-align: center;
  text-shadow: 1px 1px 6px #aaa;
  -moz-text-shadow: 1px 1px 6px #aaa;
  -webkit-text-shadow: 1px 1px 6px #aaa;
  -o-text-shadow: 1px 1px 6px #aaa;
}
/*--responsive design--*/
@media (max-width: 1366px) {
  .wrap {
    width: 90%;
  }
}
@media (max-width: 1280px) {
  .wrap {
    width: 90%;
  }
}
@media (max-width: 1024px) {
  .wrap {
    width: 90%;
  }
  .top-nav ul li a {
    padding: 10px 15px;
  }
  .header-top .wrap {
    flex-direction: column; /* 改为垂直排列 */
    align-items: flex-start; /* Logo 和导航栏靠左 */
  }

  /* 设置导航栏显示换行 */
  .header-bottom nav ul {
    flex-direction: column; /* 垂直排列导航项 */
    text-align: left; /* 左对齐 */
  }

  .header-bottom nav ul li {
    width: 85%; /* 每个菜单项占满一行 */
    text-align: center;
  }

  .header-bottom nav ul li a {
    width: 100%; /* 使每个链接占满整个宽度 */
    text-align: center;
    padding: 10px 0;
  }

  .container nav ul li::after {
    left: 52%;
  }
}
@media (max-width: 800px) {
  .wrap {
    width: 90%;
  }
  .top-nav ul li a {
    padding: 10px 10px;
  }
  .search-bar input[type='text'] {
    width: 120px;
  }
  .span_1_of_4 {
    width: 22.8%;
  }
  .dc-head {
    width: 100%;
    float: none;
  }
  .header-top .wrap {
    flex-direction: column; /* 改为垂直排列 */
    align-items: flex-start; /* Logo 和导航栏靠左 */
  }

  /* 设置导航栏显示换行 */
  .header-bottom nav ul {
    flex-direction: column; /* 垂直排列导航项 */
    text-align: left; /* 左对齐 */
  }

  .header-bottom nav ul li {
    width: 100%; /* 每个菜单项占满一行 */
    text-align: center;
  }

  .header-bottom nav ul li a {
    width: 100%; /* 使每个链接占满整个宽度 */
    text-align: center;
    padding: 10px 0;
  }
}
@media (max-width: 640px) {
  .wrap {
    width: 90%;
  }
  .top-nav ul li a {
    padding: 10px 5px;
    font-size: 12px;
  }
  .search-bar input[type='text'] {
    width: 120px;
  }
  .span_1_of_4 {
    width: 22.8%;
  }
  .dc-head {
    width: 100%;
    float: none;
  }
  .top-nav {
    padding-top: 1.6%;
  }
  .span_1_of_2 {
    width: 100%;
  }
  .about-topgrid1 {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .about-histore {
    float: none;
    width: 100%;
  }
  .about-services {
    width: 100%;
    float: none;
    margin-left: 0px;
  }
  .span_1_of_4 {
    width: 100%;
  }
  .span_1_of_services {
    width: 48%;
  }
}
@media (max-width: 480px) {
  .wrap {
    width: 90%;
  }
  .top-nav ul li a {
    padding: 10px 5px;
    font-size: 12px;
  }
  .search-bar input[type='text'] {
    width: 120px;
  }
  .span_1_of_4 {
    width: 22.8%;
  }
  .dc-head {
    width: 100%;
    float: none;
  }
  .top-nav {
    padding-top: 1.6%;
  }
  .span_1_of_2 {
    width: 100%;
  }
  .about-topgrid1 {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .about-histore {
    float: none;
    width: 100%;
  }
  .about-services {
    width: 100%;
    float: none;
    margin-left: 0px;
  }
  .span_1_of_4 {
    width: 100%;
  }
  .span_1_of_services {
    width: 48%;
  }
  .search-bar {
    float: none;
  }
  .top-nav {
    float: none;
    margin-bottom: 12px;
  }
  .search_box {
    float: none;
  }
  .search_box form input[type='text'] {
    padding: 5px;
  }
  .search_box form input[type='submit'] {
    background: url(../images/search-icon.png) no-repeat 0px 7px;
  }
}
@media (max-width: 320px) {
  .wrap {
    width: 90%;
  }
  .top-nav ul li a {
    padding: 10px 1px;
    font-size: 11px;
  }
  .search-bar input[type='text'] {
    width: 120px;
  }
  .span_1_of_4 {
    width: 22.8%;
  }
  .dc-head {
    width: 100%;
    float: none;
  }
  .top-nav {
    padding-top: 1.6%;
  }
  .span_1_of_2 {
    width: 100%;
  }
  .about-topgrid1 {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .about-histore {
    float: none;
    width: 100%;
  }
  .about-services {
    width: 100%;
    float: none;
    margin-left: 0px;
  }
  .span_1_of_4 {
    width: 100%;
  }
  .span_1_of_services {
    width: 100%;
  }
  .search-bar {
    float: none;
  }
  .top-nav {
    float: none;
    margin-bottom: 12px;
  }
  .search_box {
    float: none;
  }
  .search_box form input[type='text'] {
    padding: 5px;
  }
  .search_box form input[type='submit'] {
    background: url(../images/search-icon.png) no-repeat 0px 7px;
  }
  .logo {
    width: 43%;
  }
  .follow_icon li {
    margin-left: 2px;
    padding-top: 5%;
  }
  .header-bottom {
    padding: 10px 0;
  }
  .about-top {
    padding: 20px 0 0;
  }
}