/*
Theme Name: 云环定制主题
Theme URI: https://www.clighttech.com/
Author: Jeff 
Description: 根据客户定制开发
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: 收费
Text Domain: 云环
Tags: 云环定制
*/
/* ====================== 头部导航样式 ====================== */
.header {
    width: 100%;
    height: 80px; /* 可根据需求调整高度 */
    line-height: 80px;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.container_1200.header-inner {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* 左上角logo + 公司名称 */
.logo-box {
    float: left;
    height: 100px;
    line-height: 100px;
}

.logo-box a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.logo-img {
    height: 50px; /* 可调整logo高度 */
    width: auto;
    margin-right: 12px;
    vertical-align: middle;
}

.company-name {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    vertical-align: middle;
}

/* 导航菜单容器：居中 */
.nav-box {
    float: right;
    height: 80px;
    line-height: 80px;
}

/* 导航菜单：横向排列 */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 核心：横向排列 */
    align-items: center;
    justify-content: center;
}

.nav-menu > li {
    position: relative;
    float: left;
    margin: 0 20px; /* 菜单项间距，可调整 */
}

.nav-menu > li > a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu > li > a:hover {
    color: #007bff; /*  hover颜色，可自定义 */
}

/* 子菜单样式（适配你现有的多级菜单） */
.nav-menu .sub-menu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 180px;
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: none;
    z-index: 999;
}

.nav-menu .sub-menu li {
    line-height: 40px;
    height: 40px;
    padding: 0 15px;
    border-bottom: 1px solid #f5f5f5;
}

.nav-menu .sub-menu li a {
    color: #666;
    text-decoration: none;
    display: block;
}

.nav-menu .sub-menu li a:hover {
    color: #007bff;
}

/* 鼠标悬浮显示子菜单 */
.nav-menu > li:hover .sub-menu {
    display: block;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ==================== 首页大图Banner样式（不改动PHP结构版） ==================== */
/* 外层容器：全屏宽度，控制整体尺寸，隐藏溢出 */
.shouye {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* 控制Banner最大高度，数值可按需调整，推荐550-650px */
    max-height: 800px;
    background-color: #f0f4f8; /* 兜底背景色，避免加载空白 */
}

/* 图片容器：相对定位，作为图片的承载容器 */
.shouyetu {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 核心：大图样式，实现铺满、等比、不拉伸的Banner效果 */
.shouyetu-img {
    /* 宽度100%占满屏幕，高度自适应 */
    width: 100%;
    height: auto;
    /* 核心：保持图片原始比例，裁剪超出部分，绝对不拉伸变形 */
    object-fit: cover;
    object-position: center center;
    /* 块级元素，消除默认行内间隙 */
    display: block;
    /* 限制最大高度，和外层容器保持一致 */
    max-height: 800px;
}

/* ==================== 响应式适配（全设备兼容） ==================== */
/* 平板端（768px-1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .shouye, .shouyetu-img {
        max-height: 500px !important;
    }
}

/* 移动端（<768px） */
@media screen and (max-width: 767px) {
    .shouye, .shouyetu-img {
        max-height: 380px !important;
    }
}

/* ====================== 公司简介 ====================== */
/* 最外层容器：灰色背景+全屏宽度+内边距 */
.shouyejianli {
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px; /* 上下40px，左右20px，给页面两边留白 */
    background-color: #f0f0f0;
    box-sizing: border-box;
}

/* 内部内容容器：限制最大宽度+居中，解决宽屏内容过长问题 */
.shouyejianli .content-wrapper {
    max-width: 1200px; /* 核心：限制内容最大宽度，两边自动留白 */
    margin: 0 auto; /* 整体居中 */
    overflow: hidden; /* 清除浮动 */
    padding: 30px 20px;          /* 必须加内边距，背景才能撑开 */
    display: flow-root;           /* 最强清除浮动，永不塌陷 */
}

/* 标题样式 */
.shouyejianli .bq h2 {
    text-align: center;
    font-size: 42px; /* 优化字号，避免过大 */
    margin: 0 0 30px 0;
    color: #0066fe;
}

/* 图片+文字父容器 */
.shouyejianli .bq-photo {
    width: 100%;
    overflow: hidden; /* 清除浮动 */
    display: flex; /* 用flex替代float，布局更稳定 */
    align-items: flex-start; /* 顶部对齐 */
    gap: 30px; /* 图片和文字之间的间距 */
}

/* 图片：固定比例+居中 */
.shouyejianli .bq-photo > img {
    width: 45%; /* 图片占45%宽度 */
    height: auto;
    object-fit: contain; /* 保持图片比例，不裁剪 */
    flex-shrink: 0; /* 禁止压缩 */
}

/* 文字容器：占剩余宽度 */
.shouyejianli .bq-text {
    flex: 1; /* 自动占满剩余宽度 */
}

/* 段落文本：优化字号+行高+排版 */
.shouyejianli .bq-text p {
    font-size: 15px; /* 优化字号，更易读 */
    line-height: 1.8;
    color: #333;
    margin: 0;
    text-align: justify; /* 两端对齐，排版整齐 */
}



/* ====================== 响应式适配：手机端自动堆叠 ====================== */
@media screen and (max-width: 768px) {
    .shouyejianli .bq-photo {
        flex-direction: column; /* 垂直堆叠 */
        gap: 20px;
    }
    .shouyejianli .bq-photo > img {
        width: 100%; /* 图片全屏 */
        max-width: 500px;
        margin: 0 auto; /* 图片居中 */
    }
    .shouyejianli .bq h2 {
        font-size: 32px;
    }
    .shouyejianli .bq-text p {
        font-size: 16px;
    }
}

.biaoqian {
    width: 100%;
    display: flex;
    align-items: center;      /* 横线与文字垂直居中 */
    gap: 20px;                 /* 线和文字的间距 */
    margin: 30px 0;
}

/* 左侧横线 */
.biaoqian::before {
    content: "";
    flex: 0.5;                   /* 横线自动占满左侧所有宽度 */
    height: 5px;               /* 线条粗细 */
    background: #003077;       /* 截图深蓝色 */
}

/* 右侧横线 */
.biaoqian::after {
    content: "";
    flex: 0.5;                   /* 横线自动占满左侧所有宽度 */
    height: 5px;               /* 线条粗细 */
    background: #003077;       /* 截图深蓝色 */
}

/* 文字样式 */
.carousel-title {
    font-size: 38px;
    font-weight: bold;
    color: #2b4b90;            /* 和线条同色 */
    margin: 0;
    white-space: nowrap;        /* 文字不换行 */
}

/* ====================== 产品展示 ========== */
/* 轮播整体：灰色背景 + 全屏宽度 */
.lunbo {
    width: 100%;
    background: #f0f0f0;
    padding: 30px 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* 标题居中 */
.carousel-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 42px;
    color: #0066fe;
}

/* 轮播主体 */
.image-carousel {
    position: relative;
    width: 100%;
}

/* 隐藏外部超出的图片 */
.carousel-wrapper {
    width: 100%;
    overflow: hidden;
}

/* 图片横向排列 */
.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    width: 100%;
}

/* 一次显示 3 张 */
.carousel-item {
    width: 33.333%;
    flex-shrink: 0;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 图片自适应 */
.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* 左右箭头 */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

/* ====================== 联系我们 ====================== */
.lxwm {
  width: 100%;
  background-color: #f0f0f0; /* 灰色背景 */
  padding: 30px 20px;
  box-sizing: border-box;
}

/* 标题样式（蓝色） */
.lxwm h2 {
  text-align: center;
  font-size: 42px;
  color: #0066fe; /* 蓝色 */
  margin: 0 0 25px 0;
}

/* 布局容器：左图 + 右文 */
.lxwm-photo {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* 左侧图片 */
.lxwm-photo img {
  width: 45%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* 右侧文本区域 + 背景图（透明度100%） */
.lxwm-text {
  flex: 1;
  padding: 25px;
  font-size: 18px;
  line-height: 2;
  color: #0066fe; /* 蓝色 */

  /* 透明度 100%（完全不透明，就是正常显示） */
  opacity: 1;
}

/* 手机端自动变成：上图下文 */
@media (max-width: 768px) {
  .lxwm-photo {
    flex-direction: column;
  }
  .lxwm-photo img {
    width: 100%;
  }
  .lxwm h2 {
    font-size: 32px;
  }
}

/* ====================== 底部样式 ========== */
/* 页脚整体：黑色背景，白色文字，居中 */
#footer {
  background-color: #000;
  color: #fff;
  padding: 25px 0;
  text-align: center;
  font-size: 14px;
}

/* 页脚菜单 */
#footer .footer-menu {
  margin-bottom: 12px;
}

#footer .footer-menu a {
  color: #fff;
  text-decoration: none;
  margin: 0 15px;
}

/* 鼠标悬停菜单变蓝色 */
#footer .footer-menu a:hover {
  color: #0066fe;
}

/* 版权文字 */
#footer .copyright {
  color: #fff;
}

/* ====================== 关于我们页面========== */

/* 图片容器：溢出隐藏 */
.about-photo {
    width: 100%;
    overflow: hidden; /* 核心：溢出隐藏 */
    display: block;
}

/* 图片自适应，不超出容器 */
.about-photo img {
    width: 100%;
    height: auto;
    display: block;
}

/* 父容器：灰色背景 + 左右横向布局 */
.about-box {
  width: 100%;
  background-color: #f0f0f0; /* 灰色背景 */
  padding: 12px 20px;
  box-sizing: border-box;
  display: flex;           /* 横向排列 */
  justify-content: space-between; /* 左右分开 */
  align-items: center;      /* 垂直居中 */
}

/* 左侧：从最左边开始排列 */
.about-1 {
  color: #333;
  font-size: 16px;
  text-align: left;
}

/* 右侧：文字靠最右边 */
.about-2 {
  text-align: right;
}

/* 右侧链接默认白色 */
.about-2 a {
  color: #000000;
  text-decoration: none;
  margin-left: 10px; /* 链接间距 */
}

/* 鼠标悬停变蓝色 */
.about-2 a:hover {
  color: #0066fe;
}

/* 父容器：横向排列 + 溢出隐藏 */
.about-content {
  width: 100%;
  max-height: 490px;
  display: flex;        /* 横向排列 */
  align-items: flex-start; /* 顶部对齐 */
  overflow: hidden;     /* 溢出容器隐藏 */
  gap: 0;
  box-sizing: border-box;
  background-color: #f0f0f0; /* 灰色背景 */
  
}

/* 图片容器占 50% 宽度 */
.about-photo1 {
  width: 50%;
  overflow: hidden;
  height: auto;
}

/* 图片自适应容器，不拉伸 */
.about-photo1 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* 图片自适应填满 */
}

/* 文本容器占剩余 50% */
.about-text {
  width: 50%;
  padding: 0 15px;    /* 文字左边留一点间距，更美观 */
  box-sizing: border-box;
}

/* 文本字号 16px */
.about-text p {
  font-size: 16px;
  line-height: 1.7;   /* 行高优化，更好看 */
  margin: 0;
  color: #333;
}

.about-title{
    width: 100%;
    background-color: #f0f0f0;
}

/* 容器：全屏宽度 + 居中 */
.about-us {
  width: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

/* 图片：缩小到 150px + 不变形 */
.about-us img {
  width: 350px;
  height: auto;
  display: block;
}

/* ====================== 企业荣誉页面========= */

.rongyu{
    width: 100%;
    background-color: #f0f0f0; /* 浅灰色背景 */
    padding: 40px 20px; /* 上下内边距，左右留白 */
    box-sizing: border-box;
}
/* ====================== 企业荣誉页面========= */

/* 1. 大容器：灰色背景 */
.wenhua-content {
    width: 100%;
    background-color: #f0f0f0; /* 浅灰色背景 */
    padding: 40px 20px; /* 上下内边距，左右留白 */
    box-sizing: border-box;
}

/* 3. 标题容器：居中 */
.wenhua-title {
    width: 100%;
    text-align: center; /* 内容居中 */
    max-width: 800px; /* 限制最大宽度，美观 */
    margin: 0 auto; /* 真正居中 */
}

/* 4. 内容块：居中 */
.wenhua-text {
    margin-bottom: 20px; /* 模块之间的间距 */
}

/* 5. 标题 H3：靠左（保持你要的效果） */
.wenhua-text h3 {
    text-align: left;
    font-size: 22px;
    color: #333;
    margin: 0 0 10px 0;
}

/* 6. 正文 P：18px，居中（按你要求） */
.wenhua-text p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    text-align: justify; /* 两端对齐，排版整齐 */
    margin: 0;
}


.shiji-text {
  width: 100%;
  max-width: 1200px;   /* 限制宽度，避免文字拉太宽 */
  margin: 0 auto;      /* 核心：让容器居中 */
  padding: 20px;       /* 内边距，更美观 */
  box-sizing: border-box;
}
/* ====================== 联系我们页面========= */
.lxwm-1{
    width: 100%;
    height: 300px; /* 可根据你想要的Banner高度调整，这里给一个合适的默认值 */
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.lxwm-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心属性：按比例裁剪，完美填满容器，不变形 */
    display: block;
    object-position: center; /* 图片居中裁剪，保证主体内容可见 */
    max-width: 100%;
}

/* 大容器：灰色背景 + 居中布局 */
.lxwm {
  width: 100%;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 图片和文字之间的间距 */
  padding: 40px 20px;
  box-sizing: border-box;
  flex-wrap: wrap; /* 手机端自动换行 */
  /* 新增：让子元素整体居中 */
  max-width: 1200px; /* 限制内容最大宽度，居中显示 */
  margin: 0 auto; /* 容器自身居中 */
}

/* 左侧图片容器 */
.lxwm-photo {
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 地图图片放大，适配你的需求 */
.lxwm-photo img {
  width: 500px; /* 从400px放大到500px，按需可继续调大 */
  height: 375px; /* 按原图比例放大（4:3），防止变形 */
  display: block;
}

/* 右侧文字内容容器 */
.lxwm-content {
  display: flex;
  flex-direction: column;
}

/* 每一行信息：标签+内容 */
.lxwm-text {
  display: flex;
  margin-bottom: -25px;
}

/* 左侧标签：黑色背景 */
.lxwm-text .label {
  width: 120px;
  background-color: #0400ff;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  padding: 15px 10px;
  border: 1px solid #f0f0f0;
}

/* 右侧内容 */
.lxwm-text .value {
  flex: 1;
  background-color: #f0f0f0;
  color: #000000;
  font-size: 18px;
  padding: 15px 20px;
  border: 1px solid #eee;
}

.lxwm-2{
    width: 100%;
    background-color: #f0f0f0;
}

.lxwm3-text {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.lxwm3-text h2 {
  font-size: 26px;
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-item {
  margin-bottom: 1rem;
}

.form-item label {
  display: block;
  margin-bottom: 0.5rem;
}

.required {
  color: red;
}

/* 输入框放大 1.5 倍 */
.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="tel"] {
  width: 150%;
  max-width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 内容框允许 向左+向下 任意拉伸 */
.form-item textarea {
  width: 150%;
  max-width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  box-sizing: border-box;
  resize: both; /* 这里改成 both = 允许左右+上下拉伸 */
}

.form-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.form-buttons button {
  padding: 0.7rem 1.8rem;
  border: none;
  cursor: pointer;
}

.form-buttons button[type="submit"] {
  background: #000;
  color: #fff;
}

.form-buttons button[type="reset"] {
  background: #666;
  color: #fff;
}

/* === 大容器：控制新闻列表的宽度 === */
.news-card-container {
    max-width: 1200px; /* 整个列表的宽度 */
    margin: 50px auto; /* 居中显示 */
    padding: 0 20px;
}

/* === 单张新闻卡片：横向排列 === */
.news-card {
    display: flex; /* 关键：让左侧信息和右侧按钮在同一行 */
    justify-content: space-between; /* 关键：左对齐，右对齐按钮 */
    align-items: center; /* 垂直居中 */
    padding: 30px 0; /* 上下内边距 */
    border-bottom: 1px solid #eee; /* 加一条分割线，区分每篇 */
}

/* ================== 新闻中心 ================= */
/* 外层大容器 */
.wenzhang {
    background-color: #f0f0f0; /* 整体灰色背景 */
    padding: 40px 20px;
}

/* 新闻列表容器，控制整体宽度并居中 */
.news-card-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 卡片之间的间距 */
}

/* 单条新闻卡片 */
.news-card {
    background-color: #fff;
    display: flex;
    justify-content: space-between; /* 左信息 + 右按钮 */
    align-items: center;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* 轻微阴影，和截图一致 */
    position: relative;
}

/* 如果你要加左侧图片，可以这样写：
.news-card::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 100px;
    background: url(图片地址) center / cover no-repeat;
}
然后给 .news-info 加 padding-left: 130px; 即可。
*/

/* 左侧文字区域 */
.news-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 标题样式 */
.news-title {
    font-size: 22px;
    margin: 0;
}
.news-title a {
    color: #0066cc;
    text-decoration: none;
}
.news-title a:hover {
    text-decoration: underline;
}

/* 日期样式 */
.news-date {
    font-size: 16px;
    color: #666;
    margin: 0;
}

/* 摘要文字 */
.news-excerpt {
    font-size: 16px;
    color: #333;
    margin: 0;
}

/* 右侧“了解更多” */
.news-more a {
    font-size: 16px;
    color: #0066cc;
    text-decoration: none;
}
.news-more a:hover {
    text-decoration: underline;
}

/* 分页居中 */
.page-nav {
    margin-top: 30px;
    text-align: center;
}
.page-nav a,
.page-nav span {
    margin: 0 5px;
    font-size: 16px;
    color: #0066cc;
    text-decoration: none;
}
.page-nav .current {
    color: #333;
    font-weight: bold;
}