@charset "UTF-8";
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block; }

html {
  width: 100%;
  height: 100%; }

body {
  line-height: 1; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden; }

i {
  font-style: normal; }

li {
  list-style: none; }

body {
  width: 100%;
  position: relative;
  font-family: Arial; }

img:not(.btn, .Bounced_Delete, .canvas_img, .skin_question_avatar_img, .pay_icon) {
  pointer-events: none; }

::-webkit-scrollbar {
  display: none; }

.line-clamp-six {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6; }

.progress {
  background: #3c3c3c;
  width: 5.250rem;
  height: 0.333rem;
  overflow: hidden;
  border-radius: 0.167rem;
  -webkit-appearance: none; }

::-ms-fill {
  background: #fafafa; }

::-moz-progress-bar {
  background: #fafafa; }

::-webkit-progress-bar {
  background: #3c3c3c; }

::-webkit-progress-value {
  background: #fafafa;
  border-radius: 0.167rem;
  overflow: hidden; }

.btnActive {
  opacity: 0.8;
  margin-top: 0.200rem; }

#index .title, #test_page .title, #inspectionRecords .title {
  position: fixed;
  top: 0rem;
  width: 100%;
  height: 2.445rem;
  line-height: 2.445rem;
  text-align: center;
  font-size: 0.833rem;
  font-weight: bold;
  letter-spacing: 0.083rem;
  color: #ececec;
  box-shadow: 0rem 0.042rem 0rem 0rem rgba(255, 255, 255, 0.2);
  background-color: #040920;
  z-index: 100; }

#index .white_title, #test_page .white_title, #inspectionRecords .white_title {
  color: #000;
  background: #fff; }

#index, #test_page, #inspectionRecords, #Share_details {
  -webkit-touch-callout: none;
  /*系统默认菜单被禁用*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早起浏览器*/
  -moz-user-select: none;
  /*火狐浏览器*/
  -ms-user-select: none;
  /*IE浏览器*/
  user-select: none;
  /*用户是否能够选中文本*/ }

#index {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  text-align: center;
  position: absolute; }
  #index .index_bg {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: absolute;
    z-index: -1; }
  #index .model_box {
    position: relative;
    background: url("../img/blackWhite/Home_pic_Model@2x.png");
    background-size: 100% 100%;
    width: 18.4rem;
    margin-top: 4.02rem;
    height: 19.2rem;
    margin: 0 auto;
    margin-top: 5.02rem; }
  #index .white_color {
    background: url("../img/blackWhite/Home_Bg@2x.png") no-repeat;
    background-size: 100% 100%; }
  #index .rightBrn {
    border: .111rem #4cc4fc solid;
    padding: 0 0.533rem;
    height: 1.528rem;
    line-height: 1.528rem;
    border-top-left-radius: 1.767rem;
    border-bottom-left-radius: 1.767rem;
    font-size: .667rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    color: #a8bce7;
    position: absolute;
    top: 3.667rem;
    right: -.553rem;
    -webkit-tap-highlight-color: transparent; }
  #index .white_btn {
    color: #343434;
    border: .111rem #343434 solid; }
  #index .home_pic {
    width: 48vh;
    margin-top: calc(27vh - 2.1rem); }
  #index .pop_up {
    position: absolute;
    width: 6.38rem;
    height: 10.28rem;
    overflow: hidden; }
    #index .pop_up .pop_up_img {
      max-width: 100%;
      max-height: 100%; }
    #index .pop_up .pop_up_content {
      position: absolute;
      top: 2.27rem;
      left: 0.69rem;
      display: flex;
      align-items: center; }
      #index .pop_up .pop_up_content img {
        -webkit-animation: opacity 1.5s;
        width: 0.555rem;
        height: 0.555rem; }
      #index .pop_up .pop_up_content .text {
        margin-left: 0.222rem;
        padding: 0 0.267rem;
        display: inline-block;
        height: 1.000rem;
        line-height: 1rem;
        background-color: #fcfcfc;
        border-radius: 0.111rem;
        font-size: 0.611rem;
        letter-spacing: 0.017rem;
        color: #4f4e4f;
        -webkit-animation: width 1.5s linear;
        overflow: hidden; }
      #index .pop_up .pop_up_content.Serious {
        top: 5.722rem;
        left: 1.027rem; }
      #index .pop_up .pop_up_content.Charm, #index .pop_up .pop_up_content.white_charm {
        top: 8.05rem;
        left: 1.16rem; }
        #index .pop_up .pop_up_content.Charm span, #index .pop_up .pop_up_content.white_charm span {
          font-family: Roboto-Bold;
          font-size: 0.555rem;
          font-weight: normal;
          font-stretch: normal;
          line-height: .667rem;
          letter-spacing: 0.2rem;
          color: #343434;
          width: 60%;
          text-align: left; }
        #index .pop_up .pop_up_content.Charm .value, #index .pop_up .pop_up_content.white_charm .value {
          font-family: Roboto-Medium;
          font-size: 1.333rem;
          line-height: .667rem;
          letter-spacing: 0.042rem;
          color: #343434; }
  #index .white_pop_up {
    top: 1.13rem;
    left: 9.305rem; }
    #index .white_pop_up .pop_up_content.Serious {
      top: 5.722rem;
      left: 1.027rem; }
  #index .clues {
    text-align: center;
    width: 10.005rem;
    font-size: 0.747rem;
    line-height: 1.195rem;
    letter-spacing: 0.359rem;
    color: #ececec;
    margin: 0 auto 1.695rem; }
  #index .white_clues {
    color: #000; }
  #index .phoBtn, #index .wxBtn {
    width: 4.167rem; }

@-webkit-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes width {
  0% {
    width: 0; }
  100% {
    width: 72%; } }

.uplaod-box {
  font-size: 0;
  position: relative;
  padding: 0;
  width: 4.167rem;
  user-select: none;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden; }

.uplaod-box::after {
  position: absolute;
  content: "";
  display: block;
  width: 200px;
  height: 40px;
  bottom: -100%;
  left: -100%;
  transition: all 0.5s;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(60deg);
  -o-animation: btnMove 1.5s infinite;
  -webkit-animation: btnMove 1.5s infinite;
  -moz-animation: btnMove 1.5s infinite;
  animation-delay: 2s;
  -webkit-animation-delay: 2s; }

.uplaod-box::before {
  position: absolute;
  content: "";
  display: block;
  width: 200px;
  height: 40px;
  top: -100%;
  right: -100%;
  transition: all 0.5s;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(60deg);
  -o-animation: btnMove-1 1.5s infinite;
  -webkit-animation: btnMove-1 1.5s infinite;
  -moz-animation: btnMove-1 1.5s infinite;
  animation-delay: 2s;
  -webkit-animation-delay: 2s; }

@keyframes btnMove {
  0% {
    bottom: -100%;
    left: -100%;
    transition: all 0.2s; }
  100% {
    left: 110%;
    bottom: 110%;
    transition: all 0.2s; } }

@keyframes btnMove-1 {
  0% {
    top: -100%;
    right: -100%;
    transition: all 0.2s; }
  100% {
    right: 110%;
    top: 110%;
    transition: all 0.2s; } }

@media screen and (min-width: 720px) {
  #index .title {
    width: 100%;
    height: 59px;
    font-size: 22px;
    line-height: 59px;
    box-shadow: none;
    color: #343434;
    border-bottom: 1px solid #f5f5f5; }
  #index .white_color {
    background: url("../img/indexWhite_bg.png") no-repeat;
    background-size: 100% 100%; }
  #index .home_pic_weChat {
    margin-top: 135px; }
  #index .home_pic {
    width: 458px;
    margin-top: 138px; }
  #index .model_box {
    width: 535px;
    height: 527px;
    margin-top: 120px; }
  #index .white_pop_up {
    top: 37px;
    left: 251px; }
  #index .pop_up {
    width: 230px;
    height: 280px; }
    #index .pop_up .pop_up_img {
      width: 195px;
      height: 300px; }
    #index .pop_up .pop_up_content {
      left: 47px;
      top: 51px; }
      #index .pop_up .pop_up_content img {
        width: 16px;
        height: 16px; }
      #index .pop_up .pop_up_content .text {
        height: 28.8px;
        line-height: 28.8px;
        font-size: 16px;
        padding: 0 7px;
        margin-left: 8px;
        border-radius: 4px;
        white-space: nowrap;
        letter-spacing: 1px;
        color: #343434; }
    #index .pop_up .pop_up_content.Serious {
      left: 47px;
      top: 155px; }
    #index .pop_up .pop_up_content.Charm {
      top: 207px;
      left: 51px; }
      #index .pop_up .pop_up_content.Charm span {
        font-size: 20px;
        letter-spacing: 3px;
        line-height: 25px;
        width: 40%; }
      #index .pop_up .pop_up_content.Charm .value {
        font-size: 38px;
        margin-left: 10px; }
  #index .rightBrn {
    width: 160px;
    height: 55px;
    border-radius: 28px 0px 0px 28px;
    font-size: 22px;
    top: 173px;
    line-height: 55px;
    border: 2px #333333 solid;
    color: #343434; }
  #index .clues {
    font-size: 28px;
    width: 353px;
    line-height: 40px;
    letter-spacing: 10px;
    margin: 0 auto 50px; }
  #index .phoBtn, #index .wxBtn {
    width: 100px;
    height: 100px; }
  #index .uplaod-box {
    width: 100px; } }