body {
  margin: 0;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}
:root {
  --base-width: 3.75 * 1vw;
}
[v-cloak] {
  display: none;
}
#app {
  min-height: 100vh;
  background-image: url(../img/baselover_background.png);
  background-size: 100% 100%;
  font-size: 16px;
  overflow-x: hidden;
}
.title {
  width: calc(351 / var(--base-width));
  height: calc(110 / var(--base-width));
  background-image: url(../img/baselover_title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  margin: 0 auto;
  display: block;
}
.tip {
  width: calc(351 / var(--base-width));
  height: calc(118 / var(--base-width));
  border-radius: calc(15 / var(--base-width));
  border: calc(3 / var(--base-width)) solid #BCB8FF;
  box-sizing: border-box;
  background-color: #6657FC;
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  line-height: calc(28 / var(--base-width));
  padding: 0 calc(15 / var(--base-width));
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.tip_big {
  font-size: calc(16 / var(--base-width));
  margin-right: calc(10 / var(--base-width));
}
.tip_yellow {
  color: #FFEE03;
  font-weight: bold;
}
.main {
  width: calc(351 / var(--base-width));
  border-radius: calc(15 / var(--base-width));
  background: rgba(102, 87, 252, 0.50);
  padding: calc(18 / var(--base-width)) calc(12 / var(--base-width));
  box-sizing: border-box;
  /* margin-top: calc(10 / var(--base-width)); */
  margin: calc(10 / var(--base-width)) auto;
}
.main_top {
  width: 100%;
  position: relative;
}
.main_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main_header_item {
  display: flex;
  align-items: center;
}
.main_header_item_label {
  font-size: calc(14 / var(--base-width));
  color: #FFF;
}
.main_sex {
  width: calc(48 / var(--base-width));
  height: calc(28 / var(--base-width));
  border: calc(1 / var(--base-width)) solid #FFF;
  border-radius: calc(4 / var(--base-width));
  background-color: transparent;
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(6 / var(--base-width));
  transition: all 0.25s;
  cursor: pointer;
}
.main_sex-select {
  background-color: #ED8E00;
}
.main_select {
  width: calc(72 / var(--base-width));
  height: calc(28 / var(--base-width));
  border: calc(1 / var(--base-width)) solid #FFF;
  border-radius: calc(4 / var(--base-width));
  background-color: #ED8E00;
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12 / var(--base-width));
  box-sizing: border-box;
  cursor: pointer;
}
.main_select_row {
  width: calc(10 / var(--base-width));
  height: calc(6 / var(--base-width));
  background-image: url(../img/arrow_down.png);
  background-size: 100% 100%;
}
.main_pop {
  position: absolute;
  top: calc(40 / var(--base-width));
  width: 100%;
  padding: calc(20 / var(--base-width)) calc(12 / var(--base-width));
  box-sizing: border-box;
  background: #FFF;
  border-radius: calc(14 / var(--base-width));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main_pop_title {
  font-size: calc(18 / var(--base-width));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(22 / var(--base-width));
}
.main_pop_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(12 / var(--base-width));
}
.main_pop_list_item {
  width: calc(66 / var(--base-width));
  height: calc(34 / var(--base-width));
  border-radius: calc(4 / var(--base-width));
  background: #F1F1F1;
  font-size: calc(14 / var(--base-width));
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(1 / var(--base-width)) solid #F1F1F1;
  box-sizing: border-box;
  cursor: pointer;
}
.mbtl_current {
  color: #ED8E00;
  font-weight: bold;
  border-color: #ED8E00;
}
.main_test {
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  margin-top: calc(12 / var(--base-width));
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.main_test_btn {
  color: #FFEE03;
  margin-left: calc(7 / var(--base-width));
  display: flex;
  align-items: center;
  cursor: pointer;
}
.main_test_btn_arrow {
  width: calc(10 / var(--base-width));
  height: calc(10 / var(--base-width));
  margin-left: calc(4 / var(--base-width));
  background-image: url(../img/test_arrow_yellow.png);
  background-size: 100% 100%;
}
.main_content {
  width: 100%;
  height: calc(130 / var(--base-width));
  border-radius: calc(8 / var(--base-width));
  background: #FFF;
  display: flex;
  align-items: center;
  padding: calc(6 / var(--base-width));
  box-sizing: border-box;
  margin-top: calc(18 / var(--base-width));
}
.main_content_img {
  width: calc(138 / var(--base-width));
  height: calc(118 / var(--base-width));
  border-radius: calc(5 / var(--base-width));
  margin-right: calc(6 / var(--base-width));
  flex-shrink: 0;
  background: #d6ebe2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main_content_img_url {
  width: 75%;
}
.main_content_text {
  font-size: calc(14 / var(--base-width));
  color: #333;
  line-height: calc(22 / var(--base-width));
}
.main_content_text.h5 {
  display: block;
}
.main_content_text.pc {
  display: none;
}
.main_label {
  margin-top: calc(20 / var(--base-width));
}
.main_label.h5 {
  display: block;
}
.main_label.pc {
  display: none;
}
.main_label_title {
  font-size: calc(14 / var(--base-width));
  color: #FFF;
}
.main_label_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10 / var(--base-width)) calc(7 / var(--base-width));
  margin-top: calc(10 / var(--base-width));
}
.main_label_list_item {
  height: calc(28 / var(--base-width));
  border-radius: calc(4 / var(--base-width));
  background: #5245DD;
  border: calc(1 / var(--base-width)) solid #5245DD;
  box-sizing: border-box;
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(10 / var(--base-width));
  min-width: calc(38 / var(--base-width));
  box-sizing: border-box;
  transition: all 0.25s;
  cursor: pointer;
}
.label_current {
  background: #E78110;
  border-color: #FFF;
}
.main_label_tip {
  font-size: calc(12 / var(--base-width));
  color: #FFF;
  margin-top: calc(18 / var(--base-width));
}
.start {
  width: calc(351 / var(--base-width));
  height: calc(50 / var(--base-width));
  border-radius: calc(50 / var(--base-width));
  background: linear-gradient(to right, #FF9613, #EEA61A);
  font-size: calc(22 / var(--base-width));
  font-weight: 600;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(14 / var(--base-width)) auto;
  cursor: pointer;
}
.base {
  width: calc(351 / var(--base-width));
  border: calc(3 / var(--base-width)) solid #BCB8FF;
  border-radius: calc(15 / var(--base-width));
  background: rgba(102, 87, 252, 0.50);
  padding: calc(18 / var(--base-width)) calc(9 / var(--base-width));
  box-sizing: border-box;
  margin: calc(10 / var(--base-width)) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
.base_title {
  font-size: calc(18 / var(--base-width));
  font-weight: bold;
  color: #FFF;
  margin-bottom: calc(16 / var(--base-width));
}
.base_content {
  width: 100%;
  border-radius: calc(8 / var(--base-width));
  background: #FFF;
  display: flex;
  align-items: center;
  padding: calc(12 / var(--base-width)) calc(9 / var(--base-width));
  box-sizing: border-box;
}
.base_content_img {
  width: calc(138 / var(--base-width));
  height: calc(118 / var(--base-width));
  border-radius: calc(5 / var(--base-width));
  flex-shrink: 0;
  background: #d6ebe2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(20 / var(--base-width));
}
.base_content_img_url {
  width: 75%;
  flex-shrink: 0;
}
.base_content_msg {
  height: calc(118 / var(--base-width));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.base_content_msg_title {
  font-size: calc(35 / var(--base-width));
  font-weight: bold;
  color: #36785D;
}
.base_content_msg_percent {
  display: flex;
  align-items: center;
  gap: calc(7 / var(--base-width));
}
.base_content_msg_percent_title {
  font-size: calc(16 / var(--base-width));
  color: #333;
}
.base_content_msg_percent_num {
  font-size: calc(18 / var(--base-width));
  font-weight: bold;
  color: #F36161;
}
.base_content_msg_process {
  display: flex;
  align-items: center;
  margin-top: calc(13 / var(--base-width));
}
.base_content_msg_process_img {
  width: calc(18 / var(--base-width));
  height: calc(18 / var(--base-width));
  margin-right: calc(12 / var(--base-width));
  background-image: url(../img/baselover_qingmidu.png);
  background-size: 100% 100%;
}
.base_content_msg_process_line {
  width: calc(110 / var(--base-width));
  height: calc(10 / var(--base-width));
  border-radius: calc(10 / var(--base-width));
  background: #F1F1F1;
  position: relative;
}
.base_content_msg_process_line_total {
  width: 80%;
  height: 100%;
  border-radius: calc(10 / var(--base-width));
  background: #ff5566;
  transition: all 0.2s;
  position: absolute;
  left: 0;
  top: 0;
}

@media (min-width: 750px) {
  :root {
    --base-width: 19.2 * 1vw;
  }
  #app {
    background-image: url(../img/baselover_pc_background.png);
    background-size: 100% 23.43vw;
    background-repeat: no-repeat;
  }
  .title {
    width: calc(645 / var(--base-width));
    height: calc(202 / var(--base-width));
  }
  .tip {
    width: calc(1200 / var(--base-width));
    height: calc(142 / var(--base-width));
    font-size: calc(20 / var(--base-width));
    line-height: normal;
    padding: calc(28 / var(--base-width)) calc(32 / var(--base-width));
    box-sizing: border-box;
    margin-top: calc(12 / var(--base-width));
  }
  .tip_wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .tip_big {
    font-size: 1.25vw;
  }
  .main {
    width: calc(1200 / var(--base-width));
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-top: calc(36 / var(--base-width));
  }
  .main_top {
    display: flex;
    align-items: center;
  }
  .main_header {
    width: auto;
    justify-content: flex-start;
  }
  .main_header_item {
    margin-right: calc(60 / var(--base-width));
  }
  .main_header_item_label {
    font-size: calc(18 / var(--base-width));
    color: #333;
  }
  .main_test {
    color: #333;
    margin-top: 0;
    display: flex;
    align-items: center;
    font-size: calc(18 / var(--base-width));
  }
  .main_test_btn {
    width: calc(96 / var(--base-width));
    height: calc(30 / var(--base-width));
    background: #595959;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(6 / var(--base-width));
    border-radius: calc(4 / var(--base-width));
  }
  .main_test_btn_arrow {
    width: calc(16 / var(--base-width));
    height: calc(16 / var(--base-width));
    margin-left: calc(6 / var(--base-width));
  }
  .main_sex {
    width: calc(68 / var(--base-width));
    height: calc(34 / var(--base-width));
    border-color: #787878;
    font-size: calc(18 / var(--base-width));
    color: #333;
    margin-right: calc(16 / var(--base-width));
  }
  .main_sex-select {
    background-color: #ED8E00;
    border-color: #ED8E00;
    color: #FFF;
  }
  .main_select {
    width: calc(98 / var(--base-width));
    height: calc(34 / var(--base-width));
    font-size: calc(18 / var(--base-width));
    padding: 0 calc(16 / var(--base-width));
  }
  .main_pop {
    position: absolute;
    top: calc(40 / var(--base-width));
    width: 100%;
    padding: calc(30 / var(--base-width)) calc(120 / var(--base-width));
    border-radius: 0;
  }
  .main_pop_title {
    display: none;
  }
  .main_pop_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(12 / var(--base-width));
  }
  .main_pop_list_item {
    width: calc(104 / var(--base-width));
    height: calc(48 / var(--base-width));
    font-size: calc(18 / var(--base-width));
  }
  .main_content {
    height: auto;
    padding: 0;
    margin-top: calc(30 / var(--base-width));
    align-items: flex-start;
  }
  .main_content_img {
    width: calc(362 / var(--base-width));
    height: calc(310 / var(--base-width));
    border-radius: calc(12 / var(--base-width));
    margin-right: calc(30 / var(--base-width));
  }
  .main_content_text {
    font-size: calc(20 / var(--base-width));
    line-height: calc(40 / var(--base-width));
  }
  .main_content_text.h5 {
    display: none;
  }
  .main_content_text.pc {
    display: block;
  }
  .main_label.h5 {
    display: none;
  }
  .main_label.pc {
    display: block;
  }
  .main_label_title {
    font-size: calc(18 / var(--base-width));
    color: #333;
  }
  .main_label_list {
    justify-content: flex-start;
    gap: calc(15 / var(--base-width)) calc(15 / var(--base-width));
    margin-top: calc(20 / var(--base-width));
  }
  .main_label_list_item {
    height: calc(34 / var(--base-width));
    font-size: calc(14 / var(--base-width));
    padding: 0 calc(14 / var(--base-width));
    min-width: calc(60 / var(--base-width));
  }
  .label_current {
    background: #E78110;
    border-color: #E78110;
  }
  .main_label_tip {
    color: #4D2222;
  }
  .start {
    width: calc(400 / var(--base-width));
    height: calc(60 / var(--base-width));
    border-radius: calc(60 / var(--base-width));
    font-size: calc(22 / var(--base-width));
    margin-top: calc(90 / var(--base-width));
  }
  .base {
    width: calc(532 / var(--base-width));
    padding: calc(27 / var(--base-width)) calc(21 / var(--base-width));
  }
  .base_title {
    font-size: calc(24 / var(--base-width));
    margin-bottom: calc(24 / var(--base-width));
  }
  .base_content {
    height: auto;
    padding: calc(12 / var(--base-width));
  }
  .base_content_img {
    width: calc(164 / var(--base-width));
    height: calc(140 / var(--base-width));
  }
  .base_content_msg {
    height: calc(140 / var(--base-width));
  }
  .base_content_msg_title {
    font-size: calc(46 / var(--base-width));
  }
  .base_content_msg_percent {
    gap: calc(4 / var(--base-width));
  }
  .base_content_msg_percent_title {
    font-size: calc(20 / var(--base-width));
  }
  .base_content_msg_percent_num {
    font-size: calc(24 / var(--base-width));
  }
  .base_content_msg_process_img {
    width: calc(30 / var(--base-width));
    height: calc(30 / var(--base-width));
  }
  .base_content_msg_process_line {
    width: calc(228 / var(--base-width));
    height: calc(10 / var(--base-width));
    border-radius: calc(10 / var(--base-width));
  }
  .base_content_msg_process_line_total {
    border-radius: calc(10 / var(--base-width));
  }
}