.identify-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px 0;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f1f7ff 3%, #fcfeff 100%);
}
.portal-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 604px;
  margin-bottom: 35px;
}
.portal-header .portal-title {
  color: #061178;
  font-family: "Alibaba PuHuiTi 3.0";
  font-size: 56px;
  font-style: normal;
  font-weight: 900;
  line-height: 64px;
  /* 114.286% */
  letter-spacing: 2px;
}
.portal-header .portal-subtitle {
  color: var(--Primary-8, #10239e);
  font-family: "PingFang SC";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  /* 100% */
}
.portal-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 0;
  gap: 24px;
  width: 1272px;
  margin: 0 auto;
}
.portal-card {
  position: relative;
  flex: 0 0 394px;
  width: 394px;
  height: 650px;
  min-height: 650px;
  border: 1px solid transparent;
  border-radius: 15px;
  overflow: hidden;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.45s ease, box-shadow 0.45s ease;
}
.portal-card.active {
  flex: 0 0 854px;
  cursor: default;
}
.portal-card .card-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 44px 30px 30px;
  box-sizing: border-box;
}
.portal-card .card-decor {
  display: none;
  position: absolute;
  z-index: 0;
  top: 40px;
  right: 40px;
  width: 240px;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.portal-card .card-header {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-bottom: 24px;
  transition: margin 0.3s ease;
}
.portal-card .card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.portal-card .card-title {
  margin: 0;
  font-family: "Alibaba PuHuiTi 3.0";
  font-size: 34px;
  font-weight: 800;
  line-height: 36px;
  transition: color 0.3s ease;
}
.portal-card .card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border: 1px solid transparent;
  border-radius: 18px;
  font-family: "Alibaba PuHuiTi 3.0";
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.portal-card .card-tag--active {
  display: none;
}
.portal-card .card-subtitle {
  display: none;
  margin: 15px 0 0;
  font-family: "Alibaba PuHuiTi 3.0";
  font-size: 18px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
}
.portal-card .card-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin-bottom: 24px;
  padding: 0 24px;
  border-radius: 4px;
  font-family: "PingFang SC";
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
@keyframes qqpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  70% {
    box-shadow: 0 0 0 22px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.portal-card .card-cta .cta-arrow {
  width: 16px;
  height: 16px;
  background: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/arrow-white.svg") no-repeat center / contain;
}
.portal-card .card-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.portal-card .grid-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  box-sizing: border-box;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.portal-card .grid-item-top {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.portal-card .grid-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: width 0.3s ease, height 0.3s ease;
}
.portal-card .feature-arrow {
  display: block;
  width: 20px;
  height: 20px;
  margin-left: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s linear;
  opacity: 0;
}
.portal-card .grid-title {
  margin: 0;
  font-family: "PingFang SC";
  font-size: 18px;
  font-weight: 600;
  color: #040b19;
  line-height: 24px;
  transition: all 0.3s linear;
}
.portal-card .grid-desc {
  display: none;
  margin: 0;
  font-family: "PingFang SC";
  font-size: 13px;
  font-weight: 400;
  color: #474d58;
  line-height: normal;
  transition: all 0.3s linear;
}
.portal-card .card-switch-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 20px;
  font-family: "Alibaba PuHuiTi 3.0";
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.portal-card.active {
  border-color: #fff;
  box-shadow: 0 0 25px 0 rgba(45, 96, 205, 0.3);
}
.portal-card.active .card-decor {
  display: block;
}
.portal-card.active .card-header {
  margin-bottom: 30px;
}
.portal-card.active .card-title {
  font-size: 38px;
  color: #fff;
}
.portal-card.active .card-subtitle {
  color: #fff;
}
.portal-card.active .card-tag--default {
  display: none;
}
.portal-card.active .card-tag--active {
  display: inline-flex;
  border-color: #fff;
  color: #fff;
}
.portal-card.active .card-subtitle {
  display: block;
}
.portal-card.active .card-cta {
  margin-bottom: 40px;
}
.portal-card.active .card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.portal-card.active .grid-item {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  gap: 15px;
  padding: 28px 18px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: all 0.3s linear;
}
.portal-card.active .grid-item:hover .feature-arrow {
  opacity: 1;
}
.portal-card.active .grid-item-top {
  width: 100%;
  justify-content: space-between;
}
.portal-card.active .grid-icon {
  width: 34px;
  height: 34px;
}
.portal-card.active .grid-desc {
  display: block;
}
.portal-card.active .card-switch-link {
  display: none;
}
.portal-card.enterprise {
  background: linear-gradient(180deg, #cde3ff 0%, #e5f1ff 100%);
}
.portal-card.enterprise .card-decor {
  background-image: url(../img/card-decor-blue.63ea7a07.svg);
}
.portal-card.enterprise .card-title {
  color: #061178;
}
.portal-card.enterprise .card-tag--default {
  border-color: #10239e;
  color: #061178;
}
.portal-card.enterprise .card-cta {
  background: #2f54eb;
  color: #fff;
}
.portal-card.enterprise .card-switch-link {
  color: #061178;
}
.portal-card.enterprise .feature-arrow {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgMjEzNjYzODQ0OSI+CjxwYXRoIGlkPSJSZWN0YW5nbGUgMzQ2MjU5MzIiIGQ9Ik02Ljk3MjY2IDQuMDM4MDlMMTYuMDY0IDQuMDM4MDlMMTYuMDY0IDEzLjEyOTUiIHN0cm9rZT0idmFyKC0tc3Ryb2tlLTAsICMyRjU0RUIpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGlkPSJWZWN0b3IgNzU0IiBkPSJNMy45NDA0MyAxNi4xNjIxTDE2LjA2MjMgNC4wNDAyOCIgc3Ryb2tlPSJ2YXIoLS1zdHJva2UtMCwgIzJGNTRFQikiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4K);
}
.portal-card.enterprise .grid-item:nth-child(1) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-security.png");
}
.portal-card.enterprise .grid-item:nth-child(2) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-expert.png");
}
.portal-card.enterprise .grid-item:nth-child(3) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-gift1.png");
}
.portal-card.enterprise .grid-item:nth-child(4) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-gift3.png");
}
.portal-card.enterprise .grid-item:nth-child(5) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-globe.png");
}
.portal-card.enterprise .grid-item:nth-child(6) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-gift5.png");
}
.portal-card.enterprise.active {
  background: linear-gradient(124.9deg, #1956f1 1.15%, #936fff 100%);
}
.portal-card.enterprise.active .card-title {
  color: #fff;
}
.portal-card.enterprise.active .card-grid {
  grid-template-columns: repeat(3, 1fr);
}
.portal-card.enterprise.active .card-cta {
  background: #fff;
  border: 1px solid #2f54eb;
  color: #2f54eb;
  animation: qqpulse 2.2s ease-out infinite;
}
.portal-card.enterprise.active .cta-arrow {
  width: 16px;
  height: 16px;
  background: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/arrow-blue.svg") no-repeat center / contain;
}
.portal-card.enterprise.active .grid-item:hover {
  background: #fff;
  box-shadow: 2px 3px 6px 0 rgba(2, 9, 122, 0.3);
  transform: translateY(-5px);
}
.portal-card.enterprise.active .grid-item:hover .grid-title {
  color: #2f54eb;
}
.portal-card.enterprise.active .grid-item:hover .grid-desc {
  color: #040b19;
}
.portal-card.person {
  background: linear-gradient(180deg, #d3efff 0%, #e5f6ff 100%);
}
.portal-card.person .card-decor {
  background-image: url(../img/card-decor.684f7f38.svg);
}
.portal-card.person .card-title {
  color: #00474f;
}
.portal-card.person .card-tag--default {
  border-color: #006d75;
  color: #00474f;
}
.portal-card.person .card-cta {
  background: #21c58e;
  color: #fff;
}
.portal-card.person .card-switch-link {
  color: #00474f;
}
.portal-card.person .feature-arrow {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iRnJhbWUgMjEzNjYzODQ0OSI+CjxwYXRoIGlkPSJSZWN0YW5nbGUgMzQ2MjU5MzIiIGQ9Ik02Ljk3MjY2IDQuMDM4MDlMMTYuMDY0IDQuMDM4MDlMMTYuMDY0IDEzLjEyOTUiIHN0cm9rZT0idmFyKC0tc3Ryb2tlLTAsICMyMUM1OEUpIiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGlkPSJWZWN0b3IgNzU0IiBkPSJNMy45NDA0MyAxNi4xNjIxTDE2LjA2MjMgNC4wNDAyOCIgc3Ryb2tlPSJ2YXIoLS1zdHJva2UtMCwgIzIxQzU4RSkiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9nPgo8L3N2Zz4K);
}
.portal-card.person .grid-item:nth-child(1) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-workplace.png");
}
.portal-card.person .grid-item:nth-child(2) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-briefcase3.png");
}
.portal-card.person .grid-item:nth-child(3) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-briefcase4.png");
}
.portal-card.person .grid-item:nth-child(4) .grid-icon {
  background-image: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/icon-document1.png");
}
.portal-card.person.active {
  background: linear-gradient(124.9deg, #14b981 1.15%, #21c58e 100%);
}
.portal-card.person.active .card-title {
  color: #fff;
}
.portal-card.person.active .card-cta {
  background: #fff;
  color: #21c58e;
  animation: qqpulse 2.2s ease-out infinite;
}
.portal-card.person.active .cta-arrow {
  width: 16px;
  height: 16px;
  background: url("https://static.qinqinxiaobao.com/flb-mp/img/official-site-2026/portal/arrow-green.svg") no-repeat center / contain;
}
.portal-card.person.active .grid-item:hover {
  background: #fff;
  box-shadow: 2px 3px 6px 0 rgba(1, 93, 63, 0.3);
  transform: translateY(-5px);
}
.portal-card.person.active .grid-item:hover .grid-title {
  color: #21c58e;
}
.portal-card.person.active .grid-item:hover .grid-desc {
  color: #040b19;
}