@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  font-family: 'SourceHanSerifCN';  
}
.screen{position:absolute;left:0;top:0;width:100%;height:100%; opacity:0;visibility: hidden;overflow: hidden;}
.absolute{
  position: absolute;
}


a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; outline:none; background: none; text-decoration: none;}

@font-face {  
  font-family: 'SourceHanSerifCN';  
  src: url('https://image.niceui.cn/1zhilingrui/SourceHanSerifCN-Medium.otf') format('OpenType');
  font-weight: normal;  
  font-style: normal; 
  font-display: swap; 
}
/* @font-face {  
  font-family: 'SourceHanSerifSCBold';  
  src: url('../fonts/SourceHanSerifSC-Bold.subset.otf') format('OpenType');
  font-weight: normal;  
  font-style: normal;  
}

@font-face {  
  font-family: 'SourceHanSerifSCHeavy';  
  src: url('../fonts/SourceHanSerifSC-Heavy.subset.otf') format('OpenType');
  font-weight: normal;  
  font-style: normal;  
}

@font-face {  
  font-family: 'SourceHanSerifSCRegular';  
  src: url('../fonts/SourceHanSerifSC-Regular.subset.otf') format('OpenType');
  font-weight: normal;  
  font-style: normal;  
} */

/* .symbol span{
  display: block;
  position: absolute;
  left:0.08rem;
	top:0.08rem;
	width:0.8533333333333334rem;
	height:0.8533333333333334rem;
	border-radius:0.4266666666666667rem;
	background:#B4BA9D;
  line-height: 0.8533333333333334rem;
  font-size:0.5866666666666667rem;
	font-family:Source Han Sans,Source Han Sans;
	font-weight:900;
	color:#FFFFFF;
  text-align: center;
} */

.wrapper{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* background: url(../images/bg.png) no-repeat; */
  background-size: cover;
   /*background-size: 1.77rem 1.48rem;*/
}


/* flex布局 */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.flex-pack-end{
  -webkit-box-pack:end;
  -webkit-justify-content:flex-end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

/*------------------------------------------------------------------------------------------------------------------*/

/* 竖屏引导层 */
.portrait{
     position:fixed;
     background-color:rgba(0,0,0,0.8);
     left:0;
     top:0;
     width:100%;
     height:100%;
     z-index:999;
     display: none;
}
 .lock{
     background-color:#000000;
     color:#FFFFFF;
     z-index:8000;
     font-size:0.12rem;
}
 .lock-bg {
     width:.894rem;
     height:1.44rem;
     background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAADZBAMAAAD4TT6+AAAAA3NCSVQICAjb4U/gAAAAMFBMVEX///////////////////////////////////////////////////////////////9Or7hAAAAAEHRSTlMAESIzRFVmd4iZqrvM3e7/dpUBFQAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAANsSURBVGiB7du9bxMxFADwl36FjyAigWBBKBILA19/AQn/AM2MhJIRsQDqCBKFATEgwdqpZWFCKkxMKMCEWFoYyxC+xNiWQqGlSczZvst92M757AcS0nvbXa4/3dnnu+d3NQDAhS5zjcFKE0RcdCZ49IWyy8tgbIsj9z0RNgsw6WuwTYB93kgfoOWNsCYs+iML0PVHlsHfYOtm5GsVUnFozQE5A5moF0d+Zw3YUxzZUhDj+PjLZ4LSJji9Yx+E/AeIcnfaxn5CCCGEEEIIIYQQQgghxIyMX3q8ylbf3FGmcvbI2OVoxjZ4VHNEpjosjp2mE3I4PXEcXHNAytnJ5+BqYWSiy7LRbxRESvOKwdh2tRhyIvrD93N3555HG68KIRNhg7w+JzYP3gubRbmgUUhLNsLt4Y7jsol+FkCmpNFO7pJKO3PkCKSl6VLZ5ZvWyIS2FWVbN2yRU3yXWskRRcpPlkhpie9Sx4qoUvbS94oR2c33fFEMgPP8hwd2yLTm2kWIu+eHHbKk6QUZvNd6VkiZ75jVIqJIlup5E3I02N7RGgCd4LePNshNtSOHcTr47ZcFUlrLnnIi+KUOkp1sQPi46RsMENXbdj6yVzdYh3El+PVJPsIv+4MR4a2+kY+MiqjEv+2DRHXQFz5IWFof1LyQI+Lo7/EOF0Q+Jdp+CJxMNasjMr6WbFbXJOdsslldkclkszqnW602AlJObRkR03NAFyZkSv98LYbUNa+cokipyz57I5VggBnTVltkPth854mI1KSnJmeFkLrYfumFBM3KQ/24UwSphA/ABR9kPkTUFKcAgvTKQHl5obxGUV7oIrXYAH3YphY4SQ5KuoWS+OGkoCjJsByEhrS8b5mWo0wQcKYqKJMmnOkbykQSZ0qLMrnGmeajFBxwSh9qEeaW7qD8ctBSwnAsBwGMXR8Wpp7V9If8oxKZRRBCCCGEEEIIIYQQQggh3kEIIb2Z2rEbnohciZKzmiUPeSpu7lLHB4mKu8b/17dB3oZIWDB2QxrRaJ12R+LqXmXUYaORuOBZdkfi70Hj7khcli25I+vxc9Ad+YZxJihtgtI7KPcJyh2LM3ZQRjF7KE9kMQfJFvbSYflk644+oDdTPZD3jF3GWXHW8keaOKvwUNYDoqxMlJ8uPEJ+3MdYrem1bpStcOMPBjyIsXDFjwMAAAAASUVORK5CYII=") 0 0 no-repeat;
     -webkit-background-size:.894rem auto;
     background-size: .894rem auto;
     -webkit-animation:lock 3s infinite 1.5s linear;
     animation:lock 3s infinite 1.5s linear;
     -webkit-transform:rotate(90deg);
     transform:rotate(90deg);
     margin: 2rem auto 1rem;
}
 @-webkit-keyframes lock{
     0%{
         -webkit-transform:rotate(90deg) 
    }
     20%{
         -webkit-transform:translate(0) 
    }
     80%{
         -webkit-transform:translate(0) 
    }
     100%{
         -webkit-transform:translate(90deg) 
    }
}
 @keyframes lock{
     0%{
         transform:rotate(90deg) 
    }
     20%{
         transform:translate(0) 
    }
     80%{
         transform:translate(0) 
    }
     100%{
         transform:translate(90deg) 
    }
}
 @media screen and (orientation:portrait){
     .portrait.lock{
         display:none!important 
    }
}
 .lock-txt{
     margin-top:0.4rem;
     font-size: 0.36rem;
     text-align: center;
}



.shareBg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  display: none;
}

.shareBg dd {
    width: 10rem;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
}



.shareBg dd  img{
 width: 10rem;
 height: 8.266666666666667rem;
}

.shareBg dt {
    width: auto;
    height: auto;
    color: #fff;
    font-size: .48rem;
    position: absolute;
    right: -2.3rem;
    top: 5rem;
}

/*------------------------------------------------------------------------------------------------------------------*/


.translate{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2850;
  background: url(../images/translate/bgTranslate.png) no-repeat;
  background-size: 100% 100%;
  color: #3E2C01;
  opacity: 1;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}
.translate .skip{
  position: absolute;
  right: 0.64rem;
  top: 0.64rem;
  width:2.24rem;
}
.translate .skip>img{
  display: block;
  width: 100%;
}
.translate .btm{
  width: 100%;
  height: 9.386666666666667rem;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/translate/bgBtm.png) no-repeat;
  background-size: 100% auto;
  opacity: 0;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.translate .conWrp{
  width:100%;
	height:3.7333333333333334rem;
	position:absolute;
	left:0;
	top:calc(50% - 4.26rem);
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}

.title{
  width:2.2933333333333334rem;
	height:1.36rem;
	background:url(../images/translate/titlev2.png) no-repeat;
	background-size:100% 100%;
	margin:0 auto 0.12rem;
  opacity: 0;
}

.line{
  width:1.0666666666666667rem;
	height:0.10666666666666667rem;
	background:url(../images/translate/line.png) no-repeat;
	background-size:100% 100%;
	margin:0.3rem auto 0.3rem;
  opacity: 0;
}

.translate h2{
  text-align: center;
  font-size:0.4533333333333333rem;
	/* font-family:'SourceHanSerifSCRegular'; */
	font-weight:400;
	text-shadow:0rem 0.013333333333333334rem 0.013333333333333334rem rgba(255,255,255,0.5);
  margin: 0 0 0.3rem 0;
  line-height: 1.5;
}

.translate h2 span{
  display: block;
  opacity: 0;
}

.c1 ,.c2 ,.c3 ,.c4 ,.c5 ,.c6 ,.c7{
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}

.c1{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.c2{
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.c3{
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
.c4{
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}
.c5{
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}
.c6{
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}
.c7{
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}



/*------------------------------------------------------------------------------------------------------------------*/

.loading{
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3000;
  background: url(../images/loading/bgLoading.png) no-repeat;
  background-size: 100% 100%;
}

.loading::before{
  content: '';
  width:10rem;
	height:12.826666666666666rem;
	background:url(../images/loading/bgLoading2.png) no-repeat;
	background-size:100% 100%;
	position:absolute;
	left:0;
	top:calc(50% - 6.413333333333333rem);
}

.loadWrp{
  width:6.586666666666667rem;
	height:3rem;
	position:absolute;
	left:calc(50% - 3.2933333333333334rem);
	top:calc(50% - 1.5rem);
  background: url(../images/loading/bgLogo.png) no-repeat;
  background-size:6.28rem 2.44rem;
  position: relative;
  padding: 2.44rem 0 0 0;
}
.loadProgress {
  width:6.586666666666667rem;
  height: 0.32rem;
	background:url(../images/loading/bgProgress.png) no-repeat;
	background-size:100% 100%;
}


#progress{
  display: block;
  width:6.586666666666667rem;
  height: 0.32rem;
	background:url(../images/loading/curProgress.png) no-repeat;
	background-size:cover;
}

.loadProgress .text{
  display: block;
  text-align: center;
  font-size: 0.5333333333333333rem;
  /* font-family: 'SourceHanSerifSCHeavy'; */
  font-weight: 900;
  color: #6C4D11;
  margin: 0.28rem 0 0 0;
}

.loadImg{
  display: block;
  width:1.7066666666666668rem;
	height:1.92rem;
	background:url(../images/loading/personv2.png) no-repeat;
	background-size:100% 100%;
  position: absolute;
  top: 0.5rem;
  left: 0;
  margin: 0 0 0 -1rem;
}
.loadingBot{position: absolute;bottom: 0.4rem;left: 0;right: 0;margin: 0 auto;width: 4.48rem;}
/*------------------------------------------------------------------------------------------------------------------*/



.header{
  height: auto;
  padding: 0.5866666666666667rem 0.7466666666666667rem 0 0.7466666666666667rem;
  position: relative;
  z-index: 2800;
}
.logo {
	width:1.5466666666666666rem;
	height:1.1733333333333333rem;
}
.logo img {
	width:100%;
}
.music {
	width:0.7466666666666667rem;
  align-self: flex-start;
}
.music i{
  display: block;
  width: 0.7466666666666667rem;
  height: 0.7466666666666667rem;
  /* background: url(../images/music.png) no-repeat;
  background-size: 100% 100%; */
  background: url(../images/music_off.png) no-repeat;
  background-size: 100% 100%;
}

.music i.musicRotate{
 background: url(../images/music.png) no-repeat;
  background-size: 100% 100%;
  /* animation:musicRotate 2s linear infinite; */
  /* -webkit-animation:musicRotate 2s linear infinite;  */
}

@keyframes musicRotate
{
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);   /* IE 9 */
    -moz-transform:rotate(0deg);  /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
    -o-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg);    
  }
}

@-webkit-keyframes musicRotate /*Safari and Chrome*/
{
  from {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);   /* IE 9 */
    -moz-transform:rotate(0deg);  /* Firefox */
    -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
    -o-transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg);    
  }
}





/*------------------------------------------------------------------------------------------------------------------*/

.index{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2600;
  background: url(../images/index/bgIndex.png) no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  /* opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; */
}

.indexBtm{
  width:10rem;
	height:10.453333333333333rem;
  background: url(../images/index/bgBtm.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.indexCon {
	width:100%;
	height:17.266666666666666rem;
	position:absolute;
	left:0;
	/* top:calc(50% - 8.64rem); */
  top:calc(50% - 8.16rem);
  /*  */
  transform: scale(0.9);
  margin: -0.5rem 0 0 0;
}
.slogan {
	/* width:10.586666666666666rem; */
  width:100%;
	height:16.626666666666665rem;
	margin:0 auto;
  background: url(../images/index/indexCard.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.btnIndex{
  width:8.933333333333334rem;
	height:1.28rem;
	line-height:1.5;
  background: url(../images/index/bgBtn.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  font-size:0.53332rem;
	/* font-family:'SourceHanSerifSCHeavy'; */
	font-weight:900;
	text-shadow:0rem 0rem 0.013333333333333334rem rgba(150,86,14,0.77);
	color:#FFFFFF;
  text-align: center;
  opacity: 0;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*------------------------------------------------------------------------------------------------------------------*/

.answerWrp{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2200;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.answerWrp .page.bg1{
  /* display: block; */
}

.page{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1300;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: none;
}

.page.pageActive{
  opacity: 1;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.page.bg1{
  background-image: url(../images/answer/bg1.png);
}

.page.bg2{
  background-image: url(../images/answer/bg2.png);
}

.page.bg3{
  background-image: url(../images/answer/bg3.png);
}

.page.bg4{
  background-image: url(../images/answer/bg4.png);
}

.page.bg5{
  background-image: url(../images/answer/bg5.png);
}

.page.bg6{
  background-image: url(../images/answer/bg6.png);
}

.page.bg7{
  background-image: url(../images/answer/bg7.png);
}

.page.bg8{
  background-image: url(../images/answer/bg8v2.png);
}

.page.bg9{
  background-image: url(../images/answer/bg9.png);
}

.page.bg10{
  background-image: url(../images/answer/bg10.png);
}

.page.bg11{
  background-image: url(../images/answer/bg11.png);
}

.page.bg12{
  background-image: url(../images/answer/bg12.png);
}

.page.bg13{
  background-image: url(../images/answer/bg13.png);
}

.page .content{
  width:10rem;
	height:11.146666666666667rem;
	position:absolute;
	bottom:0;
	left:0;
  bottom:0;
  padding:2.8rem 0 0.26666666666666666rem 0;
	box-sizing:border-box;
}

.page.bg12 .content ,.page.bg13 .content{
  bottom: 0.38rem;
}
.answerWrp .page .content{
	bottom:0 !important;
  padding: 0;
  height: auto;
  padding-bottom: 0.8rem;
  padding-bottom: calc( 0.8rem + (constant(safe-area-inset-bottom)) / 2 );
  padding-bottom: calc( 0.8rem + (env(safe-area-inset-bottom)) / 2 );
}
.question{
  font-size:0.54rem;
	/* font-family:'SourceHanSerifSCHeavy'; */
  line-height: 1.5;
	font-weight:900;
	color:#313E01;
  padding: 0 0.48rem;
}

.bg11 .question .lineH{
  display: inline-block;
  width: 1rem;
  height: 100%;
  border-bottom: 2px solid #313E01;
}

.optionWrp{
  /* margin: 1.12rem 0 0 0; */
  margin: 0.8rem 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.32rem;
}

.option{
  width:2.88rem;
	height:3.5733333333333333rem;
	background:rgba(255,255,255,0.8);
	opacity:1;
	border:2px solid rgba(219,233,176,0.8);
  border-radius: 0.3rem;
  position: relative;
  box-sizing: border-box;
  padding: 0.5rem 0.13333333333333333rem 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

.symbol{
  width: 1.0133333333333334rem;
  height: 1.0133333333333334rem;
  background: #CFD8B8;
  border-radius: 0.5066666666666667rem;
  background-image: url(../images/answer/bgOpt.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: calc(50% - 0.5066666666666667rem);
  top: -0.5066666666666667rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol span{
  display: block;
  line-height: 1;
  font-size:0.5866666666666667rem;
	/* font-family:'SourceHanSerifSCHeavy'; */
	font-weight:900;
	color:#FFFFFF;
  text-align: center;
  padding-bottom: 0.08rem;
}

.info{
  font-size:0.4266666666666667rem;
	/* font-family:'SourceHanSerifSCBold'; */
	font-weight:700;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  color:#353813;
  opacity: 0.7;
  line-height: 1.4;
}

.option.optCur .info{
  opacity: 1;
}

.option.optCur .symbol{
  background-image: url(../images/answer/bgOptSel.png);
}

.option.optCur{
  background: rgba(224,230,110,0.5)
}


.optionWrp2{
  box-sizing: border-box;
  flex-wrap: wrap;
}
.optionWrp2 .option{
  width:4.133333333333334rem;
	height:2.5866666666666664rem;
  margin: 0 0 0.15rem 0.5rem;
  padding: 0.13333333333333333rem 0.13333333333333333rem 0.13333333333333333rem 0.63333333333333333rem;
}

.optionWrp2 .option .symbol{
  position: absolute;
  left: -0.5rem;
  top: calc(50% - 0.5066666666666667rem);
}
.optionWrp2 .option .info{
  text-align: left;
}

.optionWrp3{
  flex-wrap: wrap;
  margin: 0.3rem 0 0 0;
}
.optionWrp3 .option{
  width:4.053333333333334rem;
	height:2rem;
  margin: 0 0 0.2rem 0.5rem;
  padding: 0.5rem 0.13333333333333333rem 0.13333333333333333rem 0.13333333333333333rem;
}

.optionWrp3 .next{
  margin: 0.3rem 0 0 0;  
}


/* 主题 */

.themeGreen .question{
	color:#313E01;
}
.themeGreen .option{
	border:2px solid rgba(219,233,176,0.8);
}
.themeGreen .option.optCur{
  background: rgba(224,230,110,0.5)
}
.themeGreen .option .symbol{
  background-image: url(../images/answer/bgOpt.png);
}
.themeGreen .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSel.png);
}
.themeGreen .option .info{
  color:#353813;
}
.themeGreen .option.optCur .info{
  color:#353813;
}
.themeGreen .next{ color: #9CA229;}


.themeBlue{}
.themeBlue .question{
	color:#01233E;
}
.themeBlue .option{
	border:2px solid rgba(176,207,233,0.8);
}
.themeBlue .option.optCur{
  background: rgba(110,176,230,0.5);
}
.themeBlue .option .symbol{
  background-image: url(../images/answer/bgOptBlue.png);
}
.themeBlue .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelBlue.png);
}
.themeBlue .option .info{
  color:#132838;
}
.themeBlue .option.optCur .info{
  color:#132838;
}
.themeBlue .next{ color: #296BA2;}
.themeBlue .next i{ 
  background-image: url(../images/answer/iconNextBlue.png);
}


.themeRoseo{}
.themeRoseo .question{
	color:#3E0106;
}
.themeRoseo .option{
	border:2px solid rgba(233,176,181,0.8);;
}
.themeRoseo .option.optCur{
  background: rgba(243,175,180,0.5);
}
.themeRoseo .option .symbol{
  background-image: url(../images/answer/bgOptRaseo.png);
}
.themeRoseo .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelRaseo.png);
}
.themeRoseo .option .info{
  color:#381316;
}
.themeRoseo .option.optCur .info{
  color:#381316;
}
.themeRoseo .next{ color: #A22933;}
.themeRoseo .next i{ 
  background-image: url(../images/answer/iconNextRaseo.png);
}

.themeOrangeRed{}
.themeOrangeRed .question{
	color:#3E1501;
}
.themeOrangeRed .option{
	border:2px solid rgba(233,194,176,0.8);
}
.themeOrangeRed .option.optCur{
  background: rgba(243,197,175,0.5);
}
.themeOrangeRed .option .symbol{
  background-image: url(../images/answer/bgOptOrangeRed.png);
}
.themeOrangeRed .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelOrangeRed.png);
}
.themeOrangeRed .option .info{
  color:#381F13;
}
.themeOrangeRed .option.optCur .info{
  color:#381F13;
}
.themeOrangeRed .next{ color: #A24F29;}
.themeOrangeRed .next i{ 
  background-image: url(../images/answer/iconNextOrangeRed.png);
}

.themeSoilOrange{}
.themeSoilOrange .question{
	color:#3E2601;
}
.themeSoilOrange .option{
	border:2px solid rgba(233,210,176,0.8);
}
.themeSoilOrange .option.optCur{
  background: rgba(243,216,175,0.5);
}
.themeSoilOrange .option .symbol{
  background-image: url(../images/answer/bgOptSoilOrange.png);
}
.themeSoilOrange .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelSoilOrange.png);
}
.themeSoilOrange .option .info{
  color:#381316;
}
.themeSoilOrange .option.optCur .info{
  color:#381316;
}
.themeSoilOrange .next{ color: #A27229;}
.themeSoilOrange .next i{ 
  background-image: url(../images/answer/iconNextSoilOrange.png);
}

.themePink{}
.themePink .question{
	color:#3E011C;
}
.themePink .option{
	border:2px solid rgba(233,176,201,0.8);
}
.themePink .option.optCur{
  background: rgba(243,175,205,0.5);
}
.themePink .option .symbol{
  background-image: url(../images/answer/bgOptPink.png);
}
.themePink .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelPink.png);
}
.themePink .option .info{
  color:#381316;
}
.themePink .option.optCur .info{
  color:#381316;
}
.themePink .next{ color: #A2295D;}
.themePink .next i{ 
  background-image: url(../images/answer/iconNextPink.png);
}

.themePurple{}
.themePurple .question{
  color: #01113E;
}
.themePurple .option{
	border:2px solid rgba(176,191,233,0.8);
}
.themePurple .option.optCur{
  background: rgba(162,152,233,0.5);
}
.themePurple .option .symbol{
  background-image: url(../images/answer/bgOptPurple.png);
}
.themePurple .option.optCur .symbol{
  background-image: url(../images/answer/bgOptSelPurple.png);
}
.themePurple .option .info{
  color:#131D38;
}
.themePurple .option.optCur .info{
  color:#131D38;
}
.themePurple .next{ color: #2C2FC4;}
.themePurple .next i{ 
  background-image: url(../images/answer/iconNextPurple.png);
}

/*  */

.next{
  font-size:0.48rem;
  line-height: 1.5;
	/* font-family:'SourceHanSerifSCBold'; */
	font-weight:700;
	color:#9CA229;
  text-align: center;
  /* margin: 0.64rem auto 0; */
  margin: 0.5rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

.next i{
  width: 0.37333333333333335rem;
  height: 0.37333333333333335rem;
  background-image: url(../images/answer/iconNext.png);
  background-repeat: no-repeat;
  background-size: 0.37333333333333335rem 0.37333333333333335rem;
  margin: 0 0 0 0.1rem;
  animation: arrowAni 2.5s ease 0s infinite;
  -webkit-animation:arrowAni 2.5s ease 0s infinite;
}

@keyframes arrowAni{
  0%{transform: translateX(15%);}
  50%{transform: translateX(0%);}
  100%{transform: translateX(15%);}
}


/*------------------------------------------------------------------------------------------------------------------*/

.generateWrp{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1200;
  /* z-index: 2200; */
  background: url(../images/index/bgIndex.png) no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
  opacity: 1;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
  display: none;
}

.generateCon{
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top:50%;
  transform: translateY(-50%);
}

.generate{
  width: 100%;
  height: 15.146666666666667rem;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  margin: -0.5rem 0 0 0;
}

.generateImg{
  width: 100%;
  height: 15.146666666666667rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.generate0{
  background-image: url(../images/generate/v3/generate0.png);
}
.generate1{
  background-image: url(../images/generate/v3/generate1.png);
}
.generate2{
  background-image: url(../images/generate/v3/generate2.png);
}
.generate3{
  background-image: url(../images/generate/v3/generate3.png);
}
.generate4{
  background-image: url(../images/generate/v3/generate4.png);
}
.generate5{
  background-image: url(../images/generate/v3/generate5.png);
}

#margeImg{
  width: 100%;
  height: auto;
  opacity: 0.01;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* opacity: 1;
  position: fixed; */
}

.saveText{
  width:8.8267rem;
	height:1.12rem;
  margin: 0 auto;
  background: url(../images/generate/saveTextv2.png) no-repeat;
  background-size: contain;
  transform: scale(.9);
  margin: -1.2rem auto 0;
}

.generateCon .btnBtm{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding:0 0.5866666666666667rem;
  box-sizing: border-box;
  /*  */
  transform: scale(.9);
  margin: -0.14rem 0 0 0;
}

.generateCon .btn{
  width:4.16rem;
	height:1.12rem;
	line-height:1.5;
	background:url(../images/generate/bgBtnv2.png) no-repeat;
	background-size: contain;
  font-size: 0.4533333333333333rem;
  /* font-family: 'SourceHanSerifSCHeavy'; */
  font-weight: 900;
  color: #fff;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*------------------------------------------------------------------------------------------------------------------*/


@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5000px, 0);
    transform: translate3d(0, 5000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 5000px, 0);
    transform: translate3d(0, 5000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function:ease-in-out;
  -webkit-animation-timing-function:ease-in-out;
}


.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
*{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}