@charset "UTF-8";
/**
 * --app-height：由 JS 写入的真实可视高度，兜底用 svh / dvh / 100%
 * 保证主体内容始终落在浏览器工具栏之上的一屏内
 */
:root {
  --app-height: 100%;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body, html {
  width: 100%;
  height: 100%;
  height: 100dvh;
  height: 100svh;
  height: var(--app-height);
  overflow: hidden;
  background-color: #fff2b8;
}

html { position: relative; width: 100%; font-size: 100px; }

.wrap {
  width: 100%;
  height: 100%;
  height: var(--app-height);
  position: relative;
  overflow: hidden;
  font-family: font;
}

.wrap.show { display: block; animation: ani-fade-in 0.4s 0s both; z-index: 1; }

@font-face { font-family: font; src: url(../ossweb-img//fonts/font.ttf); }

.head_btn_box { display: flex; justify-content: center; align-items: center; gap: 0.1rem; padding: 0 0.1rem; }

@keyframes ani-fade-in { 0% { opacity: 0; }
  100% { opacity: 1; } }

/**
 * part 通用：占满可视区，内部用 flex 分配空间，底部按钮不被裁切
 */
.part1,
.part2,
.part3,
.part4,
.part5 {
  width: 100%;
  height: 100%;
  height: var(--app-height);
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: none;
  flex-direction: column;
}
.part1.is-active,
.part2.is-active,
.part3.is-active,
.part4.is-active,
.part5.is-active {
  display: flex;
}

.part1 {
  background: url(../images/bg.jpg) no-repeat center top;
  background-size: cover;
}
.part1_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 5.13rem;
  padding-bottom: calc(0.4rem + var(--safe-bottom));
  box-sizing: border-box;
}
.index_logo{
  background: url(../images/logo.png) no-repeat; background-size: 100% 100%; width: 1.37rem; height: 1.22rem;
  position: absolute;
  right: .23rem;
  top: .13rem;
  z-index: 2;
}
/**
 * 准星：相对文案框定位，最终停在顶边偏右（与设计稿一致）
 * 先四处游走寻敌，再锁定到顶边，随后轻微呼吸
 */
.aim{
  background: url(../images/target.png) no-repeat; background-size: 100% 100%;
  width: .72rem;
  height: .72rem;
  position: absolute;
  left: 5.01rem;
  top: -0.36rem;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}
.part1.is-active .aim {
  animation:
    aim-search 2.6s cubic-bezier(0.45, 0.05, 0.25, 1) both,
    aim-pulse 1.4s 2.6s ease-in-out infinite;
}
.part1.is-active .index_logo {
  animation: part1-logo-in 0.7s 0.1s ease both;
}
.part1.is-active .title1 {
  animation: part1-title-in 0.85s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.part1.is-active .index_txt_box {
  animation: part1-panel-in 0.7s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.part1.is-active .index_txt1 {
  animation: part1-fade-up 0.55s 0.75s ease both;
}
.part1.is-active .index_txt2 {
  animation: part1-fade-up 0.55s 0.95s ease both;
}
.part1.is-active .llinebox {
  animation: part1-line-in 0.6s 1.1s ease both;
}
.part1.is-active .part1_btn_box {
  animation: part1-btn-in 0.65s 1.25s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.part1.is-active .btn_kscs {
  animation: part1-btn-glow 1.8s 2s ease-in-out infinite;
}

@keyframes aim-search {
  0% {
    opacity: 0;
    transform: translate(-3.8rem, -4.5rem) scale(0.55) rotate(-25deg);
  }
  12% {
    opacity: 1;
    transform: translate(-2.8rem, -3.8rem) scale(1) rotate(0deg);
  }
  28% {
    transform: translate(1.2rem, -4.2rem) scale(1.08) rotate(8deg);
  }
  42% {
    transform: translate(-3.2rem, -1.6rem) scale(0.92) rotate(-12deg);
  }
  58% {
    transform: translate(0.6rem, -2.8rem) scale(1.12) rotate(6deg);
  }
  72% {
    transform: translate(-1.8rem, -0.9rem) scale(0.96) rotate(-4deg);
  }
  86% {
    transform: translate(0.2rem, 0.15rem) scale(1.18) rotate(2deg);
  }
  94% {
    transform: translate(0, 0) scale(0.92) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}
@keyframes aim-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(252, 154, 102, 0)) brightness(1); }
  50% { filter: drop-shadow(0 0 0.1rem rgba(252, 154, 102, 0.9)) brightness(1.15); }
}
@keyframes part1-logo-in {
  0% { opacity: 0; transform: translate(0.4rem, -0.2rem) scale(0.85); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes part1-title-in {
  0% { opacity: 0; transform: translateY(0.5rem) scale(0.92); filter: blur(0.04rem); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes part1-panel-in {
  0% { opacity: 0; transform: translateY(0.45rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes part1-fade-up {
  0% { opacity: 0; transform: translateY(0.2rem); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes part1-line-in {
  0% { opacity: 0; transform: scaleX(0.35); transform-origin: left center; }
  100% { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}
@keyframes part1-btn-in {
  0% { opacity: 0; transform: translateY(0.35rem) scale(0.88); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes part1-btn-glow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .part1.is-active .aim,
  .part1.is-active .index_logo,
  .part1.is-active .title1,
  .part1.is-active .index_txt_box,
  .part1.is-active .index_txt1,
  .part1.is-active .index_txt2,
  .part1.is-active .llinebox,
  .part1.is-active .part1_btn_box,
  .part1.is-active .btn_kscs {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.part2_logo{
  background: url(../images/logo.png) no-repeat; background-size: 100% 100%; width: 1.37rem; height: 1.22rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .13rem;
}
.part3_logo{
  background: url(../images/logo.png) no-repeat; background-size: 100% 100%; width: 1.37rem; height: 1.22rem;
  margin: 0 auto;
}
.title1 { 
  background: url(../images/slogan.png) no-repeat; background-size: 100% 100%; width: 6.79rem; height: 2.36rem; margin: 0 auto 1.1rem;
  flex-shrink: 0;
 }

.index_txt_box {
  background: url(../images/index_txt_bg.png) no-repeat;
  background-size: 100% 100%;
  width: 7.07rem;
  height: 2.68rem;
  margin: 0 auto;
  padding-top: .45rem;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.index_txt1{
  width: 6.7rem;
  font-size: .28rem;color: #fff;
  text-align: center;
  border-bottom: .01rem solid #fc9ea0;
  padding-bottom: .2rem;
  margin: 0 auto .2rem;
}
.index_txt1 span{
  color: #fc9ea0;
}
.index_txt2{
  font-size: .28rem;color: #fff;
  width: 6.7rem;
  margin: 0 auto;
}
.llinebox{
  background: url(../images/line.png) no-repeat; background-size: 100% 100%; width: 4.83rem; height: .19rem; margin: .2rem 0 .2rem .29rem;
  flex-shrink: 0;
}
.part2 .llinebox{
  margin: .0 0 min(1.6rem, 8vh) .28rem;
}
.ansbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../images/ansboxbg.png) no-repeat; background-size: 100% 100%; width: 6.61rem; height: 3.66rem; margin: 0 auto;
  justify-content: center;
  color: #ffeaeb;
  flex-shrink: 0;
}
.ansbox ul {
  width: 3.6rem;
}
/** 第 5 题选项区更宽 */
.ansbox.ans-w5 ul {
  width: 5.6rem;
}
/** 第 6 题选项区宽度 */
.ansbox.ans-w6 ul {
  width: 4.2rem;
}
.ansbox li {
  margin-bottom: .4rem;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ansbox li:last-child {
  margin-bottom: 0;
}
.ansbox li:active {
  opacity: 0.85;
  transform: scale(0.98);
}
.ans_item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .16rem;
}
.ans_item p {
  font-size: .28rem;
  line-height: 1.4;
  color: #ffeaeb;
}
.ans_item .ans_label {
  color: #e58959;
}

/* 题目标题背景图：ques1 ~ ques6 */
.quesbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ques_title {
  width: 5.64rem;
  height: 1.4rem;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  flex-shrink: 0;
}
.ques_title_bg {
  width: 6.91rem;
  height: .22rem;
  margin: .1rem auto min(.5rem, 3vh);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  flex-shrink: 0;
}
.ques1 { background-image: url(../images/ques1.png); }
.ques2 { background-image: url(../images/ques2.png); }
.ques3 { background-image: url(../images/ques3.png); }
.ques4 { background-image: url(../images/ques4.png); }
.ques5 { background-image: url(../images/ques5.png); }
.ques6 { background-image: url(../images/ques6.png); }
.ques1_bg { background-image: url(../images/ques1_bg.png); }
.ques2_bg { background-image: url(../images/ques2_bg.png); }
.ques3_bg { background-image: url(../images/ques3_bg.png); }
.ques4_bg { background-image: url(../images/ques4_bg.png); }
.ques5_bg { background-image: url(../images/ques5_bg.png); }
.ques6_bg { background-image: url(../images/ques6_bg.png); }

.selbox{
  flex-shrink: 0;
  width: .31rem;
  height: .31rem;
  border: .02rem solid #fc9a66;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.selboxbg{
  width: .17rem;
  height: .17rem;
  border: .02rem solid #fc9a66;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}
.sel_curr{
  background-color: #fc9a66;
}
.part1_btn_box {
  display: flex;
  justify-content: center;
  gap: 0.1rem;
  padding: 0 0.1rem;
  margin-top: .1rem;
  flex-shrink: 0;
}
.part1_btn_box a{text-indent: -9999em;}
.btn_kscs { background: url(../images/index_btn.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto; }

.part2 {
  background: url(../images/select_bg.png) no-repeat center top;
  background-size: cover;
}
.part2 .part1_btn_box{
  margin-top: .5rem;
}
.part2_box{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: min(1rem, 6vh);
  padding-bottom: calc(0.4rem + var(--safe-bottom));
  box-sizing: border-box;
}
.part3{
  background: url(../images/loading_bg.jpg) no-repeat center top;
  background-size: cover;
}
.schedulebox{
  background: url(../images/jdt.png) no-repeat; background-size: 100% 100%; width: 7.13rem; height: 1.36rem; margin: 0 auto;position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.part3_box{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 0;
  padding-bottom: var(--safe-bottom);
  box-sizing: border-box;
}
/**
 * 进度条雪碧图 jdt1.png：656×184，共 6 帧
 * 每帧高 29px，帧间距 2px（步进 31px = 0.31rem）
 * 切换时只过渡 width，不做透明度变化，避免闪烁
 */
.schedule_item{
  background: url(../images/jdt1.png) no-repeat 0 0;
  background-size: 6.56rem 1.84rem;
  width: 1.11rem;
  height: .29rem;
  top: .53rem;
  left: .285rem;
  position: absolute;
  transform-origin: left center;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 第 1～6 帧 */
.schedule_item.jdt-step1 { background-position: 0 0; }
.schedule_item.jdt-step2 { background-position: 0 -0.31rem; }
.schedule_item.jdt-step3 { background-position: 0 -0.62rem; }
.schedule_item.jdt-step4 { background-position: 0 -0.93rem; }
.schedule_item.jdt-step5 { background-position: 0 -1.24rem; }
.schedule_item.jdt-step6 { background-position: 0 -1.55rem; }

.schedule_txt{
  font-size: .28rem;color: #fc9a66;
  text-align: center;
  position: absolute;
  bottom: .0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.btn_fhsyt{
  background: url(../images/select_btn1.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto;
}
.btn_jxcs{
  background: url(../images/select_btn2.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto;
}
.btn_tjda{
  background: url(../images/select_btn3.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto;
}
.btn_cxcs{
  background: url(../images/share_btn1.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto;
}
.btn_scwdbmtg{
  background: url(../images/share_btn2.png) no-repeat; background-size: 100% 100%; width: 2.99rem; height: 0.76rem; margin: 0 auto;
}
/**
 * 全站按钮统一点击反馈：缩小 + 压暗
 */
.btn_kscs,
.btn_fhsyt,
.btn_jxcs,
.btn_tjda,
.btn_cxcs,
.btn_scwdbmtg,
.btn_return {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
.btn_kscs:active,
.btn_fhsyt:active,
.btn_jxcs:active,
.btn_tjda:active,
.btn_cxcs:active,
.btn_scwdbmtg:active,
.btn_return:active,
.btn_kscs.is-press,
.btn_fhsyt.is-press,
.btn_jxcs.is-press,
.btn_tjda.is-press,
.btn_cxcs.is-press,
.btn_scwdbmtg.is-press,
.btn_return.is-press {
  transform: scale(0.94);
  filter: brightness(0.85);
  opacity: 0.9;
}
/** 首页「开始测试」有呼吸动画，按下时暂停以保证缩放反馈生效 */
.part1.is-active .btn_kscs:active,
.part1.is-active .btn_kscs.is-press {
  animation: none;
}
/* 题目切换过渡动画 */
.quesbox.ques-anim-next .ques_title,
.quesbox.ques-anim-next .ques_title_bg,
.quesbox.ques-anim-next .ansbox {
  animation: ques-slide-in-right 0.35s ease both;
}
.quesbox.ques-anim-prev .ques_title,
.quesbox.ques-anim-prev .ques_title_bg,
.quesbox.ques-anim-prev .ansbox {
  animation: ques-slide-in-left 0.35s ease both;
}

@keyframes ques-slide-in-right {
  0% { opacity: 0; transform: translateX(0.4rem); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes ques-slide-in-left {
  0% { opacity: 0; transform: translateX(-0.4rem); }
  100% { opacity: 1; transform: translateX(0); }
}
.loading_box{
  background: url(../images/loading_txt_bg.png) no-repeat; background-size: 100% 100%; width: 7.07rem; height: 3.45rem; margin: 0 auto;
  font-size: .45rem;
  color: #f2dcdd;
  text-align: center;
  padding-top: .8rem;
}
.loading_box span{
  color: #fc9ea0;
}
/**
 * 12 段环形 Loading：缩小尺寸，置于底图中心镂空区，不遮挡外圈装饰
 */
.loading_img{
  position: relative;
  background: url(../images/loading_icobg.png) no-repeat;
  background-size: 100% 100%;
  width: 1.31rem;
  height: 1.31rem;
  margin: 0 auto 0;
}
.loading_img i{
  position: absolute;
  left: 50%;
  top: 50%;
  width: .06rem;
  height: .16rem;
  margin-left: -.03rem;
  margin-top: -.32rem;
  border-radius: .03rem;
  background-color: #ece6e6;
  transform-origin: 50% .32rem;
  animation: loading-bar 1.2s linear infinite;
}
.loading_img i:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.1s; }
.loading_img i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -1s; }
.loading_img i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.9s; }
.loading_img i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.8s; }
.loading_img i:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.7s; }
.loading_img i:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.6s; }
.loading_img i:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.5s; }
.loading_img i:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.4s; }
.loading_img i:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.3s; }
.loading_img i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.loading_img i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.loading_img i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes loading-bar {
  0% {
    background-color: #c62828;
    opacity: 1;
  }
  100% {
    background-color: #ece6e6;
    opacity: 0.3;
  }
}
.part4_box{
  flex: 1;
  width: 7.5rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: min(6.1rem, 38vh);
  padding-bottom: calc(0.4rem + var(--safe-bottom));
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
/**
 * part4 出场：背景淡入 → 结果卡翻入 → 按钮依次弹入 → 底部提示上浮
 */
.part4.is-active .part4_box {
  animation: part4-bg-in 0.55s ease both;
}
.part4.is-active .result_txt {
  animation: part4-card-in 0.75s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.part4.is-active .part1_btn_box a:nth-child(1) {
  animation: part4-btn-in 0.55s 0.38s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.part4.is-active .part1_btn_box a:nth-child(2) {
  animation: part4-btn-in 0.55s 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.part4.is-active .part4_txt {
  animation: part4-tip-in 0.5s 0.62s ease both;
}

@keyframes part4-bg-in {
  0% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes part4-card-in {
  0% {
    opacity: 0;
    transform: translateY(0.55rem) scale(0.9);
    filter: blur(0.04rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes part4-btn-in {
  0% { opacity: 0; transform: translateY(0.4rem) scale(0.86); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes part4-tip-in {
  0% { opacity: 0; transform: translateY(0.25rem); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .part4.is-active .part4_box,
  .part4.is-active .result_txt,
  .part4.is-active .part1_btn_box a,
  .part4.is-active .part4_txt {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.green1,.green2,.yellow1,.yellow2,.red1,.red2,.red3,.red4{
  width: 7.5rem;
  max-width: 100%;
  margin: 0 auto;
}
.green1{
  background-image: url(../images/person/green1.jpg);
}
.green2{
  background-image: url(../images/person/green2.jpg);
}
.yellow1{
  background-image: url(../images/person/yellow1.jpg);
}
.yellow2{
  background-image: url(../images/person/yellow2.jpg);
}
.red1{
  background-image: url(../images/person/red1.jpg);
}
.red2{
  background-image: url(../images/person/red2.jpg);
}
.red3{
  background-image: url(../images/person/red3.jpg);
}
.red4{
  background-image: url(../images/person/red4.jpg);
}
.green_txt1,.green_txt2,.yellow_txt1,.yellow_txt2,.red_txt1,.red_txt2,.red_txt3,.red_txt4{
  width: 7.07rem; height: 4.86rem; margin: 0 auto;
  flex-shrink: 0;
}
.green_txt1{
  background: url(../images/person/green_txt1.png) no-repeat; background-size: 100% 100%; 
}
.green_txt2{
  background: url(../images/person/green_txt2.png) no-repeat; background-size: 100% 100%; 
}
.yellow_txt1{
  background: url(../images/person/yellow_txt1.png) no-repeat; background-size: 100% 100%; 
}
.yellow_txt2{
  background: url(../images/person/yellow_txt2.png) no-repeat; background-size: 100% 100%; 
}
.red_txt1{
  background: url(../images/person/red_txt1.png) no-repeat; background-size: 100% 100%; 
}
.red_txt2{
  background: url(../images/person/red_txt2.png) no-repeat; background-size: 100% 100%; 
}
.red_txt3{
  background: url(../images/person/red_txt3.png) no-repeat; background-size: 100% 100%; 
}
.red_txt4{
  background: url(../images/person/red_txt4.png) no-repeat; background-size: 100% 100%; 
}
.part4_txt{
  font-size: .24rem;
  text-align: center;
  line-height: .6rem;
  text-decoration: underline;
  text-underline-offset: .08rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.green .part4_txt{
  color: #85ffad;
}
.yellow .part4_txt{
  color: #f7f1d4;
}
.red .part4_txt{
  color: #f0dadc;
}
.part4_box .part1_btn_box{
  margin-top: .3rem;
}
.part5_box{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  position: relative;
  padding-bottom: calc(0.4rem + var(--safe-bottom));
  box-sizing: border-box;
  overflow: hidden;
}
/**
 * 分享图按设计稿 750×1624 用 rem 等比铺满宽度、顶对齐
 * 这样任意机型上，同一 rem 纵坐标始终落在图片同一水平线
 */
.part5_box #share_img{
  width: 100%;
  height: 16.24rem;
  object-fit: fill;
  object-position: center top;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.share_op{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16.24rem;
  z-index: 1;
}
.share_op img{
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
}
/**
 * 与设计稿中 RMB/TECH 上方虚线顶齐
 * 数值 = 设计稿距顶 px ÷ 100（当前约 1175px → 11.75rem），略有偏差只改这一处即可
 */
.part5_txt{
  width: .4rem;
  position: absolute;
  top: 9.75rem;
  left: 0;
  z-index: 1;
  font-size: .24rem;
  text-align: center;
  line-height: .3rem;
  flex-shrink: 0;
  padding: .06rem 0;
  background: rgba(0,0,0,0.7);
}
.green .part5_txt{
  color: #43ff59;
}
.yellow .part5_txt{
  color: #fccc36;
}
.red .part5_txt{
  color: #f15a70;
}
.btn_return{
  background: url(../images/person/return.png) no-repeat; background-size: 100% 100%; width: .45rem; height: 2.1rem; margin: 0;
  position: absolute;
  top: 15%;
  right: 0;
  z-index: 2;
  text-indent: -9999em;
}
.music{
  position: absolute;
  top: 4rem;
  left: 0;
  width: .45rem;
  height: .45rem;
  z-index: 20;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}
/** 底层遮罩：须 absolute + 较低 z-index，图标放 ::after 才能压在上面 */
.music::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,119,45,0.7);
  z-index: 0;
  border-radius: .08rem;
}
.music::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: .39rem;
  height: .38rem;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.music.is-press,
.music:active {
  transform: scale(0.92);
  filter: brightness(0.85);
  opacity: 0.9;
}
.btn_music_off::after{
  background: url(../images/muted.png) no-repeat center center; background-size: .3rem .3rem;
}
.btn_music_on::after{
  background: url(../images/volue.png) no-repeat center center; background-size: .3rem .3rem;
}
/**
 * 极矮屏：压缩固定高度模块，优先保证底部按钮完整可见
 */
@media (max-height: 640px) {
  .part1_box { padding-top: min(4.2rem, 28vh); }
  .title1 { height: 2rem; margin-bottom: 0.4rem; }
  .index_txt_box { height: 2.3rem; }
  .ansbox { height: 3.2rem; }
  .green_txt1,.green_txt2,.yellow_txt1,.yellow_txt2,
  .red_txt1,.red_txt2,.red_txt3,.red_txt4 { height: 4rem; }
  .part4_box { padding-top: min(5rem, 32vh); }
}