/* ============================================================
   全视明眼镜 网站复刻 - 共享样式
   原站布局模型：固定画布 1380px（13.8rem），rem 基准 100px；
   整站按视口宽度等比缩放（pr = w / 1644，内容约占视口 83.9%）。
   本样式用 Flexbox / Grid 重构，并复刻原站“等比缩放”的响应式行为。
   ============================================================ */

:root {
  --red: #D6292E;            /* 主红（导航悬停 / 红条 / 按钮 / 页脚） */
  --red-deep: #BC1318;
  --text: #222222;
  --text-light: #666666;
  --text-mute: #999999;
  --gray-bg: #F2F2F2;
  --border: #E2E2E2;
  --white: #ffffff;
  --container: 13.8rem;      /* 1380px */
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
          "Heiti SC", "SimHei", Arial, sans-serif;
}

/* 原站 rem 基准固定 100px（1644px 画布 @100px 与设计稿一致）；
   整站内容宽 13.8rem=1380px 居中，窄屏超出部分横向滚动，与原站行为一致。 */
html { font-size: 100px; -webkit-text-size-adjust: 100%; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  font-size: 0.16rem;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; }

.container {
  width: var(--container);
  margin: 0 auto;
  position: relative;
}

/* ===================== 悬浮 Header（覆盖在 Banner / Hero 顶部，白字） ===================== */
.site-header {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 0.2rem 0;
}
.header-inner {
  width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo img { height: 0.68rem; width: auto; }

.nav { display: flex; align-items: center; }
.nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0.85rem; height: 0.4rem; margin: 0.05rem; padding: 0.05rem 0.12rem;
  color: rgba(255,255,255,.9);
  font-size: 0.16rem;
  border: 0.01rem solid transparent;
  border-radius: 0.03rem;
  transition: color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.nav a:hover,
.nav a.active {
  color: #fff;
  border-color: #fff;
}
/* 内页（深色背景 Header 变为实色红条，保证可读） */
body.inner .site-header { position: relative; background: var(--red); padding: 0.18rem 0; }
body.inner .nav a:hover,
body.inner .nav a.active { border-color: #fff; color: #fff; }

/* ===================== 通用区块标题 ===================== */
.sec-head { text-align: center; margin-bottom: 0.5rem; }
.sec-head h2 { font-size: 0.36rem; font-weight: bold; color: var(--text); letter-spacing: 0.02rem; }
.sec-head p { font-size: 0.18rem; color: var(--text-mute); letter-spacing: 0.03rem; margin-top: 0.08rem; text-transform: uppercase; }
.sec-head .line { width: 0.5rem; height: 0.03rem; background: var(--red); margin: 0.16rem auto 0; }

/* ===================== 首页：Hero 英雄区（全宽 780px） ===================== */
.hero { position: relative; width: 100%; height: 7.8rem; background: #000; overflow: hidden; }
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-slide { width: 100%; height: 100%; overflow: hidden; }
.hero-swiper .swiper-slide img,
.hero-swiper .swiper-slide video { width: 100%; height: 100%; object-fit: cover; }
.hero-swiper .swiper-pagination { bottom: 0.24rem; }
.hero-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.4); opacity: 1; }
.hero-swiper .swiper-pagination-bullet-active { background: #fff; width: 0.28rem; border-radius: 0.1rem; }

/* ===================== 首页：公司简介 ===================== */
.about { background: var(--white); padding: 0.8rem 0; }
.about-inner { display: flex; align-items: center; gap: 0.7rem; }
.about-img { flex: 0 0 6.19rem; }
.about-img img { width: 6.19rem; height: 4.81rem; object-fit: cover; border-radius: 0.04rem; }
.about-text { flex: 1; }
.sec-title-l { font-size: 0.4rem; font-weight: bold; color: var(--text); }
.sec-title-l span { font-size: 0.2rem; color: var(--text-mute); letter-spacing: 0.03rem; margin-left: 0.16rem; font-weight: normal; }
.about-sub { font-size: 0.24rem; color: var(--red); margin: 0.14rem 0 0.22rem; font-weight: bold; }
.about-text p { font-size: 0.16rem; line-height: 2.1; color: var(--text-light); text-align: justify; }
.btn-more {
  display: inline-flex; align-items: center; gap: 0.06rem;
  margin-top: 0.3rem;
  padding: 0.12rem 0.3rem;
  border: 1px solid var(--red);
  color: var(--red); font-size: 0.16rem;
  border-radius: 0.03rem; transition: all .25s;
}
.btn-more:hover { background: var(--red); color: #fff; }

/* ===================== 首页：产品展示 ===================== */
.breadcrumb { background: var(--gray-bg); border-bottom: 1px solid var(--border); }
.breadcrumb .container { display: flex; align-items: center; padding: 0.18rem 0; gap: 0.08rem; font-size: 0.15rem; color: var(--text-light); }
.breadcrumb a { transition: color .25s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: var(--text-mute); }
.breadcrumb .cur { color: var(--red); }
.page-status{
    display: none;
}
.products { background: var(--white); padding: 0.8rem 0 1.2rem; }
.product-swiper { width: 100%;  margin-top: 0.2rem;overflow:hidden; }
.product-swiper .swiper-slide{
  transform: scale(0.9);
}
.product-swiper .swiper-slide.swiper-slide-active{
  transform: scale(1.0);
}
.product-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }

.product-swiper .swiper-pagination { bottom: 0.14rem; }
.tabs { display: flex; justify-content: center; gap: 0.26rem; margin-bottom: 0.55rem; flex-wrap: wrap; }
.tabs a {
  font-size: 0.17rem; color: var(--text-light);
  padding: 0.09rem 0.3rem; border: 1px solid var(--border); border-radius: 0.3rem;
  transition: all .25s;
}
.tabs a:hover { color: var(--red); border-color: var(--red); }
.tabs a.active { background: var(--red); color: #fff; border-color: var(--red); }
/* ===================== 首页：全视明眼镜4大优势 ===================== */
.advantages {
  background-image: url("static/images/202303161655554659344.jpg");
  background-size: cover; background-position: center;
  padding: 0.9rem 0 1.1rem;
}
.adv-list { display: flex; flex-direction: column; gap: 0.45rem; }
.adv-item { display: flex; align-items: stretch; gap: 0; }
.adv-item.reverse { flex-direction: row-reverse; }
.adv-img { flex: 0 0 5.5rem; overflow: hidden; }
.adv-img img { width: 5.5rem; height: 3.7rem; object-fit: cover; }
.adv-text {
  flex: 1; background: #fff; position: relative;
  padding: 0.95rem 0.6rem 0.5rem;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 0.06rem 0.24rem rgba(0,0,0,.08);
}
.adv-text .ctitle {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 0.78rem; background: var(--red);
  display: flex;
  align-items: center;
  padding:0 25px;
}
.adv-text .ctitle.lls{
  width: 110%;
  left: -10%;
}
.adv-text .ctitle.llr{
  width: 110%;
  left: 0%;
}
.adv-no {
  font-size: 0.5rem; font-weight: bold; color: #fff;
  line-height: 1;
}
.adv-text h3 { font-size: 0.24rem; color: #fff;  }
.adv-text p { font-size: 0.16rem; line-height: 1.9; color: var(--text-light); text-align: justify; }

/* ===================== 首页：合作客户 ===================== */
.clients { background: var(--white); padding: 0.9rem 0; }
.logo-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-top: 1px dashed var(--border); border-left: 1px dashed var(--border);
}
.logo-grid .logo-cell {
  border-right: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  background: #fff; padding: 0.26rem; display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.logo-grid .logo-cell:hover { background: #fafafa; }
.logo-grid .logo-cell img { max-height: 0.9rem; width: auto; transition: opacity .3s; }
.logo-grid .logo-cell:hover img { opacity: .85; }

/* ===================== 首页：新闻动态 ===================== */
.news { background: var(--gray-bg); padding: 0.9rem 0; }
.news-cols { display: flex; gap: 0.6rem; align-items: flex-start; }
.news-col { flex: 1; }
.news-col-title {
  font-size: 0.22rem; font-weight: bold; color: var(--text);
  padding-left: 0.14rem; border-left: 0.05rem solid var(--red);
  margin-bottom: 0.26rem; line-height: 1.1;
}
.news-list li { padding: 0.16rem 0; border-bottom: 1px dashed var(--border); }
.news-list li:last-child { border-bottom: none; }
.news-list li a { font-size: 0.16rem; color: var(--text); line-height: 1.6; transition: color .25s; }
.news-list li a:hover { color: var(--red); }
.news-list li.has-thumb { display: flex; gap: 0.18rem; align-items: center; }
.news-list li.has-thumb img { flex: 0 0 2.6rem; width: 2.6rem;  object-fit: cover; }
.news-list li.has-thumb div a { display: block; }
.news-list li.has-thumb .date { display: block; font-size: 0.14rem; color: var(--text-mute); margin-top: 0.06rem; }

/* ===================== 页脚 ===================== */
.site-footer { background: rgba(0,0,0,.9); color: #fff; }
.footer-inner { display: flex; align-items: stretch; padding: 0.6rem 0 0.5rem; gap: 0.5rem; }
.footer-brand { flex: 0 0 3.6rem; display: flex; flex-direction: column; }
.footer-logo { width: 1.7rem; height: 1.2rem; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: 0.2rem; }
.footer-brand .slogan { font-size: 0.22rem; font-weight: bold; letter-spacing: 0.01rem; line-height: 1.5; margin-bottom: 0.1rem; }
.footer-brand .slogan-sub { font-size: 0.15rem; opacity: .75; margin-bottom: 0.2rem; }
.footer-brand .qr { display: flex; align-items: center; gap: 0.14rem; }
.footer-brand .qr img { width: 1rem; height: 1rem; object-fit: cover; }
.footer-brand .qr-txt { display: flex; flex-direction: column; font-size: 0.15rem; opacity: .8; line-height: 1.6; }
.footer-col { flex: 1; }
.footer-col h4 { font-size: 0.18rem; color: #fff; letter-spacing: 0.04rem; padding-bottom: 0.14rem; margin-bottom: 0.2rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-col p { font-size: 0.15rem; color: rgba(255,255,255,.65); margin-bottom: 0.12rem; line-height: 1.6; }
.footer-col p a { color: rgba(255,255,255,.65); transition: color .25s; }
.footer-col p a:hover { color: #fff; }
.footer-bottom { background: var(--red); color: #fff; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; padding: 0.14rem 0; font-size: 0.14rem; flex-wrap: wrap; }
.footer-bottom span { opacity: .92; }

/* ===================== 内页 Banner ===================== */
.page-banner {
  position: relative; width: 100%; height: 5rem;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.page-banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.page-banner .banner-title { position: relative; z-index: 2; color: #fff; font-size: 0.46rem; font-weight: bold; letter-spacing: 0.04rem; }

/* ===================== 通用区块 ===================== */
.section { padding: 0.8rem 0; }
.section-title { text-align: center; margin-bottom: 0.5rem; }
.section-title .cn { font-size: 0.36rem; font-weight: bold; color: var(--text); letter-spacing: 0.02rem; }
.section-title .en { font-size: 0.18rem; color: var(--text-mute); letter-spacing: 0.03rem; margin-top: 0.08rem; text-transform: uppercase; }
.section-title .line { width: 0.5rem; height: 0.03rem; background: var(--red); margin: 0.16rem auto 0; }

/* ===================== 品牌介绍页 ===================== */
.brand-intro { background: #fff; }
.brand-block { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.brand-block:last-child { margin-bottom: 0; }
.brand-block.reverse { flex-direction: row-reverse; }
.brand-block .b-img { flex: 0 0 5.6rem; }
.brand-block .b-img img { width: 5.6rem; height: 4rem; object-fit: cover; border-radius: 0.04rem; }
.brand-block .b-text { flex: 1; }
.brand-block .b-text h3 { font-size: 0.3rem; margin-bottom: 0.06rem; }
.brand-block .b-text .en { font-size: 0.18rem; color: var(--text-mute); letter-spacing: 0.02rem; margin-bottom: 0.22rem; }
.brand-block .b-text p { font-size: 0.16rem; line-height: 2; color: var(--text-light); text-align: justify; }
.brand-block .b-text .hl { color: var(--red); font-weight: bold; }

.history { background: var(--gray-bg); }
.history-panel {
  background: #fff; border-radius: 0.04rem; padding: 0.5rem 0.4rem;
  display: flex; align-items: center; gap: 0.4rem;
  box-shadow: 0 0.06rem 0.24rem rgba(0,0,0,.06);
}
.history-red {
  flex: 0 0 3rem; height: 3rem; background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.26rem; font-weight: bold; letter-spacing: 0.02rem; text-align: center;
}
.history-imgs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.16rem; }
.history-imgs img { width: 100%; height: 1.4rem; object-fit: cover; border-radius: 0.03rem; }
.slogan { background: var(--red); color: #fff; text-align: center; padding: 0.9rem 0; }
.slogan h2 { font-size: 0.44rem; font-weight: bold; letter-spacing: 0.04rem; }

/* ===================== 联系我们页 ===================== */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.26rem; }
.contact-card {
  background: #FAFAFA; border: 1px solid var(--border);
  padding: 0.4rem 0.24rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.contact-card .cc-icon {
  width: 0.64rem; height: 0.64rem; border-radius: 50%;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.28rem; margin-bottom: 0.2rem;
}
.contact-card h4 { font-size: 0.19rem; color: var(--text); margin-bottom: 0.14rem; }
.contact-card p { font-size: 0.15rem; color: var(--text-light); line-height: 1.8; }
.contact-card .cc-qr { width: 1.3rem; height: 1.3rem; object-fit: cover; margin-top: 0.06rem; }
.contact-map { width: 100%; height: 3.6rem; border: 0; display: block; margin-top: 0.5rem; }
/*.contact-form-wrap { background: var(--gray-bg); margin-top: 0.6rem; }*/
.contact-form { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.22rem; }

.contact-form label { display: block; font-size: 0.15rem; color: var(--text); margin-bottom: 0.08rem; }
.contact-form label .req { color: var(--red); margin-left: 0.04rem; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 0.2rem 0.14rem; font-size: 0.15rem;
  border: none; border-radius: 0.03rem; font-family: var(--font); background: rgba(246, 246, 246, 1);
}
.contact-form textarea { height: 1.3rem; resize: vertical; }
.contact-form .submit-btn {
  grid-column: 1 / -1; justify-self: center;
  padding: 0.18rem 0.5rem; background: rgba(17, 17, 17, 1); color: #fff;
  border: none; border-radius: 0.03rem; font-size: 0.16rem; transition: background .25s;
  width: 100%;
}

/* ===================== 卡片网格（产品/案例/新闻列表） ===================== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.32rem; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 0.04rem;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover { box-shadow: 0 0.1rem 0.32rem rgba(0,0,0,.12); transform: translateY(-0.04rem); }
.card-image { width: 100%; height: 2.4rem; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card-image img { transform: scale(1.06); }
.card-body { padding: 0.26rem 0.24rem 0.3rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: 0.21rem; color: var(--text); margin-bottom: 0.12rem; }
.card-body p { font-size: 0.15rem; color: var(--text-light); line-height: 1.85; flex: 1; }
.card-meta { margin-top: 0.18rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.14rem; color: var(--text-mute); }
.card-meta .more { color: var(--red); font-weight: bold; }
.card.news-card .card-meta .date { color: var(--red); }

/* ===================== 分页 pager ===================== */
.pager { display: flex; justify-content: center; gap: 0.1rem; margin-top: 0.55rem; }
.pager a {
  min-width: 0.42rem; height: 0.42rem; padding: 0 0.14rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 0.03rem; font-size: 0.15rem; color: var(--text-light);
  transition: all .25s;
}
.pager a:hover { border-color: var(--red); color: var(--red); }
.pager a.active { background: var(--red); color: #fff; border-color: var(--red); }

/* ===================== 产品/案例 详情：画廊 + 信息 ===================== */
.detail-wrap { display: flex; gap: 0.6rem; align-items: flex-start; }
.detail-gallery { flex: 0 0 6rem; }
.detail-gallery .main-img { width: 6rem; height: 4.6rem; overflow: hidden; border-radius: 0.04rem; border: 1px solid var(--border); }
.detail-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery .thumbs { display: flex; gap: 0.14rem; margin-top: 0.16rem; }
.detail-gallery .thumbs img { width: 1.36rem; height: 1rem; object-fit: cover; border: 1px solid var(--border); border-radius: 0.03rem; cursor: pointer; transition: border-color .25s; }
.detail-gallery .thumbs img:hover { border-color: var(--red); }
.detail-info { flex: 1; min-width: 0; }
.detail-info .d-tag { display: inline-block; background: var(--red); color: #fff; font-size: 0.14rem; padding: 0.05rem 0.18rem; border-radius: 0.2rem; margin-bottom: 0.18rem; }
.detail-info h1 { font-size: 0.38rem; color: var(--text); margin-bottom: 0.12rem; line-height: 1.3; }
.detail-info .d-sub { font-size: 0.21rem; color: var(--red); margin-bottom: 0.26rem; }
.detail-info .d-desc { font-size: 0.16rem; line-height: 2; color: var(--text-light); text-align: justify; margin-bottom: 0.32rem; }
.detail-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.16rem 0.3rem; margin-bottom: 0.36rem; }
.detail-feats li { font-size: 0.15rem; color: var(--text); padding-left: 0.3rem; position: relative; line-height: 1.7; }
.detail-feats li::before { content: ""; position: absolute; left: 0; top: 0.1rem; width: 0.1rem; height: 0.1rem; background: var(--red); border-radius: 50%; }
.detail-actions { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; padding: 0.15rem 0.44rem;
  background: var(--red); color: #fff; border: none; border-radius: 0.03rem; font-size: 0.17rem; transition: background .25s;
}
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost {
  display: inline-flex; align-items: center; padding: 0.15rem 0.44rem;
  border: 1px solid var(--red); color: var(--red); background: #fff; border-radius: 0.03rem; font-size: 0.17rem; transition: all .25s;
}
.btn-ghost:hover { background: var(--red); color: #fff; }

/* ===================== 文章正文（新闻详情） ===================== */
.article { max-width: 9.8rem; margin: 0 auto; }
.article h1 { font-size: 0.36rem; color: var(--text); margin-bottom: 0.16rem; line-height: 1.35; }
.article .meta { font-size: 0.15rem; color: var(--text-mute); margin-bottom: 0.32rem; padding-bottom: 0.22rem; border-bottom: 1px dashed var(--border); }
.article .detail-cover { width: 100%; height: 4.8rem; object-fit: cover; border-radius: 0.04rem; margin-bottom: 0.34rem; }
.article .detail-content p { font-size: 0.16rem; line-height: 2.1; color: var(--text-light); text-align: justify; margin-bottom: 0.22rem; }
.article .detail-content h3 { font-size: 0.23rem; color: var(--text); margin: 0.34rem 0 0.16rem; padding-left: 0.15rem; border-left: 0.05rem solid var(--red); }