* {
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  font-family: 'Microsoft YaHei', "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
}

.app {
  transform-origin: 0 0;
  perspective: 750px;
  transform-style: preserve-3d;
  transform: translateZ(1px);
}

.app img, .app div {
  position: absolute;
}

/* tit begin */

.line_top {
  left: 49px;
  top: 0;
  z-index: 2;
  transform-origin: 50% 0;
  transform: rotateX(-180deg);
}

.titBox {
  left: 30px;
  top: 60px;
  width: 668px;
  height: 179px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/tit_bg_black.png') no-repeat;
  transform-origin: 50% -60px;
  transform: rotateX(-180deg);
  z-index: 10;
}

.tit_bg_white {
  left: 6px;
  top: 6px;
}

.tit_bor {
  left: 49px;
  top: 79px;
}

.line_bom {
  left: 97px;
  top: 257px;
}

.titBorBox {
  transform: rotateX(-180deg);
}

/* tit show */

.show .line_top, .hide .titBox, .hide .titBorBox {
  transform: translateY(0px);
}

.show .line_top {
  animation: flipInX 1s cubic-bezier(0.03, 0.85, 0.65, 1.09) both;
}

.show .titBox {
  animation: flipInX 1s 0.1s cubic-bezier(0.03, 0.85, 0.65, 1.09) both;
}

.show .titBorBox {
  animation: flipInX 1s 0.2s cubic-bezier(0.03, 0.85, 0.65, 1.00) both;
}

@keyframes flipInX {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

/* tit hide */

.hide .line_top, .hide .titBox, .hide .titBorBox {
  animation: slideOutUp 1s both;
}

.hide .titBorBox .line_bom {
  transition: all 0.1s;
  opacity: 0;
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-300px);
  }
}

/* tit_con_0 */

.tit_con_0 .tit_red {
  left: 37px;
  top: 32px;
}

.tit_con_0 .tit_white {
  left: 33px;
  top: 28px;
}

.tit_con_0 .heart {
  left: 237px;
  top: 81px;
}

/* tit_con_1 */

.titBox>div:nth-child(n+3) {
  width: 568px;
  height: 99px;
  padding: 30px 50px 50px;
  color: #fff;
  line-height: 40px;
}

.titBox>div:nth-child(n+3) p:nth-child(1) {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 42px;
  height: 42px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/quesIndex_bg.png') no-repeat;
  background-size: contain;
  font-size: 24px;
  text-indent: 8px;
}

.titBox>div:nth-child(n+3) p:nth-child(2) {
  font-size: 26px;
  text-indent: 20px;
}

/* tit end */

/* pic begin */

.picBox {
  width: 663px;
  height: 612px;
  left: 56px;
  top: 318px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic_win.png') no-repeat;
  transform-origin: 50% -318px;
  transform: rotateX(-180deg);
}

.picBox>div {
  width: 651px;
  height: 600px;
  left: 6px;
  top: 6px;
  overflow: hidden;
  perspective: 750px;
  transform-style: preserve-3d;
  transform: translateZ(1px);
}

.ques0Page .picBox {
  animation: flipInX 1s 0.3s cubic-bezier(0.03, 0.85, 0.65, 1.09) both;
}

/* pic0 */

.pic0_person {
  left: 37px;
  top: -348px;
  transform-origin: 50% 100%;
  transform: rotateX(105deg) translateZ(-20px);
  opacity: 0;
}

.sun {
  transform: translateZ(-3000px);
  opacity: 0;
}

.cloud_l {
  left: 376px;
  top: 89px;
  transform: translateZ(-2000px);
  opacity: 0;
}

.cloud_r {
  left: 599px;
  top: 96px;
  transform: translateZ(-2000px);
  opacity: 0;
}

.bridgeBox {
  top: 394px;
}

.bridge {
  left: -9px;
  top: 87px;
  opacity: 0;
}

.wood_line_blod {
  left: -9px;
  top: 21px;
  transform-origin: 50% 900%;
  transform: rotateZ(-50deg);
}

.wood_line {
  left: -9px;
  top: 38px;
  transform-origin: 50% 900%;
  transform: rotateZ(-50deg);
}

.woods{
  transform: translateZ(1px);
}

.woods>img {
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.woods>img:nth-child(1) {
  left: 55px;
  top: 51px;
}

.woods>img:nth-child(2) {
  left: 144px;
  top: 24px;
}

.woods>img:nth-child(3) {
  left: 241px;
  top: 11px;
}

.woods>img:nth-child(4) {
  left: 319px;
  top: 8px;
}

.woods>img:nth-child(5) {
  left: 412px;
  top: 0px;
}

.woods>img:nth-child(6) {
  left: 489px;
  top: 18px;
}

.woods>img:nth-child(7) {
  left: 588px;
  top: 33px;
}

.ques0Page .bridge {
  animation: fadeIn 0.6s 1.6s both;
}

.ques0Page .wood_line_blod {
  animation: bridgeShow 0.6s 1.6s both;
}

.ques0Page .wood_line {
  animation: bridgeShow 0.6s 1.8s both;
}

.ques0Page .sun {
  transition: all 1.5s 1.2s;
  opacity: 1;
  transform: translate3d(437px, -34px, 0px);
}

.ques0Page .cloud_l {
  animation: sunShow 1.5s 1.2s both, sunMove 10s 3s infinite alternate;
}

.ques0Page .cloud_r {
  animation: sunShow 1.5s 1.2s both, sunMove 10s 3s infinite alternate;
}

.ques0Page .pic0_person {
  animation: fadeIn 0.1s 2.4s both, pic1_personShow 0.6s 2.5s both, pic1_personMove 10s 3s infinite alternate;
}

@keyframes bridgeShow {
  0% {
    transform: rotateZ(-50deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

@keyframes woodsShow {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes pic1_personShow {
  100% {
    transform: rotateX(0deg) translateZ(0px);
  }
}

@keyframes sunShow {
  100% {
    opacity: 1;
    transform: translateZ(0px);
  }
}

@keyframes sunMove {
  0% {
    transform: translateZ(0px) translateX(0px);
  }
  100% {
    transform: translateZ(0px) translateX(-400px);
  }
}

@keyframes pic1_personMove {
  0% {
    transform: rotateZ(0deg) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: rotateZ(15deg) translate3d(250px, -55px, 0px);
  }
}

/* pic1 */

.pic1_build {
  left: 0px;
  top: 84px;
  transform: skewX(50deg) translateX(-800px);
}

.pic1_road {
  left: 98px;
  top: 420px;
  opacity: 0;
}

.pic1_tree_box {
  width: 300px;
  height: 600px;
  left: 351px;
  top: 0px;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
}

.pic1_tree_t {
  top: -6px;
  transform-origin: 100% 50%;
}

.pic1_tree_b {
  left: 186px;
  top: 189px;
}

.pic1_person {
  width: 262px;
  height: 276px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic1_person.png');
  left: 310px;
  top: 358px;
  transform-origin: 50% 100%;
  transform: rotateX(-180deg);
}

.pic1_person img {
  left: 180px;
  top: 52px;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
}

.ques1Page .bridgeBox, .ques1Page .cloudBox {
  transition: all 2s;
  transform: scale(2) translate(-1000px, 200px);
  opacity: 0;
}

.ques1Page .sun {
  transition: all 2s;
  transform: translateZ(0px) translateX(-50px) translateY(-60px) scale(0.8);
}

.ques1Page .pic1_tree_t {
  animation: pic1TreeMove 1s 3s infinite alternate;
}

.ques1Page .pic1_tree_box {
  transition: all 1s 1.6s;
  transform: rotateY(0deg);
}

.ques1Page .pic1_person {
  transition: all 1s 1.6s;
  transform: rotateX(0deg);
}

.ques1Page .pic1_person img {
  animation: pic1PersonEyeMove 1s 1.6s both infinite alternate;
}

.ques1Page .pic1_build {
  transition: all 1s 1.4s;
  transform: skewX(0deg) translateX(0px);
}

.ques1Page .pic1_road {
  transition: all 1s 2s;
  opacity: 1;
}

@keyframes pic1TreeMove {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(20deg);
  }
}

@keyframes pic1PersonEyeMove {
  100% {
    transform: rotate(-360deg);
  }
}

/* pic2 */

.pic2_person {
  left: 112px;
  top: 184px;
  transform: translateX(-300px);
}

.pic2_pop_box {
  width: 125px;
  height: 128px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic2_pop.png');
  left: 242px;
  top: 152px;
  transform-origin: 0% 70%;
  transform: scale(0);
}

.pic2_pop_wen {
  left: 40px;
  top: 20px;
  transform-origin: 50% 50%;
}

.ques2Page .pic1_build {
  transition: all 1s;
  transform: skewX(50deg) translateX(-800px);
}

.ques2Page .pic1_road {
  transition: all 1s;
  opacity: 0;
}

.ques2Page .pic2_person {
  transition: all 1s;
  transform: translateX(0px);
}

.ques2Page .pic2_pop_box {
  transition: all 0.5s 1s;
  transform: scale(1);
}

.ques2Page .pic2_pop_wen {
  animation: pic2popwenMove 3s 1.6s linear both infinite;
}

.ques2Page .sun {
  transition: all 1s;
  left: 0px;
  top: 0px;
  opacity: 1;
  transform: translateZ(0px) scale(0.7);
  animation: none;
}

.ques2Page .pic1_person img {
  animation: none;
  transform: rotate(30deg);
}

@keyframes pic2popwenMove {
  100% {
    transform: rotate(360deg);
  }
}

/* pic3 */

.pic3Box {
  transform: translateY(-610px);
}

.pic3_person_l {
  left: 35px;
  top: 124px;
  transform-origin: 50% 100%;
}

.pic3_person_r_box {
  left: 392px;
  top: 106px;
  width: 205px;
  height: 499px;
  transform-origin: 50% 100%;
}

.pic3_redLine {
  left: 45px;
  top: 218px;
}

.ques3Page .pic2_pop_box {
  transition: all 0.5s;
  opacity: 0;
}

.ques3Page .pic2_person {
  transition: all 1s;
  transform: translateX(-300px);
}

.ques3Page .pic1_person {
  transition: all 1s;
  transform: rotateX(0) translateX(350px);
}

.ques3Page .pic1_tree_box {
  transition: all 1s;
  transform: rotateY(90deg);
}

.ques3Page .sun {
  transition: all 1s;
  left: 480px;
  top: -20px;
  opacity: 1;
  transform: translateZ(0px) scale(0.6);
  animation: none;
}

.ques3Page .pic3Box {
  animation: pic3personShow 0.5s 0.5s both;
}

.ques3Page .pic3_person_l {
  animation: bounce 1s 0.8s both;
}

.ques3Page .pic3_person_r_box {
  animation: bounce 1s 0.85s both;
}

.ques3Page .pic3_redLine {
  animation: redLineAni 0.2s 2s cubic-bezier(0.215, 0.610, 0.355, 1.09) both infinite alternate;
}

@keyframes redLineAni {
  0% {
    transform: skew(-10deg, -10deg);
  }
  30% {
    transform: skew(10deg, -10deg);
  }
  70% {
    transform: skew(10deg, 10deg);
  }
  100% {
    transform: skew(-10deg, 10deg);
  }
}

@keyframes pic3personShow {
  0% {
    transform: translateY(-610px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translateY(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translateY(-40px);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translateY(-20px);
  }
  90% {
    transform: translateY(-4px);
  }
}

/* pic4 */

.ques4Page .pic3_person_l {
  animation: pic3personHide_l 1s both;
}

.ques4Page .pic3_person_r_box {
  animation: pic3personHide_r 1s both;
}

@keyframes pic3personHide_l {
  95%, 100% {
    left: -8px;
    top: 120px;
    transform: translateY(0px) scale(0.97);
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pic3personHide_r {
  95%, 100% {
    left: 415px;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.pic4_person_l_box {
  width: 303px;
  height: 469px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic4_person_l.png') no-repeat;
  left: 12px;
  top: 137px;
  opacity: 0;
}

.pic4_person_l_eye_l {
  left: 94px;
  top: 65px;
  transform-origin: 50% 50%;
}

.pic4_person_l_eye_r {
  left: 120px;
  top: 65px;
  transform-origin: 50% 50%;
}

.pic4_person_r {
  left: 269px;
  top: 106px;
  opacity: 0;
}

.pic4_person_l_pop_box {
  left: 168px;
  top: 130px;
  transform-origin: 0% 50%;
  transform: scale(0);
}

.pic4_person_l_pop_hand {
  left: 20px;
  top: 20px;
  transform-origin: 50% 0%;
}

.ques4Page .pic4_person_l_box, .ques4Page .pic4_person_r {
  transition: 0.05s 0.95s all;
  opacity: 1;
}

.ques4Page .pic4_person_l_eye_l, .ques4Page .pic4_person_l_eye_r {
  animation: eyesPop 0.1s 2s both infinite alternate;
}

.ques4Page .pic4_person_l_pop_box {
  transition: 0.5s 0.95s all;
  transform: scale(1);
}

.ques4Page .pic4_person_l_pop_hand {
  animation: handMove 2s 2s both infinite alternate;
}

.ques4Page .sun {
  transition: all 1s;
  left: 480px;
  top: -20px;
  opacity: 0;
  transform: translateZ(300px) scale(0.6);
  animation: none;
}

@keyframes eyesPop {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.5);
  }
}

@keyframes handMove {
  0% {
    transform: rotateX(20deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
}

/* pic5 */

.pic5_person {
  left: 106px;
  top: 98px;
  opacity: 0;
  transform-origin: center;
}

.pic5_hill_l {
  left: -24px;
  top: 270px;
  transform: translateX(-650px) translateZ(-200px) scale(1.4);
}

.pic5_hill_r {
  left: 330px;
  top: 313px;
  transform: translateX(500px) translateZ(-200px) scale(1.4);
}

.pic5_pop_box {
  width: 176px;
  height: 161px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic5_pop.png') no-repeat;
  left: 262px;
  top: 114px;
  opacity: 0;
}

.pic5_pop_txt1 {
  left: 65px;
  top: 40px;
}

.pic5_pop_txt2 {
  left: 54px;
  top: 60px;
}

.pic5_pop_txt3 {
  left: 65px;
  top: 86px;
}

.pic5_pop_txt4 {
  left: 54px;
  top: 106px;
}

.ques5Page .pic4_person_l_pop_box {
  transition: all 0.8s;
  transform: scale(0);
}

.ques5Page .pic4_person_r {
  transition: all 1s;
  transform: translateX(400px);
}

.ques5Page .pic4_person_l_box {
  transform-origin: 0% 50%;
  transition: all 0.8s 0.3s;
  transform: scale(1.2) rotateY(90deg) translateX(-40px);
  opacity: 0;
}

.ques5Page .pic5_person {
  transition: all 0.6s 0.5s;
  opacity: 1;
  animation: pic5_personMove 10s 2s linear both infinite;
  z-index: 10;
}

.ques5Page .pic5_pop_box {
  transition: all 0.6s 0.8s;
  opacity: 1;
  animation: pic5_popMove 10s 2s linear both infinite;
}

.ques5Page .pic5_hill_l {
  transition: all 0.6s 0.8s;
  transform: translateX(0px) translateZ(-200px) scale(1.3);
}

.ques5Page .pic5_hill_r {
  transition: all 0.6s 0.8s;
  transform: translateX(40px) translateZ(-200px) scale(1.3);
}

.ques5Page .sun {
  transition: all 1s;
  left: 480px;
  top: -20px;
  opacity: 1;
  transform: translateZ(0px) scale(0.6);
  animation: none;
}

@keyframes pic5_personMove {
  0% {
    left: 0px;
    transform: rotateY(0deg) translateZ(10px);
  }
  50% {
    left: 500px;
    transform: rotateY(0deg) translateZ(10px);
  }
  51% {
    left: 500px;
    transform: rotateY(-180deg) translateZ(10px);
  }
  100% {
    left: 0px;
    transform: rotateY(-180deg) translateZ(10px);
  }
}

@keyframes pic5_popMove {
  0% {
    left: 150px;
    transform: rotateY(0deg);
  }
  50% {
    left: 650px;
    transform: rotateY(0deg);
  }
  51% {
    left: 330px;
    transform: rotateY(-180deg);
  }
  100% {
    left: -170px;
    transform: rotateY(-180deg);
  }
}

/* pic6 */

.pic6_person {
  left: 362px;
  top: 115px;
  transform-origin: 50% 100%;
  transform: rotateX(100deg);
  opacity: 0;
}

.pic6_river_box {
  width: 652px;
  height: 227px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic6_river.png') no-repeat;
  top: 380px;
  transform: translateY(250px);
}

.pic6_line1 {
  left: 28px;
  top: 56px;
  transform-origin: center;
}

.pic6_leaf {
  left: 326px;
  top: 110px;
  transform-origin: center;
}

.pic6_line2 {
  left: 432px;
  top: 162px;
  transform-origin: center;
}

.ques6Page .pic5_person, .ques6Page .pic5_pop_box {
  transition: all 1s 0.2s;
  opacity: 0;
}

.ques6Page .pic5_hill_l {
  transition: all 0.6s;
  transform: translateX(-650px) translateZ(-200px) scale(1.3);
}

.ques6Page .pic5_hill_r {
  transition: all 0.6s;
  transform: translateX(500px) translateZ(-200px) scale(1.3);
}

.ques6Page .sun {
  transition: all 1s 1s;
  left: 0px;
  top: 0px;
  opacity: 1;
  transform: translateZ(0px) scale(0.7);
  animation: none;
}

.ques6Page .pic6_river_box {
  transition: all 1s 1s;
  transform: translateY(0px);
}

.ques6Page .pic6_person {
  transition: all 1s 1.5s;
  transform: rotateX(0deg);
  opacity: 1;
}

.ques6Page .pic6_leaf {
  animation: pic6_leafMove 2s 3s linear both infinite alternate;
}

@keyframes pic6_leafMove {
  0% {
    transform: translate(-20px, -10px) rotate(0deg);
  }
  100% {
    transform: translate(10px, 10px) rotate(20deg);
  }
}

/* pic7 */

.pic7_car_box {
  left: 70px;
  top: 154px;
  width: 325px;
  height: 449px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic7_car.png') no-repeat;
  transform: translateX(-400px);
}

.pic7_mouth {
  left: 150px;
  top: 127px;
  transform: scaleY(1);
}

.pic7_flag_box {
  left: 440px;
  top: 44px;
  width: 175px;
  height: 560px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic7_flag_b.png') no-repeat;
  transform: translateX(220px);
}

.pic7_flag_t {
  top: 24px;
  transform-origin: 50% 0%;
}

.ques7Page .pic6_person {
  transition: all 0.5s;
  transform: rotateX(100deg);
  opacity: 0;
}

.ques7Page .pic6_river_box {
  transition: all 1s 0.3s;
  transform: translateY(250px);
}

.ques7Page .sun {
  transition: all 1s;
  transform: translateZ(300px) scale(0.7);
  opacity: 0;
}

.ques7Page .pic7_car_box {
  transition: all 1s 0.6s;
  transform: translateX(0px);
}

.ques7Page .pic7_flag_box {
  transition: all 1s 0.6s;
  transform: translateX(0px);
}

.ques7Page .pic7_mouth {
  animation: pic7_mouthMove 0.5s 3s linear both infinite alternate;
}

@keyframes pic7_mouthMove {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.5);
  }
}

.ques7Page .pic7_flag_t {
  animation: pic7_flag_tMove 2s 3s linear both infinite alternate;
}

@keyframes pic7_flag_tMove {
  0% {
    transform: skew(0px, 0px);
  }
  100% {
    transform: skew(-10deg, 0deg);
  }
}

/* pic8 */

.pic8_bg {
  left: -4px;
  top: -4px;
  width: 663px;
  height: 612px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic8_bg.png') no-repeat;
  opacity: 0;
}

.pic8_persons {
  left: -50px;
  top: 20px;
  opacity: 0;
}

.pic8_person {
  left: 285px;
  top: 45px;
  transform: translate3d(-550px, 0, 10px);
  z-index: 10;
}

.ques8Page .pic7_car_box, .ques8Page .pic7_flag_box {
  transition: all 1s 1s;
  opacity: 0;
}

.ques8Page .pic8_bg {
  transition: all 1s 1s;
  opacity: 1;
}

.ques8Page .pic8_persons {
  transition: all 1s 1.5s;
  opacity: 1;
}

.ques8Page .pic8_person {
  transition: all 1s 2s;
  transform: translate3d(0px, 0, 10px);
}

/* pic9 */

.pic9_box {
  width: 650px;
  height: 600px;
  transform-origin: center;
}

.pic9_heart {
  left: 16px;
  top: 28px;
  width: 619px;
  height: 511px;
  transform-origin: center;
  transform: scale(0);
}

.pic9_table {
  left: 190px;
  top: 392px;
  transform: translateY(220px);
}

.pic9_person_l_b {
  left: 38px;
  top: 318px;
  transform-origin: 0% 100%;
  transform: rotate(-90deg);
  opacity: 0;
}

.pic9_person_r_b {
  left: 452px;
  top: 318px;
  transform-origin: 100% 100%;
  transform: rotate(90deg);
  opacity: 0;
}

.pic9_person_l {
  left: 52px;
  top: 162px;
  transform: translateY(-610px);
}

.pic9_person_r {
  left: 380px;
  top: 206px;
  transform: translateY(-610px);
}

.ques9Page .pic8_person {
  transition: all 1.5s;
  transform: translateX(300px);
  opacity: 0;
}

.ques9Page .pic8_persons, .ques9Page .pic8_bg {
  transition: all 1s 0.5s;
  opacity: 0;
}

.ques9Page .pic9_heart {
  transition: all 1s 1.5s;
  transform: scale(1);
}

.ques9Page .pic9_heart img {
  animation: pic9_heartMove 5s 3s linear both infinite alternate;
}

@keyframes pic9_heartMove {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

.ques9Page .pic9_table {
  transition: all 1s 1.5s;
  transform: translateY(0);
}

.ques9Page .pic9_person_l_b {
  transition: all 1s 1.5s;
  transform: rotate(0deg);
  opacity: 1;
}

.ques9Page .pic9_person_r_b {
  transition: all 1s 1.5s;
  transform: rotate(0deg);
  opacity: 1;
}

.ques9Page .pic9_person_l {
  transition: all 1s 1.5s;
  transform: translateY(0);
}

.ques9Page .pic9_person_r {
  transition: all 1s 1.5s;
  transform: translateY(0);
}

/* pic10 */

.pic10_line {
  left: 202px;
  top: -4px;
  transform: translate(-445px, -604px);
}

.pic10_r_box {
  left: 320px;
  opacity: 0;
}

.pic10_build {}

.pic10_person_single {
  left: 166px;
  top: 292px;
}

.pic10_l_box {
  opacity: 0;
}

.pic10_lantern_l {
  transform-origin: 50% 0;
  left: 10px;
  transform: rotateZ(0deg);
}

.pic10_lantern_r {
  transform-origin: 50% 0;
  left: 120px;
  transform: rotateZ(0deg);
}

.pic10_person {
  top: 181px;
}

.ques10Page .pic9_box {
  transition: all 1s;
  transform: scale(3);
  opacity: 0;
}

.ques10Page .pic10_line {
  transition: all 0.5s 0.5s;
  transform: translate(0, 0);
}

.ques10Page .pic10_r_box {
  transition: all 0.8s 0.8s;
  opacity: 1;
}

.ques10Page .pic10_l_box {
  transition: all 0.8s 1.2s;
  opacity: 1;
}

.ques10Page .pic10_lantern_l,.ques10Page .pic10_lantern_r {
  animation: pic10_lantern_lMove 5s 3s linear both infinite alternate;
}

@keyframes pic10_lantern_lMove {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(20deg);
  }
  100% {
    transform: rotateZ(-20deg);
  }
}

/* pic end */

/* btn begin */

.btnBox {
  left: 30px;
  top: 984px;
}

/* btn show */

.show .btnBox>div>div:nth-child(1) {
  animation: fadeIn 1s 1.2s both;
}

.show .btnBox>div>div:nth-child(2) {
  animation: fadeIn 1s 1s both;
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

/* btn hide */

.hide .btnBox {
  animation: slideOutDown 1s both;
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(350px);
  }
}

/* btn_con_0 */

.startBtn {
  width: 689px;
  height: 212px;
  opacity: 0;
  top: 35px;
}

.logoBox {
  opacity: 0;
  top: 287px;
}

.gx_logo {
  left: 60px;
}

.app_logo {
  left: 284px;
}

/* btn_con_1 */

.btnBox>div:nth-child(n+2)>div {
  width: 662px;
  height: 134px;
  left: 15px;
  opacity: 0;
}

.btnBox>div:nth-child(n+2)>div:nth-child(2) {
  top: 176px;
}

.btnBox>div:nth-child(n+2)>div>div {
  font-size: 30px;
  font-weight: bold;
  padding-left: 110px;
  line-height: 116px;
  transition: all 0.05s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btnBox>div:nth-child(n+2)>div.cur>div{
  transform: translateY(18px);
}

.btnBox>div:nth-child(n+2)>div:nth-child(1) img {
  top: 18px;
}

.btnBox>div:nth-child(n+2)>div:nth-child(1) div {
  width: 550px;
  height: 114px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/option_top_a.png');
}

.btnBox>div:nth-child(n+2)>div:nth-child(2) img {
  top: 18px;
}

.btnBox>div:nth-child(n+2)>div:nth-child(2) div {
  width: 550px;
  height: 114px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/option_top_b.png');
}

/* btn end */

/* frontPage only begin */

.picBorBox {
  width: 660px;
  height: 616px;
  left: 30px;
  top: 347px;
  transform-origin: 50% -347px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/pic_bor.png') no-repeat;
  transform: rotateX(-180deg);
}

.show .picBorBox {
  animation: flipInX 1s 0.3s cubic-bezier(0.03, 0.85, 0.65, 1) both;
}

.hide .picBorBox {
  animation: fadeOut 0.1s both;
}

/* frontPage only end */

/* overPage */

.overPage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  transform: translateZ(40px);
  opacity: 0;
  display: none;
  transition: all 1s;
}

.overCon {
  display: block !important;
}

.end_result {
  left: 66px;
  top: 56px;
}

.end_result_bom {
  top: 20px;
}

.end_result_top {
  width: 604px;
  height: 775px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/end_result_top.png');
  left: 20px;
  transform: translate(-20px, 20px);
}

.end_tit{
  left: 114px;
  top: 36px;
}

.end_txt{
  left: 240px;
  top: 566px;
}

.result_img{
  left: 44px;
  top: 166px;
}

.result_img>img:nth-child(n+2) {
  opacity: 0;
}

.end_btnBox {
  left: 66px;
  top: 886px;
}

.end_btnBox>div>img {
  left: 10px;
  top: 10px;
}

.end_btnBox>div>div {
  width: 277px;
  height: 232px;
  background: url('//p1.ifengimg.com/tangloveh5/20180816a/end_btn_top.png');
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  transform: translate(10px, 10px);
}

.end_btnBox>div>div.cur {
  transition: all 0.05s!important;
  transform: translate(10px, 10px)!important;
}

.end_btnBox>div:nth-child(2) {
  left: 334px;
}

.show .end_result>div,.show .end_btnBox>div>div {
  transition: all 1s 0.5s;
  transform: translate(0px, 0px);
}

.logo_box {
  left: 42px;
  top: 1200px;
}

.end_gzs_logo{
  left: 54px;
  top: 70px;
}

.app_download{
  left: 524px;
  top: -2px;
}

.xtj_logo{
  left: 512px;
  top: 60px;
}

/* shareHintPage */

.shareHintPage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  transform: translateZ(40px);
  opacity: 0;
  display: none;
  transition: all 0.3s;
}
.shareHintPage img{
  left: 420px;
  top: 40px;
}