:root {
  --navy: #2C50A7;
  --navy-badge: #264695;
  --navy-deep: #1E2A4A;
  --text-body: #3C4E73;
  --text-dark: #001E67;
  --orange: #AC4D00;
  --row-soft: #EDF5FC;
  --line-soft: #C2D7ED;
  --view-width: 343px;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #333333;
  overflow-x: hidden;
  letter-spacing: 0.5px;
  user-select: none;
  font-family: "Microsoft YaHei", sans-serif;
  background: #fff;
  font-size: 14px;
}

* { box-sizing: border-box; }

#app {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topbanner {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.topbanner_wrap {
  width: calc(100% - 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbanner_logo { width: 96px; height: 30px; }

.topbanner_btn {
  width: 137px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
  background: var(--navy);
  border-radius: 18px;
}

.banner { position: relative; width: 100%; overflow: hidden; }

.banner_bg { width: 100%; height: auto; display: block; }

.banner_hotspot {
  position: absolute;
  left: 33%;
  top: 73%;
  width: 36.5%;
  height: 9.6%;
  border-radius: 18px;
  cursor: pointer;
  z-index: 3;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* why */
.section_why { padding: 50px 0 50px; background: #fff; }

.why_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  text-align: center;
  line-height: 32px;
}

.why_img {
  width: var(--view-width);
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.why_img img { width: 100%; height: auto; display: block; }

.why_text {
  width: var(--view-width);
  margin-top: 16px;
}

.why_text p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-body);
}

.why_text p:last-child { margin-bottom: 0; }

.why_point {
  width: var(--view-width);
  margin-top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 23px;
  background: #E8EEF9;
  border-left: 3px solid #3C62BC;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 18px;
}

/* matrix */
.section_matrix { padding: 50px 0 50px; background: #F1F5F9; }

.matrix_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
}

.matrix_sub {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #073189;
  font-size: 14px;
}

.matrix_sub .line { width: 44px; height: 1px; background: var(--orange); flex-shrink: 0; }

.matrix_list {
  width: var(--view-width);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.matrix_card {
  min-height: 81px;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(34, 63, 133, 0.08);
}

.mc_badge {
  position: relative;
  isolation: isolate;
  width: 113px;
  flex-shrink: 0;
  background: transparent;
  color: #FFDDB2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
}

.mc_badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy-badge);
  border-radius: 8px;
  transform: skewX(-9.8deg);
  transform-origin: top right;
}

.mc_badge > * {
  position: relative;
  z-index: 1;
}

.mc_num {
  width: 26px;
  height: 26px;
  border: 1px solid #FFDDB2;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc_nname {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

.mc_body {
  flex: 1;
  min-width: 0;
  padding: 20px 16px 0 7px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
}

.mc_pos {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 21px;
}

.mc_fit {
  font-size: 14px;
  line-height: 18px;
  color: var(--text-body);
}

.matrix_note {
  width: var(--view-width);
  margin-top: 14px;
  font-size: 13px;
  line-height: 19px;
  color: #999999;
  text-align: center;
}

.matrix_btn {
  margin-top: 24px;
  width: 160px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: var(--navy);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(34, 63, 133, 0.33);
}

/* match */
.section_match { padding: 50px 0 50px; background: #fff; }

.match_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  text-align: center;
  line-height: 32px;
}

.match_sub {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #073189;
  font-size: 14px;
}

.match_sub .line { width: 44px; height: 1px; background: var(--orange); flex-shrink: 0; }

.match_swiper {
  width: 100%;
  margin-top: 17px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.match_slide {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 16px;
  scroll-snap-align: center;
}

.match_swiper::-webkit-scrollbar { display: none; }
.match_swiper { cursor: grab; }
.match_swiper.dragging { scroll-snap-type: none; cursor: grabbing; }

.match_card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(34, 63, 133, 0.1);
}

.match_img { width: 100%; height: 158px; overflow: hidden; }

.match_img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.match_tag {
  margin: 15px 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--orange);
  border-radius: 14px;
  background: #FFF3E8;
  color: #984400;
  font-size: 14px;
  line-height: 18px;
}

.match_tag .tri {
  width: 0;
  height: 0;
  border-left: 13px solid #DC6300;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
}

.match_name {
  margin: 12px 16px 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
}

.match_desc {
  margin: 10px 16px 18px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 18px;
}

.swiper_dots { display: flex; align-items: center; gap: 8px; }

.swiper_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C6D4F6;
  transition: background 0.3s;
}

.swiper_dot.active { background: var(--navy); }

.match_btn {
  margin-top: 24px;
  width: 160px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: var(--navy);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(34, 63, 133, 0.33);
}

/* video */
.section_video { padding: 50px 0 50px; background: var(--navy); }

.video_title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  line-height: 32px;
}

.video_sub {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #FFC267;
  font-size: 12px;
  white-space: nowrap;
  padding: 0 16px;
  text-align: center;
}

.video_sub .line { width: 22px; height: 1px; background: #FFC267; flex-shrink: 0; }

.video_grid {
  width: var(--view-width);
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 11px;
}

.video_card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  background: #fff;
  border: 1px solid var(--line-soft);
}

.video_card .cover { width: 100%; height: auto; display: block; }

.video_card .tint { position: absolute; inset: 0; background: rgba(8, 40, 109, 0.1); }

.video_card .play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 41px;
  height: 41px;
  margin: -20.5px 0 0 -20.5px;
  display: block;
}

/* idea */
.section_idea { padding: 50px 0 0; background: #fff; }

.idea_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-deep);
  text-align: center;
}

.idea_sub {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #073189;
  font-size: 14px;
}

.idea_sub .line { width: 44px; height: 1px; background: var(--orange); flex-shrink: 0; }

.idea_img {
  width: var(--view-width);
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.idea_img img { width: 100%; height: auto; display: block; }

.idea_quote {
  width: var(--view-width);
  margin-top: 20px;
  padding-left: 16px;
  border-left: 3px solid #3C62BC;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #111A32;
}

.idea_text {
  width: var(--view-width);
  margin-top: 13px;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-body);
}

.idea_text + .idea_text { margin-top: 12px; }

.cta_card {
  position: relative;
  width: var(--view-width);
  margin-top: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.cta_card img { width: 100%; height: 156px; object-fit: cover; display: block; }

.cta_hotspot {
  position: absolute;
  left: 9.4%;
  top: 61.5%;
  width: 44%;
  height: 23%;
  border-radius: 18px;
  cursor: pointer;
  z-index: 3;
}

.footer_note {
  width: var(--view-width);
  margin: 20px 0 50px;
  min-height: 111px;
  background: #F1F5F9;
  padding: 16px 16px 0;
}

.footer_note p {
  margin: 0 0 2px;
  color: #1E384D;
  font-size: 13px;
  line-height: 19px;
}