@charset "UTF-8";
/* home page layout styles */

/*
 * Logo 上边距：margin-top = min(0.21×W, 126px) => min(21vw, 126px)
 *
 * Logo 尺寸（测量）：
 *   视口/布局宽度 >600px：固定 420×112.887（比例 420:112.887）
 *   ≤600px：随宽度缩小，与源码 max-md:w-[70vw]、max-w-[420px] 一致
 */

html,
body.home-page-138 {
  height: 100%;
}

body.home-page-138 {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
  color: #111;
  --home-content-max: 622px;
}

.home-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 源码：min-h-[700px] gap-[16px] flex-col items-center */
.home-form {
  position: relative;
  box-sizing: border-box;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 700px;
  width: 100%;
  padding: 0 0 2rem;
  isolation: isolate;
}

.home-bg-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
}

.home-bg-bottom img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.home-logo-wrap,
.home-banks,
.home-field-search,
.home-captcha-row,
.home-submit-outer {
  position: relative;
  z-index: 1;
}

/* Logo：外层 max-width 才生效；GIF 须 width/max-width 100% 否则会按固有尺寸撑开 */
.home-logo-wrap {
  margin-top: min(21vw, 126px);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  text-align: center;
  align-self: center;
  width: 100%;
  max-width: 420px;
}

.home-logo-wrap a {
  display: block;
  line-height: 0;
  text-decoration: none;
  max-width: 100%;
}

.home-logo-wrap img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 420 / 112.887;
  object-fit: contain;
}

@media (max-width: 600px) {
  .home-logo-wrap {
    width: min(70vw, 420px);
    max-width: 420px;
    height: auto;
    padding: 0 1rem;
    box-sizing: border-box;
  }
}

/* 银行导航：与搜索栏同 max-width、同水平 padding，保证等宽 */
.home-banks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  font-size: 14px;
  width: 100%;
  max-width: var(--home-content-max);
  /* padding: 0 1rem; */
  box-sizing: border-box;
  margin-top: 0.5rem;
}

.home-banks a {
  color: #3d88f7;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 0.75rem;
}

.home-banks a:hover {
  text-decoration: underline;
}

/* 搜索栏与银行同宽，窄屏用 vw 上限 */
.home-field-search {
  margin-top: 1rem;
  margin-bottom: 0;
  width: 100%;
  max-width: var(--home-content-max);
  box-sizing: border-box;
}

.home-input-keyword {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 12px;
  outline: none;
  background: #fff;
}

.home-input-keyword::placeholder {
  color: #71717a;
}

/*
 * 验证码条：≥768 固定 395.4×78.5 横排；<768 固定 218.4×128.4 纵排。
 */
.home-captcha-row {
  display: flex;
  /* flex-wrap: nowrap; */
  align-self: center;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #fbfbfb;
  box-sizing: border-box;
}

.home-captcha-spin {
  flex: 0 0 auto;
  display: flex;
}

.home-captcha-left {
  position: relative;
  display: flex;
  /* flex-flow: row nowrap; */
  align-items: flex-end;
  box-sizing: border-box;
  width: auto;
  min-height: 78px;
}

.home-captcha-img {
  display: block;
  width: 157px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  border: none;
  flex-shrink: 0;
}

.home-refresh-btn {
  margin-left: 4px;
  align-self: flex-end;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.home-refresh-btn img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.home-refresh-btn:hover {
  transform: scale(1.05);
}

.home-code-field {
  min-width: 0;
}

/* 验证码输入：白底、无边框 */
.home-input-code {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 13px;
  outline: none;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  -webkit-appearance: none;
  appearance: none;
}

.home-input-code::placeholder {
  color: #71717a;
}

.home-input-code:focus {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 2px rgba(61, 136, 247, 0.2);
  border: 2px solid #000000;
}

.home-submit-outer {
  background: transparent;
  border-radius: 0.5rem;
  line-height: 0;
}

.home-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  width: 132px;
  border-radius: 9999px;
  border: none;
  background: #3d88f7;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.home-submit:hover {
  filter: brightness(0.97);
}

.home-submit svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.home-footer {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 45px;
  padding: 12px 1rem;
  font-size: 12px;
  color: #fff;
  background-color: #3d88f7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-footer-inner {
  width: 100%;
  text-align: center;
}

/* ——— PC：宽度 ≥768 ——— */
@media (min-width: 768px) {
  .home-captcha-row {
    flex-direction: row;
    /* flex-wrap: nowrap; */
    align-items: stretch;
    width: 395.4px;
    min-width: 395.4px;
    max-width: 395.4px;
    height: 78.5px;
    border-radius: 0.5rem;
  }

  .home-captcha-spin {
    align-self: stretch;
  }

  .home-captcha-left {
    height: 100%;
    min-height: 0;
    align-items: flex-end;
  }

  /* 与灰条同高：PNG 逻辑 157×78.5（@2× 输出），与容器等高 */
  .home-captcha-img {
    width: 157px;
    height: 100%;
    max-height: none;
    border-radius: 0.5rem 0 0 0.5rem;
    object-fit: fill;
    object-position: left bottom;
  }

  .home-refresh-btn {
    align-self: flex-end;
    margin-bottom: 0;
  }

  .home-code-field {
    flex: 1 1 0;
    margin-left: 12px;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }

  /* 约为先前「铺满右栏」高度的一半（此前内容区约 64px → 32px） */
  .home-input-code {
    width: 100%;
    height: 42.4px;
    padding: 0.75rem;
    min-height: var(--ant-control-height);
  }
}

/* ——— 移动：宽度 <768（Tailwind max-md）——— */
@media (max-width: 767px) {
  .home-form {
    min-height: 620px;
    /* padding-top: 0.5rem; */
  }

  .home-banks {
    padding: 0 2rem;
    /* max-width: min(var(--home-content-max), 98vw); */
    font-size: 14px;
    gap: 1.5rem;
    justify-content: space-between;
  }

  .home-field-search {
    max-width: min(var(--home-content-max), 90vw);
  }

  .home-input-keyword,
  .home-input-code {
    font-size: 16px;
  }

  .home-captcha-row {
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 128.4px;
    height: auto;
    gap: 8px;
    padding: 8px;
    align-self: center;
    box-sizing: border-box;
    border-radius: 0.5rem;
  }

  /* 整行占满宽度，内部验证码+刷新在横轴居中（不再贴左） */
  .home-captcha-spin {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
  }

  .home-captcha-left {
    width: auto;
    height: 78px;
    align-items: flex-end;
  }

  .home-captcha-img {
    width: 157px;
    max-width: 100%;
    height: 100%;
    max-height: none;
    object-fit: fill;
    object-position: left bottom;
    /* border-radius: 0.5rem; */
  }

  .home-refresh-btn {
    margin-right: -26px;
    align-self: flex-end;
  }

  .home-code-field {
    flex: 0 0 auto;
    margin-left: 0;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
  }

  .home-input-code {
    width: 100%;
    height: 42.4px;
    padding: 0 10px;
    line-height: 30px;
    flex: 0 0 auto;
  }
}