@import url('styles-text.css');

/* ********************通用的样式***************************** */
body {
  font-size: 18px;
  /* Default font size */
}

p {
  line-height: 30px;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 30px;
  font-weight: lighter;
  font-stretch: condensed;
  text-transform: capitalize;
}

/* ********************根据华为首页定义cotainer宽度***************************** */
/* 屏幕宽度在1200px到1680px之间时，container的宽度为屏幕宽度的97% */
@media (min-width: 1200px) and (max-width: 1680px) {
  .container {
    width: 97%;
  }
}

/* 屏幕宽度大于1680px时，container的宽度为1430px */
@media (min-width: 1680px) {
  .container {
    width: 1430px;
  }
}


/* ********************根据华为首页定义cotainer宽度***************************** */

/* ********************设置折叠菜单背景色为白色***************************** */

/* 小屏幕时的背景渐变 */
@media (max-width: 767px) {
  .navbar-collapse {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);

  }
}

/* 如果你想修改菜单项的文本颜色，也可以添加以下代码 */
.navbar-collapse .navbar-nav>li>a {
  color: #333;
  /* 设置文本颜色，例如深灰色 */
}

/* 修复折叠状态下的边框和阴影 */
.navbar-collapse.in {
  box-shadow: none;
  /* 如果你不希望折叠时有阴影 */
}

/* 额外设置折叠菜单的链接在悬停时的颜色 */
.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus {
  background-color: #f8f8f8;
  /* 悬停时背景颜色 */
  color: #000;
  /* 悬停时文本颜色 */
}

/* ********************设置折叠菜单背景色为白色***************************** */

/* 大屏幕（md及以上） */
@media (min-width: 992px) {
  h1 {
    margin-top: 60px;
  }
}

/* 中小屏幕（sm和md） */
@media (max-width: 991px) {
  h1 {
    margin-top: 30px;
  }
}



/* ********************定义表格头单元格样式***************************** */

th {
  text-align: center;
  background-color: #FF0000 !important;
  color: #fff;
}

th a {
  color: white;
}

th a:hover {
  color: #e0e0e0;
}

thead th {
  vertical-align: middle !important;
}

td {
  vertical-align: middle !important;
}

/* ********************定义表格头单元格样式***************************** */

#lk_about,
#lk_hot,
#lk_link {
  padding: 20px 0;
}

#lk_about .title,
#lk_hot .title,
#lk_link .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 15px;
}

A:link img {
  display: block;
  overflow: hidden;
  transform: scale(1.00);
  transition: transform 0.3s ease;
}

A:link img:hover {
  transform: scale(1.05);
  transition: 0.5s all ease-in-out;
}



A:hover {
  COLOR: #FB0003;
  TEXT-DECORATION: none;
}

/* 特定图片悬停时不放大 */
A:link img:hover .no-scale {
  transform: none;
}


.no-overflow {
  overflow: hidden;
  position: relative;
}

.caption h3 {
  text-align: center;
}

/* ********************视频播放比例***************************** */
.embed-responsive-9by16 {
  padding-bottom: 177.78%;
  /* 100 / 9 * 16 */
}

.video-caption {
  text-align: center;
  font-size: 16px;
  color: #000;
  margin-top: 10px;
}

.row>div h4,
.watermark h4,
#lk_fluid .row>div h4,
#lk_featured .row>div h4,
#lk_seamless .row>div h4 {
  text-align: center;
  /* 让文本居中 */
  position: absolute;
  /* 使文本能够绝对定位 */
  bottom: 15px;
  /* 距离底部 20px */
  left: 50%;
  /* 居中 */
  transform: translateX(-50%);
  /* 确保居中对齐 */
  padding: 15px 15px;
  /* 内边距 */
  color: transparent;
  /* 颜色初始为透明 */
  -webkit-text-fill-color: white;
  /* 使用白色填充文本（透明的） */
  font-weight: 500;
  /* 字体加粗 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 添加半透明黑色背景 */
  transform: translateX(-50%);
  border-radius: 5px;
  /* 添加5px的倒角 */
}




.ellipse_bg {
  text-align: center;
  position: absolute;
  bottom: 5px;
  left: 50%;
  padding: 20px 50px;
  color: initial;
  /* 使用默认字体颜色 */
  font-weight: 500;
  background-color: white;
  /* 设置背景色为白色 */
  border-radius: 10px;
  /* 添加 10px 的圆角边框 */
  box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2), 5px 5px 10px rgba(0, 0, 0, 0.2), 5px -5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(0, 0, 0, 0);
  /* 添加四个方向的投影效果 */
  transform: translateX(-50%);
}

.padding-bottom-20 {
  padding-bottom: 20px;
  margin-bottom: 20px;
}


/* ********************通用的样式***************************** */
/* 注册按钮样式 */
.btn-regist {
  color: #ffffff;
  background-color: #0AB4F7;
}

.btn-regist:hover,
.btn-regist:focus,
.btn-regist:active,
.btn-regist.active,
.open .dropdown-toggle.btn-regist {
  color: #ffffff;
  background-color: #086DF2;
}

.btn-regist:active,
.btn-regist.active,
.open .dropdown-toggle.btn-regist {
  background-image: none;
}

.btn-regist.disabled,
.btn-regist[disabled],
fieldset[disabled] .btn-regist,
.btn-regist.disabled:hover,
.btn-regist[disabled]:hover,
fieldset[disabled] .btn-regist:hover,
.btn-regist.disabled:focus,
.btn-regist[disabled]:focus,
fieldset[disabled] .btn-regist:focus,
.btn-regist.disabled:active,
.btn-regist[disabled]:active,
fieldset[disabled] .btn-regist:active,
.btn-regist.disabled.active,
.btn-regist[disabled].active,
fieldset[disabled] .btn-regist.active {
  background-color: #0AB4F7;
}

.btn-regist .badge {
  color: #0AB4F7;
  background-color: #ffffff;
}

/* 注册按钮样式 */
/* ********************通用的样式***************************** */


/* ********************设置图片水印***************************** */
/* 样式用于添加水印 */
.watermark {
  position: relative;
  align-items: center;
  text-align: center;

}

.watermark img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 鼠标悬停时的水印样式 */
.watermark:hover::before {
  content: "WhatsApp:+86 13916927033";
  transform: translate(-50%, -50%);
  position: absolute;
  top: 20%;
  left: 50%;
  color: rgba(255, 0, 0, 0.9);
  font-size: 20px;
  /* 修改文字大小 */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);

}

/* ********************设置图片水印***************************** */
/* ********************设置ToTOP样式***************************** */

#toTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

#toTopBtn:hover {
  opacity: 1;
}

/* ********************设置ToTOP样式***************************** */
/* ********************设置DIV背景色透明效果***************************** */
.transparent-background {
  background-color: rgba(255, 255, 255, 0.8);
  /* White background with 80% opacity */
}

/* ********************设置DIV背景色透明效果***************************** */

/* ********************头部的样式***************************** */

#lk_header .top-bar {
  height: 40px;
  line-height: 39px;
  background: #000000;
  color: #ffffff;
  font-size: 0.8em;
}

/* #lk_header .top-bar .container .row>div+div{

} */

#lk_header .top-bar a {
  position: relative;
  color: #eeeeee;
}

#lk_header .top-bar  a img {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -65px;
  margin-top: -10px;
  z-index: 9999;
}

#lk_header .top-bar a:hover img {
  display: block;
}

#lk_header .top-bar a img {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -65px;
  margin-top: -10px;
  z-index: 9999;
}

#lk_header .top-bar a:hover img {
  display: block;
}

#lk_header .navbar  {
  margin-bottom: 0px; 
  min-height: 80px; 
  background-color: #ffffff; 
  padding-top: 5px; 
}

#lk_header .navbar .dropdown-menu {
  padding: 10px;
}
@layer utilities {
      .content-auto {
        content-visibility: auto;
      }
 /* 导航栏链接悬停效果 */
#lk_header .navbar-collapse .navbar-nav a:hover { 
        border-bottom: 2px solid red;
        background-color: transparent !important; /* 清除背景色 */
      }
    }
#lk_header .navbar-collapse .navbar-nav .dropdown-menu> li > a {
  padding-bottom: 10px; /* 减小内边距，使文本与下划线更接近 */
  padding-top: 10px; /* 减小内边距，使文本与下划线更接近 */;
  position: relative;
}

/* 自定义样式，使固定的导航栏居中显示 */
.affix {
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
  /* 过渡效果 */
}

.affix .navbar-nav {
  justify-content: center;
}


/* ********************头部的样式***************************** */

/* ********************焦点图的样式***************************** */

/* 背景图片居中 */
#lk_carousel .item {
  background: no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
}

/* 媒体判断 */
@media screen and (min-width:800px) {
  #lk_carousel .item {
    height: 410px;
  }
}

/* 确保图片周围没有额外的行高 */
.carousel-inner .item {
  margin: 0;
  padding: 0;
}



/* ********************焦点图的样式***************************** */

/* ********************面包屑的样式***************************** */
#lk_bread {
  background-color: #f5f5f5;
}

#lk_bread ul {
  margin: 0;
}

#lk_bread ul li {
  line-height: 40px;

}

/* ********************面包屑的样式***************************** */
/* ********************产品标题的样式***************************** */


#lk_title {
  position: relative;  
  color: #fff;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 410px;
  background-size: cover;
  transition: background-color 1s ease;
}

#lk_title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
  pointer-events: none;
}

#lk_title>* {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
}

#lk_title div {
  overflow: hidden;
}

/* 为旧版浏览器添加Flexbox前缀支持 */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

  /* IE10+ 特定样式 */
  #lk_title {
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

#lk_title h1 {
  margin: 10px 0;
  font-size: 6rem; /* 96px */
  font-weight: 300;
  line-height: 1.2;
}

/* ********************产品标题的样式***************************** */

/* ********************产品简介的样式***************************** */
#lk_brief {
  padding-top: 180px;
  background: url("../img/snake-slider.jpg") top center no-repeat, url("../img/email-bg.png") right center no-repeat;

}

@media screen and (max-width: 1170px) {
  #lk_brief {
    background: none;
    /* Remove background images on screens smaller than 768px */
  }
}

#lk_brief h1 {
  padding: 10px 0;
  margin: 20px 0;
  font-stretch: condensed;
  background-image: url("../../img/background_line_red.jpg");
  background-position: top left;
  background-repeat: no-repeat;
}

.md-30 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.blank {
  margin: 30px 0;
}

.blank_50 {
  padding: 2vw 0;
}


.lk_h1 {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 20px;
  /* 确保背景图片有足够空间 */
}

.lk_h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  /* 背景图片对齐到 h1 标签的底部 */
  left: 50%;
  /* 将背景图片相对于 h1 标签中心点对齐 */
  transform: translateX(-50%);
  /* 使背景图片居中对齐 */
  width: 100%;
  /* 设置背景图片宽度等于 h1 宽度 */
  height: 2px;
  /* 调整背景图片的高度 */
  background-image: url("../../img/background_line_red.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  /* 确保背景图片左下角对齐 */
  background-size: contain;
  /* 调整背景图片大小，适应 h1 标签 */
  z-index: 3;
  /* 使背景图片位于文本的后面 */
}



/* ********************产品简介的样式***************************** */

/* ********************产品详细的样式***************************** */
#lk_details,
#lk_table {
  padding: 2vw 0;
  background-attachment: fixed;
  background-position: top center;
}

#lk_details div {
  overflow: hidden;
}

#lk_details h1 {
  margin-top: 30px 0;
  /* 确保在#lk_details下h1有特定的margin-top */

}

#lk_details lk_banner {
  margin-top: 20px 0;
  /* 确保在#lk_details下h1有特定的margin-top */

}

#lk_details .container-fluid {
  padding-bottom: 30px !important;
}

/* ********************让图片左下角出现一个三角形***************************** */
.image-triangle {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* 确保图片放大时不会溢出边界 */
}

@media (max-width: 991px) {
  .image-triangle {
    padding: 0 !important;
  }
}

.image-triangle img {
  display: block;
  /* 确保没有底部空白 */
  width: 100%;
  /* 图片宽度充满容器 */
  height: auto;
  /* 保持图片的宽高比 */
  border-bottom-left-radius: 30%;
  /* 左下角的圆角 */
}



/* ********************让图片左下角出现一个三角形***************************** */



/* ********************全屏产品的样式***************************** */
#lk_fluid {
  background: #eeeeee;
  background-position: center bottom;
  /* Center the image and align it to the bottom */
  background-repeat: repeat-x;
  /* Repeat the image horizontally */
}

#lk_fit>.container-fluid>.row>div {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* ********************全屏产品的样式***************************** */

#masonry-grid {
  display: flex;
  flex-wrap: wrap;
}


.item {
  margin-top: 7px;
  /* 你可以根据需要调整 */
  margin-bottom: 7px;
  /* 你可以根据需要调整 */
}


/* ********************左右两列等高***************************** */

#lk_fit>.row>div {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#lk_fit>[class*="container"]>.row>[class^="col-md-"]>img,
#lk_fit>[class*="container"]>.row>[class^="col-md-"]>a>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}


@media (min-width: 992px) {
  #lk_fit .row {
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
  }



  #lk_fit .pull-left {
    order: -1;
    /* 负数表示在 flex 容器中排列顺序向左偏移 */
  }

  #lk_fit .col-md-6 {
    flex: 0 0 50%;
    /* 设置每个 col-md-6 占据 50% 的宽度 */
  }

  #lk_fit .pull-right {
    margin-left: auto;
    /* 使用 margin-left: auto; 实现向右偏移 */
  }
}


.lk_fit_text {
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
}

.lk_fit_right {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* 大屏幕时应用的样式 */
.lk_fit_text,
.lk_padding {
  padding: 3vw !important;
}

/* 垂直居中 Vertically centered*/

#lk_vc .row {
  display: flex;
  flex-wrap: wrap;
  /* 确保在较小屏幕上也能正确换行 */
  margin-top: 15px;
  margin-bottom: 15px;
}


#lk_vc .row>div {
  overflow: hidden;
  justify-content: center;
  /* 垂直居中 */
}

.vc-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 垂直居中 */
  height: 100%;
  /* 确保有足够的高度来居中内容 */
}



/* 垂直居中 */
/* ********************左右两列等高***************************** */

/* 垂直居中开始 */
#flex-section .row,
#lk_brief .row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#flex-section .row p,
#lk_brief .row p {
  flex: 1 1 auto;
  /* 子元素根据内容自动调整宽度 */
  white-space: normal;
  /* 确保文本内容可以换行 */
  max-width: 100%;
  /* 限制最大宽度 */
}

.lk_flex .row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* 垂直居中结束 */
/* 保持 .row 内部图片的上下间距 */
#lk_equal-height .row {
  display: flex;
  flex-wrap: wrap;
  /* 确保在小屏幕下栅格仍然可以换行 */
}

/* 确保小图片的容器有正确的高度 */
#lk_equal-height .small-img-container {
  overflow: hidden;
  margin-bottom: 30px;
  /* 确保换行时的间距 */
}

/* 确保大图片容器的高度与小图片容器一致 */
#lk_equal-height .large-img-container,
#lk_equal-height .small-img-container {
  display: flex;
  align-items: stretch;
  /* 让栅格内容高度保持一致 */
}

/* 大图片的样式 */
#lk_equal-height .large-img {
  width: 100%;
  height: auto;
  /* 保证图片填满容器 */
  object-fit: cover;
  /* 保持图片比例并裁剪多余部分 */
  object-position: top;
  /* 从顶部裁剪 */
}

/* 小图片的样式 */
#lk_equal-height .small-img {
  width: 100%;
  height: auto;
}

/* 确保图片在小屏幕下显示为块级元素，避免换行后无间距 */
@media (max-width: 767px) {

  #lk_equal-height .large-img-container,
  #lk_equal-height .small-img-container {
    margin-top: 15px;
    /* 小屏幕下间距 */
    margin-bottom: 15px;
    /* 小屏幕下间距 */
  }

}

#lk_equal-height .row:nth-of-type(3) {
  margin-bottom: 15px;
  /* 小屏幕下间距 */

}

/* 如果需要，调整图片高度以保持一致 */
.large-img {
  height: auto;
  /* 可能需要调整，以保持适合的显示 */
}



/* ********************左右两列等高***************************** */
/* ********************产品详细的样式***************************** */

#lk_thumbnail,
#lk_application,
#lk_featured,
#lk_seamless,
#lk_dual-background {
  padding: 3vw 0;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}


/* 将相同的 .row 样式应用于多个 ID 
#lk_thumbnail .row,
#lk_application .row,
#lk_featured .row,
#lk_seamless .row,
#lk_dual-background .row {
    margin-top: -15px;
    margin-bottom: -15px;
}
*/
/* 将相同的列元素样式应用于多个 ID */
#lk_tt [class^="col-"],
#lk_thumbnail [class^="col-"],
#lk_application [class^="col-"],
#lk_featured [class^="col-"],
#lk_seamless [class^="col-"],
#lk_dual-background [class^="col-"],
#lk_details [class^="col-"] {
  padding: clamp(9px, 0.75vw, 15px);
}

#lk_tt [class^="col-"],
#lk_thumbnail [class^="col-"],
#lk_application [class^="col-"],
#lk_featured [class^="col-"],
#lk_seamless [class^="col-"],
#lk_dual-background [class^="col-"],
#lk_details .row {
  padding: -clamp(9px, 0.75vw, 15px) 0;
}

/* col-无边缘 ID */
.no-padding [class^="col-"] {
  padding: 0px;
}

.no-padding .row {
  padding: 0px;
}

#lk_thumbnail,
#lk_application,
#lk_featured,
#lk_seamless,
#lk_tt,
#lk_dual-background div {
  overflow: hidden;
}

/* ********************类似不锈钢板背景色***************************** */
/* Stainless Steel Background */
.stainless-steel-bg {
  background: linear-gradient(135deg, #e6e6e6 25%, #f2f2f2 25%, #f2f2f2 50%, #e6e6e6 50%, #e6e6e6 75%, #f2f2f2 75%, #f2f2f2 100%);
  background-size: 40px 40px;
  background-color: #f0f0f0;
  border: 1px solid #dcdcdc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.stainless-steel-bg {
  padding: 3vw 0;

}

/* Brushed Metal Effect */
.stainless-steel-bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.1) 0px,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px,
      transparent 2px);
  opacity: 0.2;
  z-index: 1;
}

/* Add a subtle gloss effect */
.stainless-steel-bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
  z-index: 2;
}

/* Section Content Styling */
.stainless-steel-bg .section-content {
  position: relative;
  z-index: 3;
  padding: 50px;
  color: #333;
}

/* ********************特色产品的样式***************************** */
#lk_featured {

  background-color: #F4F8FD;
  margin-bottom: 0px;

  background-repeat: repeat-x;
  background-position: center bottom;
  /* 从中间开始向两边重复 */
}

#lk_featured * {
  position: relative;
  z-index: 2;
  /* 保证内容显示在背景图片之上 */
}





/* ********************双背景色的样式 开始***************************** */
#lk_dual-background {
  position: relative;
  background: linear-gradient(-3deg, #f8f8f8 50%, #eeeeee 50%);
  /* 15deg is the angle of the gradient, you can adjust as needed */
  margin-bottom: 0px;

}

/* ********************双背景色的样式 结束***************************** */

/* ********************背景色倾斜样式 开始***************************** */
#lk_tt {
  background-color: #f0f0ff;
  /* 背景颜色 */
  clip-path: polygon(0 0,
      100% clamp(1%, 2%, 4%),
      /* 动态调整顶部倾斜角度 */
      100% 100%,
      0 clamp(96%, 98%, 99%)
      /* 动态调整底部倾斜角度 */
    );
  /* 定义斜边 */
  padding: clamp(3vw, 5vw, 10vw) 0;
  /* 使用 clamp() 动态调整 padding */
}

/* 保持图片等高开始 */
/* 解决方案2：使用CSS Grid布局实现左侧两张图片等高于右侧四张图片 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 15px;
}

/* 左侧两张大图 */
.left-large {
  grid-column: span 6;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 15px;
}

.left-large .img-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 右侧四张小图 */
.right-small {
  grid-column: span 6;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 15px;
}

/* 图片容器 */
.img-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 图片自适应容器并保持宽高比 */
.img-container img {
  width: 100%;
  flex: 1;
  object-fit: cover;
}

/* 标题文字居中 */
.img-container h4 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 991px) {
  .grid-container {
    display: block;
  }

  .left-large,
  .right-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 15px;
  }

  .right-small {
    grid-template-rows: auto;
  }
}

/* 保持图片等高结束 */

/* ********************背景色倾斜样式 结束***************************** */

/* ********************产品应用的样式***************************** */
#lk_application {
  background-image: url("/images/application-bg.webp");
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  margin-bottom: 0px;
}

#lk_application .text-muted {
  color: #ffffff;
  /* Set the color to white */
}

#lk_application a {
  color: #ffffff;
  /* Set the color to white */
}

#lk_application div {
  overflow: hidden;
}


/* ********************产品应用的样式***************************** */


/* ********************相关产品的样式***************************** */

#lk_thumbnail .row {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
}



#lk_thumbnail h2,
h3 {
  margin: 10px 0;
  font-weight: lighter;
  font-stretch: condensed;
  text-transform: capitalize;
}

#lk_thumbnail {
  background-image: url("../../img/thumbnail-bg.jpg");
  background-color: #f0f0f0;
  margin: 0px;
}

.row .caption {
  margin-bottom: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#lk_thumbnail div {
  overflow: hidden;
}

/* ********************H3浮现在黑色背景上***************************** */
.lk_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 确保内容不超出容器 */

}

.lk_wrapper a {
  display: block;
  position: relative;
  text-decoration: none;
  /* 去掉链接下划线 */
  cursor: pointer;
  /* 确保鼠标悬停时显示为手形状 */
}

.lk_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 裁剪多余的部分 */
  display: block;
  transition: transform 0.3s ease;
  /* 添加放大效果的过渡 */
  position: relative;
  z-index: 1;
  /* 确保图片在最底层 */
  transform-origin: bottom center;
  /* 从下边缘中心为基准放大 */
}

/* 图片悬浮时的放大效果 */
.lk_wrapper a:hover img {
  transform: scale(1.05);
  /* 放大效果 */
}

/* 添加渐变的黑色覆盖层，只覆盖到50%高度 */
.lk_wrapper a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 50%);

  z-index: 2;
  /* 覆盖在图片和文本之间 */
  transition: background 0.3s ease;
}

/* 鼠标悬停时增加黑色渐变层的透明度到70% */

.lk_wrapper a:hover:after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) 50%);
}

.lk_wrapper .text-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 3;
  /* 确保文字内容在最上层 */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* 添加过渡效果 */
}

.lk_wrapper h2 {
  color: #fff;
  font-size: 1.8em;
  font-weight: lighter;
  text-transform: capitalize;
  transition: transform 0.3s ease;
  /* 文字的过渡效果 */
}

.lk_wrapper h3 {
  color: #fff;
  font-size: 1.6em;
  font-weight: lighter;
  text-transform: capitalize;
  transition: transform 0.3s ease;
  /* 文字的过渡效果 */
}

.lk_wrapper p {
  margin: 0;
  color: #fff;
  display: none;
  /* 初始状态隐藏 */
}

/* 鼠标悬停时显示 p，并整体向上移动 */
.lk_wrapper:hover .text-content {
  transform: translateY(-20px);
  /* 向上移动的过渡 */
}

.lk_wrapper:hover p {
  display: block;
  /* 显示 p 元素 */
}

/* 处理 h3 和 p 的相对布局 */
.lk_wrapper .text-content:hover h3 {
  margin-bottom: 10px;
  /* 给 h3 增加间距，让 p 内容不会覆盖 h3 */
}

/* ********************H3浮现在黑色背景上***************************** */

/* ********************大屏banner***************************** */
.lk_banner {
  margin: 50px auto;
  /* Top and bottom margin of 50px, auto for horizontal centering */
  float: none;
  /* Ensure it doesn't float */
  max-width: 1920px;
  /* Limit the maximum width */
  position: relative;
  /* 保证子元素溢出时相对定位 */
  overflow: hidden;
  /* 使得内容不会突破容器的边界 */
}

.lk_banner img {
  display: block;
  height: auto;

}

.lk_banner a:hover img {
  transition: transform 0.3s ease-in-out;
  /* 过渡效果 */
  transform: scale(1.05);
  /* 悬浮时放大 */
}


/* ********************大屏banner***************************** */

#lk_seamless {
  background-image: url("../../img/seamless-tubes-bg.jpg");

  background-color: #F0F9FF;
  margin: 0px;
}

/* ********************相关产品的样式***************************** */

/* ********************特色产品的样式***************************** */
#lk_product {
  background-color: #f0f0f0;
  padding: 30px 0;
}

#lk_product div {
  overflow: hidden;
}


#lk_product .nav {
  font-size: 18px;
  font-weight: 600;
}

#lk_product .nav a {
  color: #999;
}

#lk_product .nav li.active a {
  border: none;
  background-color: transparent;
  border-bottom: 2px solid #0AB4F7;
  color: #000;

}

#lk_product .tab-content {
  padding-top: 20px;
}

#lk_product .pd-left {
  padding: 40px 0;
}

#lk_product #pd_one_1 {
  margin: 15px 0;
}

#lk_product #pd_one_2 {
  background-color: transparent;
}

#lk_product #pd_one_4 {
  margin: 15px 0;
}

#lk_product #pd_two_1 {
  padding: 100px 0;
}

#lk_product #pd_two_1 h1 {
  margin-bottom: 15px;
}

/* ********************特色产品的样式***************************** */

/* ********************热门课程的样式***************************** */

#lk_hot {
  padding-top: 200px;
  padding-bottom: 30px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 0, 0, 0.2)), url("../../img/hot-sales.jpg") center top no-repeat;
}

#lk_hot .lesson {
  padding: 15px 10px;
}

#lk_hot .lesson .media-left {
  width: 20%;
}

#lk_hot .lesson .media-body {
  width: 60%;
}

#lk_hot .lesson .media-right {
  width: 20%;
  text-align: center;
  vertical-align: middle;
  /* 垂直居中 */
  font-size: 16px;
}

/* 通过CSS变量控制旋转参数 */
/* logo */
/* 确保图片旋转效果生效 */
.navbar-brand .logo-hover {
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


/* 品牌文字样式 */
/* 更具体的选择器 */
.navbar-brand .brand-text {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.3em;  
  font-weight: 700;
  font-stretch: condensed;
  text-transform: capitalize;
}


/* ********************友情链接的样式***************************** */
#lk_link .logos {
  list-style: none;
  text-align: center;

}

#lk_link .logos li {
  display: inline;
  padding: 20px 20px;
}

#lk_link .logos li img {
  width: 130px;
}

/* ********************友情链接的样式***************************** */

/* ********************尾部的样式***************************** */
#lk_footer {
  width: 100%;
  /* height: 200px; */
  padding: 20px;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1)), url("../../img/footer_background.jpg") no-repeat center;
  /* background: rgba( 0, 0, 0, 0.8 ) ; */

  /* background-color: rgba( 186, 218, 85, 0.5 ); */
  /*  background:  url("../../img/footer_background.jpg") no-repeat center;*/
  -webkit-background-size: cover;
  background-size: cover;
  color: #fff;
  font-size: 16px;

}

#lk_footer ul {
  list-style: none;
}

#lk_footer .lk_footer_1,
#lk_footer .lk_footer_2 {
  padding: 10px;

  /* height: 160px; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#lk_footer .lk_footer_2 {
  border-left: 1px solid #666;
  border-right: 1px solid #666;
}

#lk_footer .lk_footer_1 li {
  line-height: 40px;
}

#lk_footer .lk_footer_1 li a {
  color: #fff;
}

#lk_footer .lk_footer_3 {
  padding: 10px 50px;
  /* height: 160px; */


}

#lk_footer .lk_footer_3 a {
  margin-right: 15px;
  text-decoration: none;
}




    .side-bar167 a,.chat-tips167 i {
    background-image: url(/images/167tupian.png);
    background-repeat: no-repeat;
}
.side-bar167 {
    width: 66px;
    position: fixed;
    bottom: 20px;
    right: 25px;
    font-size: 0;
    line-height: 0;
    z-index: 100;
}
.side-bar167 a {
    width: 66px;
    height: 66px;
    display: inline-block;
    background-color: #ff5400;
    margin-bottom: 2px;
}
.side-bar167 a:hover {
    background-color: #669fdd;
}
.side-bar167 .icon-qq167 {
    background-position: 0 -62px;
}
.side-bar167 .icon-chat167 {
    background-position: 0 -130px;
    position: relative;
}
.side-bar167 .icon-chat167:hover .chat-tips167 {
    display: block;
}
.side-bar167 .icon-blog167 {
    background-position: 0 -198px;
}
.side-bar167 .icon-mail167 {
    background-position: 0 -266px;
}
.side-bar167 .icon-totop {
    background-position: 0 -334px;
}
.chat-tips167 {
    padding: 20px;
    border: 1px solid #d1d2d6;
    position: absolute;
    right: 78px;
    top: -55px;
    background-color: #ffffff;
    display: none;
}
.chat-tips167 i {
    width: 9px;
    height: 16px;
    display: inline-block;
    position: absolute;
    right: -9px;
    top: 80px;
    background-position:-88px -350px;
}
.chat-tips167 img {
    width: 138px;
    height: 138px;
}