/*
Theme Name: Qbkj
Theme URI: http://www.cftzqinzhou.com
Author: 广西钦保网络科技有限公司
Description: 钦保科技官网主题（复刻原站布局与视觉）
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: qbkj
*/

/* ============ Design Tokens ============ */
:root {
  --color-primary: #0E326F;
  --color-blue: #06A4FE;
  --color-text-main: #131414;
  --color-text-normal: #606266;
  --color-text-sub: #999;
  --color-text-placeholder: #C0C4CC;
  --border: #F4F4F5;
  --container-width: 1280px;
}

/* ============ Global Reset ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  line-height: 1;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
  color: var(--color-text-normal);
  background: #fff;
  overflow-x: hidden;
}
li { list-style-type: none; }
a { color: var(--color-primary); text-decoration: none; }
img { max-width: 100%; border: 0; }
p { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }

.container {
  width: var(--container-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

/* ============ Header / Nav ============ */
header.site-header {
  background: var(--color-primary);
  height: 80px;
  position: relative;
  z-index: 100;
}
.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { cursor: pointer; display: flex; align-items: center; }
.logo img { height: 56px; width: auto; }
.nav {
  position: relative;
  display: flex;
  color: #fff;
  font-size: 18px;
  height: 100%;
}
.nav li {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  padding: 0 10px;
  margin: 0 20px;
  cursor: pointer;
}
.nav li:last-child { margin-right: 0; }
.nav li a { color: #fff; height: 100%; display: flex; align-items: center; }
.nav li:hover, .nav li:hover a { font-weight: 700; color: var(--color-blue); }
.nav li.active, .nav li.active a { color: var(--color-blue); font-weight: 700; }
.nav-underline {
  position: absolute;
  bottom: 0;
  display: block;
  height: 3px;
  background-color: var(--color-blue);
  transition: all .3s ease-out;
}

/* ============ Top Banner (inner page) ============ */
.top-banner { width: 100%; position: relative; }
.top-banner img.banner-img { width: 100%; display: block; }
.top-banner .txt {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  color: #fff;
  font-size: 78px;
  font-weight: 700;
  text-shadow: 2px 4px 4px rgba(14,50,111,.6);
  white-space: nowrap;
}

/* ============ Footer ============ */
footer.site-footer {
  background: #0e326f;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 20px;
  position: relative;
  overflow: hidden;
}
footer .bg1 { position: absolute; top: 0; left: 0; }
footer .bg2 { position: absolute; right: 0; bottom: 0; }
footer .footer-inner { position: relative; z-index: 1; }
footer .nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 10px;
}
footer .f-logo img { height: 50px; width: auto; }
footer .nav { display: flex; }
footer .nav li { font-size: 20px; padding: 20px 30px; cursor: pointer; }
footer .nav li:last-child { padding-right: 0; }
footer .nav li a { color: #fff; }
footer .nav li:hover a { color: var(--color-blue); }
footer .friendlink {
  display: flex;
  border-bottom: 1px solid rgba(196,196,196,.6);
  padding-bottom: 10px;
  margin-top: 10px;
}
footer .friendlink .label { width: 120px; color: #fff; }
footer .friendlink-list { flex: 1; }
footer .row { display: flex; flex-wrap: wrap; }
footer .row a { color: #fff; padding-bottom: 20px; font-size: 14px; }
footer .row a:hover { text-decoration: underline; }
footer .row a:nth-child(1), footer .row a:nth-child(2), footer .row a:nth-child(3) { width: 36%; }
footer .copyright {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  color: #c0c4cc;
  font-size: 14px;
}
footer .copyright p + p { padding-top: 10px; }
footer .copyright .beian { display: flex; align-items: center; flex-wrap: wrap; }
footer .copyright .beian span + span { padding-left: 40px; }
footer .copyright a { color: #c0c4cc; padding-left: 40px; }
footer .copyright a:hover { text-decoration: underline; }
footer .gongan { display: inline-flex; align-items: center; }
footer .gongan img { width: 18px; height: 18px; margin-right: 6px; }

/* ============ Homepage: Swiper / Carousel ============ */
.home-swiper { width: 100%; position: relative; overflow: hidden; }
.home-swiper .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.home-swiper .slide.active { opacity: 1; position: relative; }
.home-swiper .slide .banner-bg { width: 100%; display: block; }
.home-swiper .slide .banner-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.home-swiper .slide .banner-content img { width: 100%; }
.home-swiper .indicators {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.home-swiper .indicators button {
  width: 32px;
  height: 4px;
  border: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
}
.home-swiper .indicators button.active { background: #fff; }

/* ============ Homepage: Catchword (使命/愿景/价值观) ============ */
.catchword-wrap {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.catchword-wrap li {
  border-radius: 10px;
  overflow: hidden;
  width: 370px;
  flex: 1;
  background: #fff;
}
.catchword-wrap li .img { height: 330px; width: 100%; overflow: hidden; position: relative; }
.catchword-wrap li .img img { height: 100%; width: 100%; object-fit: cover; transition: all .6s ease-in-out; position: absolute; left: 0; top: 0; }
.catchword-wrap li:hover { box-shadow: 0 3px 6px #00000017; }
.catchword-wrap li:hover .img img { transform: scale(1.06); }
.catchword-wrap li:hover .txt .title { background: rgba(0,114,242,.8); }
.catchword-wrap .txt { position: relative; }
.catchword-wrap .txt .title {
  position: absolute;
  left: 0;
  top: -68px;
  background: rgba(0,114,242,.6);
  color: #fff;
  width: 100%;
  height: 68px;
  line-height: 68px;
  padding-left: 30px;
  font-size: 28px;
  transition: all .6s ease-in-out;
  z-index: 2;
}
.catchword-wrap .txt .content {
  position: relative;
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-normal);
  font-size: 28px;
  border: 1px solid #e6f1fe;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

/* ============ Homepage: 我们的产品 (Product Carousel) ============ */
.container-title {
  font-size: 30px;
  color: var(--color-primary);
  text-align: center;
  margin: 90px 0 60px;
  position: relative;
  font-weight: 700;
}
.container-title:after {
  content: "";
  position: absolute;
  width: 50px;
  border-bottom: 4px solid #00a5ff;
  left: 50%;
  transform: translate(-50%);
  bottom: -12px;
  display: block;
}
.product-carousel { position: relative; }
.product-viewport { overflow: hidden; }
.product-track { display: flex; transition: transform .5s ease-in-out; }
.product-track .slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px;
  border-radius: 10px;
  border: 2px solid var(--border);
  box-sizing: border-box;
}
.product-track .slide .title { font-size: 42px; color: var(--color-primary); font-weight: 700; }
.product-track .slide .content { padding: 40px 0 20px; font-size: 16px; line-height: 1.5; color: var(--color-text-normal); }
.product-track .slide .content p { text-indent: 32px; }
.product-track .slide a { font-size: 16px; }
.product-track .slide a:hover { text-decoration: underline; }
.product-track .slide .img-wrap { margin-top: 60px; position: relative; width: 100%; }
.product-track .slide .img-wrap .keys {
  position: absolute;
  left: 180px;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 2px 2px 2px rgba(14,50,111,.8);
}
.product-track .slide .img-wrap .keys li {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  list-style-type: disc;
  padding: 20px 0;
}
.product-track .slide img { width: 100%; }
.product-indicators {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.product-indicators li {
  width: 30px;
  height: 4px;
  background: #c0c4cc;
  cursor: pointer;
  transition: background .3s;
}
.product-indicators li.active { background: var(--color-primary); }

/* ============ News / Info List ============ */
.news { padding-bottom: 80px; }
.news .list { min-height: 600px; padding: 20px 0 40px; }
.news .list li { padding-top: 24px; }
.news .list li:hover .title { color: var(--color-primary); }
.news .list .line { padding-top: 24px; border-bottom: 1px solid var(--border); }
.news .list .title {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: #333;
  font-weight: 700;
  gap: 20px;
}
.news .list .title .type { font-weight: 400; }
.news .list .title .type.color1 { color: #333; }
.news .list .title .type.color2 { color: #fc4729; }
.news .list .title .time { font-weight: 400; color: var(--color-text-sub); font-size: 15px; white-space: nowrap; }
.news .list .summary { color: var(--color-text-normal); font-size: 15px; padding-top: 20px; line-height: 1.6; }
.news .pagination { display: flex; justify-content: center; margin-top: 20px; }
.news .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin: 0 4px;
  border: 1px solid var(--border);
  color: var(--color-text-normal);
  font-size: 15px;
  cursor: pointer;
  background: #fff;
}
.news .pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.news .pagination .page-numbers:hover { color: var(--color-primary); }

/* ============ News Detail ============ */
.news-detail { padding-bottom: 40px; }
.back { display: flex; align-items: center; font-size: 16px; padding: 30px 0; cursor: pointer; color: var(--color-primary); }
.back .txt { padding-left: 10px; }
.back:hover { color: var(--color-blue); }
.news-detail .title { font-size: 28px; text-align: center; line-height: 1.2; color: var(--color-text-main); font-weight: 700; }
.from-info { padding: 30px 0; display: flex; justify-content: space-between; color: var(--color-text-sub); font-size: 16px; }
.news-content { min-height: 500px; }
.news-content .content { color: var(--color-text-normal); font-size: 18px; margin-bottom: 80px; }
.news-content .content p { line-height: 1.6; margin-bottom: 20px; }
.news-content .content img { width: 80%; display: block; margin: 10px auto; }
.news-content .content a { color: var(--color-primary); text-decoration: underline; }
.news-content .content h1, .news-content .content h2, .news-content .content h3 { color: var(--color-text-main); margin: 20px 0; }

/* ============ Main Business ============ */
.main-business { padding-bottom: 40px; }
.main-business ul { list-style: none; }
.main-business li:nth-child(even) { background: #f9f9f9; }
.main-business .item {
  display: flex;
  padding: 40px 0;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.main-business .item.reverse { flex-direction: row-reverse; }
.main-business .content { width: 550px; color: var(--color-text-normal); flex-shrink: 0; }
.main-business h2 { font-weight: 400; font-size: 40px; margin-bottom: 40px; color: var(--color-text-main); }
.main-business p { font-size: 16px; line-height: 1.8; }
.main-business .item img { width: 45%; height: auto; }

/* ============ Contact ============ */
.contact-us .content { margin: 50px 0; }
.contact-us .content p { margin-bottom: 28px; color: var(--color-text-normal); font-size: 16px; }
.contact-us .map { width: 100%; margin-bottom: 80px; }
.contact-us .map img { width: 100%; }

/* ============ Join Us (Recruitment) ============ */
.join-us { padding-bottom: 80px; }
.join-us h2 { text-align: center; font-size: 28px; margin: 60px 0; color: var(--color-text-main); font-weight: 700; }
.join-us h3, .join-us p { text-indent: 32px; }
.join-us h3 { font-size: 18px; padding: 20px 0 12px; color: var(--color-text-main); font-weight: 700; }
.join-us p { font-size: 16px; line-height: 1.6; color: var(--color-text-normal); }
.join-us .file { margin-top: 80px; font-size: 16px; color: var(--color-text-normal); display: flex; flex-direction: column; padding-left: 32px; }
.join-us .file a { display: block; text-decoration: underline; color: var(--color-primary); }
.join-us .file a:hover { opacity: .9; }
.join-us .file a:first-child { margin-bottom: 20px; }
.join-us .sign { text-align: right; margin-top: 40px; }

/* ============ About ============ */
.about-us h2 { color: var(--color-primary); font-size: 36px; text-align: center; padding: 60px 0; font-weight: 700; }
.about-us p { line-height: 1.5; font-size: 16px; color: var(--color-text-normal); text-indent: 34px; padding-bottom: 16px; }
.about-us .org-img { text-align: center; margin: 20px 0; }
.about-us .org-img img { width: 100%; }

/* 大事记时间轴 */
.timer-shaft { height: 960px; position: relative; padding: 60px 0; margin-bottom: 60px; }
.timer-shaft .center-line { position: absolute; left: 50%; transform: translate(-50%); top: 0; width: 3px; height: 100%; background: #b2bede; }
.timer-shaft .timer-item { position: relative; padding: 30px 0; }
.timer-shaft .timer-item .year { position: absolute; left: 50%; transform: translate(-50%); top: -20px; display: inline-block; color: #fff; padding: 8px 10px; text-align: center; border-radius: 4px; background: var(--color-primary); }
.timer-shaft .content { position: relative; }
.timer-shaft .content .dot { position: absolute; left: 50%; transform: translate(-50%); display: block; width: 10px; height: 10px; background: #b2bede; border-radius: 50%; }
.timer-shaft .content .line { position: absolute; top: 4px; display: block; border-top: 3px solid #b2bede; width: 70px; }
.timer-shaft .content .content-inner { display: flex; width: 100%; }
.timer-shaft .content .txt { font-size: 16px; color: var(--color-text-normal); line-height: 1.4; }
.timer-shaft .content.left { padding-right: 50%; }
.timer-shaft .content.left .line { left: calc(50% - 70px); }
.timer-shaft .content.left .content-inner { padding-right: 95px; }
.timer-shaft .content.right { padding-left: 50%; }
.timer-shaft .content.right .content-inner { padding-left: 95px; }

/* ============ Product Detail ============ */
.product-details { padding-bottom: 100px; }
.product-details p { font-size: 16px; line-height: 1.6; color: var(--color-text-normal); }
.product-details .banner { position: relative; }
.product-details .banner-bg { width: 100%; display: block; }
.product-details .banner-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product-details .over-view { padding-top: 60px; }
.product-details .function { padding-top: 80px; }
.product-details .effect { padding-top: 50px; }
.product-details .case { padding-top: 60px; }
.product-details h2 { font-size: 34px; font-weight: 700; color: var(--color-primary); text-align: center; padding-bottom: 50px; margin: 0; }
.product-details .function-list { display: flex; flex-wrap: wrap; }
.product-details .function-list li {
  width: 410px;
  min-height: 280px;
  border: 1px solid var(--border);
  margin: 0 24px 24px 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.product-details .function-list li:hover { box-shadow: 0 3px 6px #00000017; }
.product-details .function-list li:hover .item-title { color: #1c5ac5; }
.product-details .function-list li:hover .item-title:after { width: 100%; border-color: #1c5ac5cc; }
.product-details .function-list li .item-title {
  font-size: 20px;
  padding: 16px 20px;
  line-height: 1.2;
  border-bottom: 1px solid var(--border);
  position: relative;
  margin: 0;
  color: var(--color-text-main);
}
.product-details .function-list li .item-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 16px;
  border-bottom: 2px solid rgba(28,90,197,.4);
  transition: all .6s ease-in-out;
}
.product-details .function-list li .item-content { flex: 1; padding: 20px; }
.product-details .function-list li .item-content p { text-indent: 32px; margin: 0; }
.product-details .effect-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.product-details .effect-list li { width: 46%; display: flex; margin-bottom: 40px; }
.product-details .effect-list li:hover .item-title { color: #1c5ac5; }
.product-details .effect-list li img { width: 70px; height: 70px; flex-shrink: 0; }
.product-details .effect-list li .content { padding-left: 20px; }
.product-details .effect-list li .content .item-title { font-size: 20px; height: 64px; line-height: 64px; margin: 0; color: var(--color-text-main); }
.product-details .case .content p { text-indent: 32px; }

/* 移动端汉堡按钮（桌面隐藏） */
.toggle { display: none; cursor: pointer; }

/* ============ Responsive ============ */
@media only screen and (max-width: 768px) {
  .toggle { display: block; }
  .nav { display: none; position: absolute; top: 80px; left: 0; width: 100%; background: var(--color-primary); flex-direction: column; padding: 10px 0; z-index: 100; }
  .nav.open { display: flex; }
  .nav li { margin: 0; padding: 12px 20px; justify-content: center; }
  .nav-underline { display: none; }
  .top-banner img.banner-img { height: 120px; object-fit: cover; }
  .top-banner .txt { font-size: 30px; padding-left: 20px; }
  .container-title { font-size: 20px; margin: 30px 0; }
  .product-track .slide { padding: 20px; }
  .product-track .slide .title { font-size: 18px; }
  .product-track .slide .content, .product-track .slide a { font-size: 14px; }
  .product-track .slide .img-wrap { margin-top: 20px; }
  .product-track .slide .img-wrap .keys { left: 10%; }
  .product-track .slide .img-wrap .keys li { font-size: 14px; padding: 10px 0; }
  .catchword-wrap { flex-direction: column; }
  .catchword-wrap li { width: 100%; }
  .news .list .title { font-size: 18px; flex-direction: column; gap: 6px; }
  .news .list .time { white-space: normal; }
  .main-business .item { flex-direction: column; }
  .main-business .item.reverse { flex-direction: column; }
  .main-business .content { width: 100%; }
  .main-business h2 { font-size: 24px; }
  .main-business .item img { width: 80%; }
  .about-us h2 { font-size: 24px; }
  .news-detail .title { font-size: 22px; }
  footer .nav { display: none; }
  footer .row a { width: 100%; }
  .product-details { padding-bottom: 20px; }
  .product-details .over-view, .product-details .function { padding-top: 30px; }
  .product-details .effect, .product-details .case { padding-top: 20px; }
  .product-details .banner-inner { width: 90%; }
  .product-details .banner-inner img { width: 100%; }
  .product-details h2 { font-size: 24px; padding-bottom: 20px; }
  .product-details .content-container { padding: 0 10px; }
  .product-details .function-list li { width: 100%; margin: 0 0 16px; }
  .product-details .effect-list { flex-direction: column; }
  .product-details .effect-list li { width: 100%; }
  .product-details .effect-list li .content .item-title { height: auto; line-height: 1.2; margin-bottom: 20px; }
}