@charset "utf-8";
/* CSS Document */

body,
div,
img,
form,
input,
ul,
li,
h1,
h2,
a,
span,
p {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}
ul,
li {
  list-style: none;
}
body,
input,
h1,
h2 {
  font-family: '微软雅黑', '黑体';
  font-size: 16px;
  line-height: 30px;
  font-weight: normal;
  position: relative;
}

a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #d92636;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearflx:after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}
.cl {
  clear: both;
  height: 0px;
  overflow: hidden;
}

.none {
  display: none !important;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 音频设置 */
/* .audioBox{position: fixed; right: 30px; top: 30px; width: 36px; top: 36px;  z-index : 101;}
.play_on{background: url("play_on.png") no-repeat; width: 36px; height: 36px; background-size: 100%; display: none;}
.play_off{background: url("play_off.png") no-repeat; width: 36px; height: 36px; background-size: 100%; display: none;}
audio{display: none;} */

/* p0 */
.p0 {
  width: 100%;
  height: 100%;
  background: url('p0.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.p0_card1 {
  width: 705px;
  height: 883px;
  position: absolute;
  left: 26px;
  top: 186px;
}
.p0_card2 {
  width: 705px;
  height: 885px;
  position: absolute;
  left: 24px;
  top: 185px;
}
.p0_title {
  position: absolute;
  left: 206px;
  top: 409px;
}
.p0_tips_arrow {
  position: absolute;
  left: 355px;
  top: 729px;
}
.btn_start {
  position: absolute;
  left: 228px;
  top: 784px;
}
.p0 .p0_card1,
.p0 .p0_card2,
.p0 .p0_title,
.p0 .p0_tips_arrow,
.p0 .btn_start {
  opacity: 0;
  visibility: hidden;
}
.p0.home-ready .p0_card1,
.p0.home-ready .p0_card2,
.p0.home-ready .p0_title,
.p0.home-ready .p0_tips_arrow,
.p0.home-ready .btn_start {
  opacity: 1;
  visibility: visible;
}

/* p1 */
.bg {
  width: 100%;
  height: 100%;
  background:
    url('hands.png') no-repeat left bottom/491px 351px,
    url('cloud1.png') no-repeat left 99px/471px 211px,
    url('cloud2.png') no-repeat right 37px/458px 120px,
    url('idea2.png') no-repeat left 428px bottom 388px/83px 51px,
    url('idea1.png') no-repeat left 396px bottom 339px/58px 42px,
    url('p1.jpg') no-repeat center center/100% 100%;
  position: relative;
}
.p1_e1 {
  position: absolute;
  left: 0;
  top: 311px;
}
.p1_e2 {
  position: absolute;
  right: 0;
  top: 82px;
}
.q {
  position: absolute;
  left: 73px;
  top: 120px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-18px) scale(0.97);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s ease;
}
.bg [class*='_e'] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}
.bg.question-ready .q {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.bg.question-ready [class*='_e'] {
  /* keep hidden until per-element animation class is added */
  opacity: 0;
  visibility: hidden;
}
.ans {
  position: absolute;
  left: 0;
  bottom: 430px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s ease;
}
.bg.ans-ready .ans {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.ans div:nth-child(odd) {
  margin-bottom: -30px;
}
.ans div:nth-child(even) {
  margin-bottom: -20px;
}
.ans div:nth-child(1) {
  margin-left: 63px;
}
.ans div:nth-child(2) {
  margin-left: -93px;
}
.ans div:nth-child(3) {
  margin-left: 89px;
}
.ans div:nth-child(4) {
  margin-left: -105px;
}
.ans div:nth-child(5) {
  margin-left: 110px;
}

/* p2 */
.p2_e1 {
  position: absolute;
  left: 310px;
  top: 352px;
}
.p2_e2 {
  position: absolute;
  right: -20px;
  top: 82px;
}

/* p3 */
.p3_e1 {
  position: absolute;
  right: 0;
  top: 239px;
}

/* p4 */
.p4_e1 {
  position: absolute;
  left: 0;
  top: 300px;
  transform: rotateY(-180deg);
}
.p4_e2 {
  position: absolute;
  right: -93px;
  top: 219px;
}

/* p5 */
.p5_e1 {
  position: absolute;
  right: 0;
  top: 95px;
}

/* p6 */
.p6_e1 {
  position: absolute;
  right: 0;
  top: 185px;
}

/* p7 */
.p7_e1 {
  position: absolute;
  right: 0;
  top: 182px;
}
.p7_e2 {
  position: absolute;
  right: 53px;
  top: 418px;
}

/* p9 */
.p9_e1 {
  position: absolute;
  right: 0;
  top: 207px;
}
.p9_e2 {
  position: absolute;
  left: 276px;
  top: 317px;
}

/* p10 */
.p10_e1 {
  position: absolute;
  right: 0;
  top: 106px;
}

/* p11 */
.frame {
  padding-top: 70px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
/*.frame_1{width: 693px; height: auto; border-radius: 30px;}
.frame_content{width: 100%; height: 711px; background-color: #f7f6f4; border-radius: 20px;position: relative;}
.p11_t{position: absolute; left: 22px; top: 38px;}
.p11_name{position: absolute; left: 22px; top: 92px; width: ;}
.p11_1{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("p11_1.png") no-repeat center center; background-size: 100% 100%; }
.p11_1 .frame{ border: 5px solid #e9c5c5; background-color: #ffe3e3;}
.p11_1 .frame_1{border: 5px solid #e9c5c5; background-color: #fff; padding: 45px 24px;}
.p11_1 .frame_1 p{font-family: '微软雅黑'; font-size: 32px; font-weight: bold; color: #cd6454; text-align: left; line-height: 36px;} */

/* .p11 .frame */
.result {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.p11_btn {
  position: absolute;
  right: 49px;
  bottom: -30px;
}
.c1 {
  margin-bottom: 50px;
}
.c2 {
  position: relative;
}
.p11_1 .frame {
  border: 5px solid #e9c5c5;
  background-color: #ffe3e3;
}
.p11_2 .frame {
  border: 5px solid #f2b573;
  background-color: #ffebb9;
}
.p11_3 .frame {
  border: 5px solid #d9bca1;
  background-color: #fff2e9;
}
.p11_4 .frame {
  border: 5px solid #d8a2d6;
  background-color: #f8e0f7;
}
.p11_5 .frame {
  border: 5px solid #badbad;
  background-color: #eeffe8;
}
.p11_6 .frame {
  border: 5px solid #a6e6ff;
  background-color: #d8f4ff;
}
.p11_7 .frame {
  border: 5px solid #99d3d5;
  background-color: #e3feff;
}

/* common animations */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ansPopIn {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pageFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(1.015);
  }
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes qTitleIn {
  from {
    opacity: 0;
    transform: translateY(-28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes eLeftIn {
  from {
    opacity: 0;
    transform: translateX(-34px) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes eRightIn {
  from {
    opacity: 0;
    transform: translateX(34px) rotate(4deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

.anim-home-in {
  animation: pageFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.p0.home-ready .p0_card2.anim-home-in {
  animation-delay: 0.12s;
}
.p0.home-ready .p0_title.anim-home-in {
  animation-delay: 0.32s;
}
.p0.home-ready .p0_tips_arrow.anim-home-in {
  animation-delay: 0.52s;
}
.p0.home-ready .btn_start.anim-home-in {
  animation-delay: 0.72s;
}

.anim-home-float {
  animation: heroFloat 2.6s ease-in-out infinite;
}

.anim-page-in {
  animation: pageFadeIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-page-out {
  animation: pageFadeOut 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.anim-q-in {
  animation: qTitleIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-e-left-in {
  opacity: 1;
  visibility: visible;
  animation: eLeftIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-e-right-in {
  opacity: 1;
  visibility: visible;
  animation: eRightIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bg [class*='_e'].anim-e-left-in,
.bg [class*='_e'].anim-e-right-in {
  opacity: 1;
  visibility: visible;
}

.anim-result-in .frame {
  animation: pageFadeIn 0.5s ease both;
}

.anim-result-in .c1 {
  animation: pageFadeIn 0.45s ease both;
}

.anim-result-in .c2 {
  animation: pageFadeIn 0.55s ease 0.08s both;
}

.anim-result-in .p11_btn {
  animation: ansPopIn 0.45s ease 0.16s both;
}

.ans.anim-ans-in > div {
  opacity: 0;
  animation: ansPopIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ans.anim-ans-in > div:nth-child(1) {
  animation-delay: 0.08s;
}
.ans.anim-ans-in > div:nth-child(2) {
  animation-delay: 0.24s;
}
.ans.anim-ans-in > div:nth-child(3) {
  animation-delay: 0.4s;
}
.ans.anim-ans-in > div:nth-child(4) {
  animation-delay: 0.56s;
}
.ans.anim-ans-in > div:nth-child(5) {
  animation-delay: 0.72s;
}