/* =====================================================
   全局 REM 自适应方案
   设计稿基准：1920px
   1rem = 100px（设计稿）
===================================================== */

/* 默认：根据视口宽度等比缩放 */
html {
  font-size: calc(100vw / 19.2);
  scroll-behavior: smooth;
}

/* ================= 基础重置 ================= */

body {
  margin: 0;
  padding-top: 0.8rem;
  color: #333;
  background: #fff;
  font-family: "Source Han Sans", "PingFang SC", Arial, sans-serif;
}

/* ================= 通用标题 ================= */
section {
  scroll-margin-top: 0.8rem;
}

.section-title {
  margin-bottom: 0.64rem;
  font-size: 0.4rem;
  font-weight: 700;
  color: #041541;
  line-height: 1;
  text-align: center;
  position: relative;
}

/* 标题下划线装饰 */
.section-title::after {
  content: "";
  display: block;
  margin: 0.16rem auto 0;
  width: 0.8rem;
  height: 0.03rem;
  background: #2a79ff;
}
/* =====================================================
   Header 顶部导航
===================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 0.8rem;
  background: #ffffff;

  z-index: 999; /* 一定要高 */
}
.header.scrolled {
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.08);
}
.header-inner {
  max-width: 14.4rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 0.4rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo 图片 */
.logo img {
  height: 0.4rem;
  width: auto;
  display: block;
}

/* 导航区域 */
.nav {
  display: flex;
  align-items: center;
}

/* 导航文字 */
.nav a {
  margin-left: 0.32rem;
  font-size: 0.16rem;
  font-weight: 700;
  color: #3d3d3d;
  text-decoration: none;
}

/* Hover / 激活态 */
.nav a:hover,
.nav a.active {
  color: #2a79ff;
}
/* =====================================================
   Banner 首屏
===================================================== */
.banner {
  position: relative;
  width: 100%;
  height: 7.2rem;
  overflow: hidden;
}

/* 背景图层 */
.banner-bg {
  position: absolute;
  top: 0;
  left: 100%; /* 默认在右侧外 */
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition:
    transform 1s ease,
    opacity 1s ease;
  opacity: 0;
}

/* 当前显示 */
.banner-bg.active {
  transform: translateX(-100%);
  opacity: 1;
  z-index: 1;
}

/* 上一张，停在中间 */
.banner-bg.prev {
  transform: translateX(-200%);
  opacity: 0;
}

/* 内容层在最上面 */
.banner-inner {
  position: relative;
  z-index: 10;
  max-width: 14.4rem;
  width: 100%;
  margin: 0 auto;
}

/* 左侧文案 */
.banner-left {
  max-width: 6.71rem;
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

/* 小标签 */
.banner-rec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.16rem;
  padding: 0 0.14rem;

  border-radius: 0.08rem;
  width: 1.92rem;
  height: 0.32rem;
  background: rgba(42, 121, 255, 0.1);

  font-weight: 400;
  color: #2a79ff;
  line-height: 0.16rem;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 0.12rem;
}

/* 主标题 */
.banner-title {
  font-size: 0.44rem;
  font-weight: 700;
  margin: 0;
}

.banner-title span {
  color: #2f6bff;
}

/* 描述文字 */
.banner-desc {
  font-size: 0.16rem;
  opacity: 0.5;
  font-weight: 400;
  color: #000000;
  line-height: 0.23rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 0.08rem;
}
/* =====================================================
   主按钮
===================================================== */

.btn-primary {
  height: 0.48rem;
  font-size: 0.16rem;

  border: none;
  width: 1.56rem;
  background: #2a79ff;
  border-radius: 0.08rem;
  opacity: 1;
  font-weight: 400;

  color: #ffffff;
  line-height: 0.23rem;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 0rem;
}

.btn-primary:hover {
  box-shadow: 0 0.1rem 0.24rem rgba(47, 107, 255, 0.3);
  transform: translateY(-0.02rem);
}

/* =====================================================
   Advantage 优势模块
===================================================== */
.advantage {
  padding: 1.2rem 0;
  background: #fff;
}
.advantage-inner {
  max-width: 14.4rem;
  margin: 0 auto;
  padding: 0 0.4rem; /* 防止小屏贴边 */
}

.advantage-list {
  display: flex;
  gap: 0.21rem;
}

/* 单个卡片 */
.advantage-item {
  flex: 1;
  display: flex;
  gap: 0.24rem;

  padding: 0.4rem 0.32rem;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 0.08rem;
  overflow: hidden;
  position: relative;
}
.advantage-item::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    153deg,
    rgba(255, 255, 255, 0.9) 0%,
    #d9f0ff 100%
  );

  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2; /* 在水印之上 */
}
.advantage-item:hover::before {
  opacity: 1;
}
.advantage-item::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  bottom: 0.21rem;
  width: 1rem;
  height: 1rem;

  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3; /* 比 before 低 */
}
/* Hover 整体卡片 */
.advantage-item:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0.04rem 0.08rem 0.1rem rgba(0, 0, 0, 0.1);
}

/* 内容层级提升 */
.advantage-item > * {
  position: relative;
  z-index: 3;
}
/* 左侧图标列 */
.advantage-icon-col {
  width: 0.64rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

/* 图标本体 */
.advantage-icon {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 0.08rem;

  background-color: rgba(42, 121, 255, 0.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.64rem 0.64rem;
  transition: all 0.3s ease;
}

/* 标题 */
.advantage-title {
  font-size: 0.24rem;
  font-weight: 700;
  color: #011131;
  margin-bottom: 0.12rem;
}
.advantage-desc {
  width: 3rem;

  font-weight: 400;
  font-size: 0.2rem;
  color: #011131;
  line-height: 0.29rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.advantage-item:hover .advantage-desc {
  color: #2a79ff;
}
.advantage-sub {
  width: 3rem;
  height: 1.64rem;
  font-weight: 400;
  font-size: 0.14rem;
  color: #666666;
  line-height: 0.2rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 0.18rem;
}

.advantage-private .advantage-icon {
  background-image: url("./image/icon/private.jpg");
}

.advantage-accurate .advantage-icon {
  background-image: url("./image/icon/accurate.jpg");
}

.advantage-compliance .advantage-icon {
  background-image: url("./image/icon/compliance.jpg");
}
.advantage-item:hover .advantage-icon {
  box-shadow: 4px 8px 10px rgba(0, 0, 0, 0.1);
}

.advantage-private:hover .advantage-icon {
  background-image:
    url("./image/icon/private_active.jpg"),
    linear-gradient(to top left, #ffffff 0%, #d9f0ff 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

.advantage-accurate:hover .advantage-icon {
  background-image: url("./image/icon/accurate_active.jpg");
}

.advantage-compliance:hover .advantage-icon {
  background-image: url("./image/icon/compliance_active.jpg");
}
/* =====================================================
   卡片右下角装饰背景
===================================================== */

/* 不同卡片背景 */
.advantage-private::after {
  background-image: url("./image/icon/private_bg.png");
}

.advantage-accurate::after {
  background-image: url("./image/icon/accurate_bg.png");
}

.advantage-compliance::after {
  background-image: url("./image/icon/compliance_bg.png");
}
/* =====================================================
   Reservation 预约模块（背景轮播容器）
===================================================== */

.reservation {
  position: relative;
  width: 100%;
  height: 7.2rem;
  overflow: hidden;

  display: flex;
  align-items: center;
}

/* 背景图层 */
.reservation-bg {
  position: absolute;
  top: 0;
  left: 100%; /* 初始在右侧 */
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition:
    transform 1s ease,
    opacity 1s ease;
}

/* 当前显示 */
.reservation-bg.active {
  transform: translateX(-100%);
  opacity: 1;
  z-index: 1;
}

/* 上一张 */
.reservation-bg.prev {
  transform: translateX(-200%);
  opacity: 0;
}

/* =====================================================
   内容层（在背景之上）
===================================================== */

.reservation-rec {
  position: relative;
  z-index: 10;

  width: 100%;
  max-width: 14.4rem;
  margin: 0 auto;
  padding: 0 0.4rem;
}

/* =====================================================
   Reservation 表单卡片
   功能：白色卡片容器
===================================================== */

.reservation-box {
  width: 7.2rem; /* 400px */

  margin: 0 auto;
  padding: 0.4rem; /* 40px */

  background: #ffffff;
  border-radius: 0.08rem; /* 16px */
  box-shadow: 0.04rem 0.08rem 0.1rem rgba(42, 121, 255, 0.1);

  box-sizing: border-box;
}

/* =====================================================
   表单标题
===================================================== */

.reservation-title {
  margin-bottom: 0.24rem; /* 24px */
  text-align: center;

  font-size: 0.24rem; /* 24px */
  font-weight: 700;
  color: #3d3d3d;
  line-height: 0.3rem; /* 30px */
}

/* =====================================================
   表单单行容器
   功能：控制输入框高度 & 间距
===================================================== */

.form-group {
  width: 100%;
  height: 0.48rem; /* 48px */
  margin-bottom: 0.4rem; /* 40px */
  position: relative;
}

/* =====================================================
   输入框整体（label + input）
===================================================== */

.form-item {
  height: 100%;
  display: flex;
  align-items: center;

  background: #f7f7f7;
  border-radius: 0.08rem; /* 8px */
  box-sizing: border-box;
}

/* =====================================================
   左侧 label
   功能：文字两端对齐，宽度固定
===================================================== */

.label {
  width: 0.71rem; /* 71px */
  height: 0.22rem; /* 22px */

  font-size: 0.15rem; /* 15px */
  font-weight: 500;
  color: #3d3d3d;
  line-height: 0.22rem;
  margin-left: 0.24rem;
  white-space: nowrap;
  flex-shrink: 0;

  text-align: justify;
  text-align-last: justify;
}

/* 必填星号 */
.required {
  margin-left: 0.04rem; /* 4px */
  color: red;
}

/* =====================================================
   输入框 input
===================================================== */

.form-item input {
  flex: 1;
  margin-left: 0.38rem;
  border: none;
  background: transparent;
  outline: none;

  font-size: 0.15rem; /* 15px */
  font-weight: 700;
  color: #333;
  line-height: 0.22rem;
}

/* placeholder 样式 */
.form-item input::placeholder {
  font-size: 0.15rem;
  font-weight: 350;
  color: #999;
  line-height: 0.22rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.form-item.error {
  border: 0.01rem solid red;
}
/* 错误提示默认隐藏 */
.error-text {
  display: none;
  position: absolute;
  left: 0.22rem;
  bottom: -0.23rem;
  font-size: 0.15rem;
  color: #ff0000;
}
/* ====== 去掉浏览器自动填充的背景色 ====== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #333 !important;
  transition: background-color 9999s ease-out 0s;
}
/* =====================================================
   提交按钮
===================================================== */
/* 按钮本身：只负责样式 */
button {
  width: 100%;
  height: 0.48rem;
  border: none;
  border-radius: 0.08rem;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 0.16rem;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-top: 0;
  background-color: #2a79ff;
  opacity: 0.5;
  transition:
    background-color 0.3s,
    opacity 0.3s;
}

/* 激活态按钮 */
button.active {
  background-color: #2a79ff;
  opacity: 1;
}

/* 弹窗遮罩 */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;

  justify-content: center;
  align-items: center;
}

/* 成功弹窗主体 */
.success-box {
  width: 4rem;
  height: 3.05rem;
  background-image: url("./image/modal/modal_bg2.jpg"); /* 弹窗背景切图 */
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 0.2rem;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 0.36rem;
  box-sizing: border-box;
}

/* 成功 icon */
.success-icon {
  width: 0.4rem;
  height: 0.4rem;
  background-image: url("./image/modal/icon.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 成功标题（图片） */
.success-title {
  width: 1.4084rem;
  height: 0.395rem;

  background-image: url("./image/modal/success.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* 描述文字 */
.success-desc {
  font-size: 0.16rem;
  margin-top: 0.18rem;
  margin-bottom: 0.61rem;
  width: 2.08rem;
  height: 0.18rem;

  font-weight: 500;

  color: #999999;
  line-height: 0.23rem;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

/* 我知道了按钮 */
.success-btn {
  width: 2.4rem;
  height: 0.48rem;
  background: #ffffff;
  border-radius: 0.4rem;
  border: none;

  font-size: 0.16rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 0.23rem;
  font-style: normal;
  text-transform: none;
}

/* =====================================================
   Footer 页脚
===================================================== */

.footer {
  padding: 0.33rem 0;
  font-size: 0.13rem; /* 12px */

  background: #ffffff;
  font-weight: 400;

  color: #3d3d3d;
  line-height: 0.13rem;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
/* 超过 1920，不再放大（防止 2K / 4K 爆炸） */
@media screen and (min-width: 1920px) {
  html {
    font-size: 100px;
  }
}

/* 平板适配 */
@media screen and (max-width: 1024px) {
  .reservation {
    height: auto;
    padding: 1.2rem 0;
  }
  /* ===== Header ===== */
  .header-inner {
    padding: 0 0.24rem;
  }

  .nav a {
    font-size: 0.15rem;
    margin-left: 0.24rem;
  }

  /* ===== Banner ===== */
  .banner {
    height: 6rem;
  }

  .banner-left {
    max-width: 5.5rem;
    margin-top: 1.6rem;
  }

  .banner-title {
    font-size: 0.36rem;
  }

  /* ===== 优势卡片：三列 → 两列 ===== */
  .advantage-list {
    flex-wrap: wrap;
  }

  .advantage-item {
    width: calc(50% - 0.105rem);
  }

  .advantage-desc,
  .advantage-sub {
    width: auto;
  }

  /* ===== 表单 ===== */
  .reservation-box {
    width: 6rem;
  }
}
/* =====================================================
   Mobile 适配（手机端）
===================================================== */
@media screen and (max-width: 768px) {
  /* ===== 全局 ===== */
  body {
    padding-top: 0.64rem;
  }

  .section-title {
    font-size: 0.32rem;
    margin-bottom: 0.48rem;
  }

  /* ===== Header ===== */
  .header {
    height: 0.64rem;
  }

  .header-inner {
    padding: 0 0.24rem;
  }

  .logo img {
    height: 0.32rem;
  }

  .nav a {
    font-size: 0.14rem;
    margin-left: 0.2rem;
  }

  /* ===== Banner ===== */
  .banner {
    height: 5.2rem;
  }

  .banner-inner {
    padding: 0 0.32rem;
  }

  .banner-left {
    max-width: 100%;
    margin-top: 1.2rem;
    display: flex;
    text-align: left;
  }

  .banner-title {
    font-size: 0.32rem;
    line-height: 1.4;
  }

  .banner-desc {
    font-size: 0.14rem;
    line-height: 0.22rem;
  }

  /* ===== 优势模块 ===== */
  .advantage {
    padding: 0.8rem 0;
  }
  .advantage-content {
    flex: 1;
  }
  .advantage-list {
    flex-direction: column;
    gap: 0.32rem;
    width: 100%;
  }

  .advantage-item {
    width: 100%;
    padding: 0.32rem 0.24rem;
  }

  .advantage-desc,
  .advantage-sub {
    width: 100%;
  }

  .advantage-sub {
    height: auto;
  }

  /* ===== 预约模块 ===== */
  .reservation {
    height: auto;
    padding: 0.8rem 0;
  }

  .reservation-rec {
    padding: 0 0.32rem;
  }

  .reservation-box {
    width: 100%;
    padding: 0.32rem;
  }

  .reservation-title {
    font-size: 0.2rem;
  }

  /* ===== 表单 ===== */
  .label {
    font-size: 0.14rem;
  }

  .form-item input {
    font-size: 0.14rem;
  }

  /* ===== 成功弹窗 ===== */
  .success-box {
    width: 3.2rem;
    height: auto;
    padding-bottom: 0.32rem;
  }
}